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
Sintaxe de Java para Iniciantes em Programação
Como usar Ajax com JavaScript
