HTML, que significa HyperText Markup Language, é a espinha dorsal de qualquer página da web. Ele fornece a estrutura básica de um documento web, que é então aprimorada e modificada por outras tecnologias como CSS e JavaScript. Para entender melhor como criar um site incrível, é essencial começar com a estrutura básica de um documento HTML.
Um documento HTML é composto por uma série de elementos, que são blocos de construção que definem a estrutura e o conteúdo de uma página web. Cada elemento HTML é representado por uma tag. As tags HTML são delimitadas por colchetes angulares, por exemplo, <tag>, e geralmente vêm em pares: uma tag de abertura e uma tag de fechamento, com o conteúdo entre elas.
Elementos Estruturais Básicos
Vamos explorar os principais elementos que compõem a estrutura básica de um documento HTML:
<!DOCTYPE html>
Esta declaração é a primeira linha em um documento HTML e informa ao navegador que tipo de documento esperar. Embora não seja uma tag HTML, o <!DOCTYPE html> é crucial para garantir que a página seja renderizada corretamente.
<html>
A tag <html> é a raiz de um documento HTML. Todos os outros elementos HTML são filhos desta tag. Ela representa o início e o fim do documento HTML.
<head>
A seção <head> contém metadados sobre o documento, como seu título, links para folhas de estilo CSS, scripts, e outras informações que não são exibidas diretamente na página. Aqui estão alguns elementos comuns encontrados dentro da tag <head>:
<title>: Define o título do documento, que aparece na aba do navegador.<meta>: Usado para especificar metadados como o conjunto de caracteres, palavras-chave, descrição, e autor do documento.<link>: Usado para vincular a folha de estilo CSS externa ao documento HTML.<script>: Usado para incluir scripts JavaScript que podem ser executados na página.
<body>
A seção <body> contém todo o conteúdo visível da página web, como texto, imagens, vídeos, links, etc. Dentro da tag <body>, você pode incluir uma variedade de elementos para estruturar e estilizar o conteúdo:
Elementos de Cabeçalho
Os elementos de cabeçalho são usados para definir títulos e subtítulos na página web. Existem seis níveis de cabeçalhos, de <h1> a <h6>, sendo <h1> o mais importante e <h6> o menos importante. Eles ajudam a organizar o conteúdo e a melhorar a acessibilidade e SEO.
Parágrafos
Os parágrafos são definidos com a tag <p>. Eles são usados para agrupar blocos de texto em uma página web. O navegador adiciona automaticamente um espaço antes e depois de um parágrafo para separá-lo de outros elementos.
Listas
Listas são uma maneira eficaz de apresentar informações em um formato organizado. Existem dois tipos principais de listas em HTML:
<ul>: Lista não ordenada, que usa marcadores.<ol>: Lista ordenada, que usa números.<li>: Representa um item de lista e é usado dentro de<ul>ou<ol>.
Links
Os links são criados usando a tag <a>. Eles permitem que os usuários naveguem para outras páginas ou recursos. A tag <a> usa o atributo href para especificar o destino do link.
Imagens
Imagens são incorporadas em uma página web usando a tag <img>. Esta tag é vazia, o que significa que não tem uma tag de fechamento. O atributo src é usado para especificar o caminho da imagem, enquanto o atributo alt fornece um texto alternativo para a imagem, importante para acessibilidade.
Divisões e Span
As tags <div> e <span> são usadas para agrupar elementos HTML e aplicar estilos CSS. A tag <div> é um contêiner de bloco que pode conter outros elementos HTML, enquanto a tag <span> é um contêiner em linha usado para agrupar partes de texto ou outros elementos.
Compreender a estrutura básica de um documento HTML é fundamental para criar sites eficazes e bem-organizados. À medida que você se familiariza com esses elementos, pode começar a explorar como o CSS pode ser usado para estilizar e melhorar ainda mais suas páginas web. Este conhecimento é o primeiro passo para se tornar um desenvolvedor web proficiente.
