Introdução ao HTML: Estrutura básica, Tags e Atributos
HTML, ou HyperText Markup Language, é a linguagem de marcação padrão para criar páginas e aplicações web. Compreender a estrutura básica do HTML, bem como as tags e atributos, é fundamental para qualquer desenvolvedor front-end. Neste capítulo, vamos explorar esses conceitos em detalhes.
Estrutura básica do HTML
Um documento HTML é composto por elementos HTML, que são indicados por tags. Cada documento HTML começa com a declaração do tipo de documento , que informa ao navegador que o documento é um arquivo HTML5. Segue-se a tag <html> que envolve todo o conteúdo da página.
<!DOCTYPE html> <html> ... </html>
Dentro da tag <html>, temos duas partes principais: o <head> e o <body>. O <head> contém metadados sobre o documento, como o título da página (tag <title>), links para folhas de estilo CSS (tag <link>) e scripts JavaScript (tag <script>). O <body> contém o conteúdo real da página que é visível para os usuários.
<!DOCTYPE html> <html> <head> <title>Título da Página</title> </head> <body> Conteúdo da página... </body> </html>
Tags HTML
As tags HTML são usadas para definir elementos em um documento HTML. Elas são cercadas por colchetes angulares (< e >). A maioria das tags vem em pares e envolve o conteúdo que estão afetando. Por exemplo, a tag <p> é usada para criar um parágrafo:
<p>Este é um parágrafo.</p>
Existem muitas tags HTML, cada uma com seu próprio propósito. Algumas das mais comuns incluem <h1> a <h6> para cabeçalhos, <a> para links, <img> para imagens, <ul> e <li> para listas, e <div> e <span> para agrupar elementos.
Atributos HTML
Os atributos HTML são usados para fornecer informações adicionais sobre um elemento. Eles são sempre especificados no início da tag de abertura e geralmente vêm em pares nome/valor. Por exemplo, a tag <a> geralmente usa o atributo href para especificar o URL do link:
<a href="https://www.example.com">Este é um link</a>
Outros atributos comuns incluem o src para especificar a fonte de uma imagem, o alt para especificar o texto alternativo para uma imagem, e o style para adicionar estilos CSS a um elemento.
Em resumo, o HTML é a espinha dorsal de qualquer página web. Compreender a estrutura básica do HTML, bem como as tags e atributos, é o primeiro passo para se tornar um desenvolvedor front-end eficaz. No próximo capítulo, exploraremos o CSS e como ele é usado para estilizar elementos HTML.