O Básico do HTML: Como Ele Funciona e as Principais Tag
HTML é a base de toda página web. Entender o básico do HTML, como ele funciona e as tags principais é essencial para qualquer pessoa que deseja começar na área de programação e desenvolvimento web. Neste artigo, vamos abordar esses tópicos de forma clara e didática.
O que é HTML?
HTML, que significa HyperText Markup Language (Linguagem de Marcação de Hipertexto), é a linguagem padrão usada para criar e estruturar o conteúdo na web. Ele define a estrutura básica de uma página web, permitindo que textos, imagens, vídeos e outros elementos sejam exibidos de maneira organizada nos navegadores.
Como o HTML Funciona?
Estrutura Básica
Uma página HTML começa com uma estrutura básica. Aqui está um exemplo simples de um documento HTML:
<!DOCTYPE html>
<html>
<head>
<title>Minha Primeira Página HTML</title>
</head>
<body>
<h1>Bem-vindo ao HTML!</h1>
<p>Esta é a minha primeira página HTML.</p>
</body>
</html>Vamos decompor essa estrutura:
- <!DOCTYPE html>: Declara o tipo do documento e a versão do HTML.
- <html>: Envolve todo o conteúdo da página.
- <head>: Contém metadados, como o título da página e links para estilos e scripts.
- <title>: Define o título que aparece na aba do navegador.
- <body>: Contém todo o conteúdo visível da página, como textos, imagens e vídeos.
Tags Principais do HTML
As tags HTML são elementos que definem diferentes partes de uma página web. Aqui estão algumas das tags principais e suas funções:
<h1> a <h6>: Cabeçalhos
Os cabeçalhos são usados para definir títulos e subtítulos. Eles variam de <h1> (mais importante) a <h6> (menos importante).
<h1>Este é um Título Principal</h1>
<h2>Este é um Subtítulo</h2><p>: Parágrafos
A tag <p> define um parágrafo de texto.
<p>Este é um parágrafo de texto.</p><a>: Links
A tag <a> é usada para criar links. O atributo “href” especifica o destino do link.
<a href="https://www.exemplo.com">Visite o Exemplo</a><img>: Imagens
A tag <img> incorpora imagens. Os atributos “src” e “alt” especificam a fonte da imagem e o texto alternativo, respectivamente.
<img src="imagem.jpg" alt="Descrição da Imagem"><ul>, <ol> e <li>: Listas
As tags <ul> e <ol> definem listas não ordenadas e ordenadas, respectivamente. A tag <li> define cada item da lista.
<ul>
<li>Item da Lista 1</li>
<li>Item da Lista 2</li>
</ul>
<ol>
<li>Primeiro Item</li>
<li>Segundo Item</li>
</ol><div> e <span>: Contêineres
As tags <div> e <span> são usadas como contêineres para agrupar conteúdo e aplicar estilos. <div> é um bloco de nível, enquanto <span> é de nível inline.
<div>
<p>Este parágrafo está dentro de uma div.</p>
</div>
<span>Este texto está dentro de um span.</span>Conclusão
O HTML é a espinha dorsal de qualquer página web. Aprender o básico do HTML, como ele funciona e as tags principais, é o primeiro passo para se tornar um desenvolvedor web. Com essa base, você poderá criar e estruturar suas próprias páginas web de maneira eficiente.
Este artigo faz parte da nossa cobertura do Roadmap para se tornar um desenvolvedor front-end, confira o roadmap completo em Roadmap.sh. Você também pode ler mais artigos como este em nosso blog.
You May Also Like
Como Trabalhar com Links no HTML5
Desenvolvimento de Apps com Dart e Flutter
