Fundamentos do HTML5 e Estrutura Básica: Um Guia para Iniciantes
Tags: webdev, html, beginners, frontend
Published: 2023-08-24 15:07:50

Neste artigo, apresentarei o **HTML5**, abordando o que é o HTML5, o que é uma *tag*, suas partes e *Doctype* HTML5, bem como sua estrutura básica.

## O que é o HTML e o HTML5?

HTML significa **Linguagem de Marcação de Hipertexto** e, como o nome sugere, é uma linguagem de marcação, não uma linguagem de programação. O HTML forma a base para o desenvolvimento de páginas da web e sistemas web. Ele possibilita a delimitação de diferentes partes de uma página da web, como cabeçalhos, rodapés, menus, listas, parágrafos, imagens, botões e muito mais. No entanto, o HTML não lida com o posicionamento de elementos; o CSS é usado para esse fim.

O HTML5 é a quinta iteração do HTML e é a versão atual. Ele introduz novos recursos, focados, principalmente, em aprimorar a semântica da web.

## Como o HTML5 Funciona

O HTML e o HTML5 funcionam de maneira semelhante a arquivos XML, assemelhando-se a árvores onde os elementos têm filhos (outros elementos). Cada elemento, conhecido como uma **tag**, é aberto e fechado, e os elementos podem ser aninhados uns dentro dos outros.

Considere o seguinte exemplo de um arquivo HTML:

```html
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body lang="pt-br">

    <h1>Meu Primeiro Título</h1>
    <p>Meu primeiro parágrafo.</p>

  </body>
</html>
```

Observe que a tag `<html>` do HTML é aberta na segunda linha e fechada na última linha. Dentro do elemento HTML, existem tags `head` e `body`, que são irmãs. Essas duas tags são filhas da tag `html`.

A tag `body` inclui um atributo chamado `lang`, com um valor de `pt-br`.

Dentro da seção `body`, existem duas tags, `h1` e `p`. A indentação adequada melhora a legibilidade do código.

A primeira linha contém a tag `DOCTYPE`, única porque não possui uma tag de fechamento. Essa tag indica que o documento segue os padrões do HTML5.

### Anatomia de uma Tag HTML

Como mencionado anteriormente, uma tag pode ter atributos, cada um com valores correspondentes. A estrutura de uma tag é a seguinte:

```html
<elemento atributo1="valor1" atributo2="valor2">conteúdo interno</elemento>
```

Onde:
- `<elemento ...` abre a tag do elemento.
- `atributo1="valor1"` é um atributo da tag, representando características como cor, tamanho ou outras propriedades.
- conteúdo interno: esta área pode conter outras tags, valores (como texto ou números) ou nada.
- `</elemento>` fecha a tag.

### Tags de Auto-fechamento

A maioria das tags (exceto DOCTYPE) requer uma tag de fechamento, mas algumas podem ser autofechadas dentro da tag de abertura. Dois casos comuns incluem:

```html
<head>
  <link rel="stylesheet" href="styles.css" />
</head>
```

```html
<head>
  <img src="image.png" alt="descrição" />
</head>
```

Observe a barra diagonal `/` ao final da tag de abertura, indicando o autofechamento.

## Estrutura Básica e Seu Primeiro Código HTML5

Crie `index.html` e use o seguinte código:

```html
<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <!-- Arquivos externos (CSS, JS) e metadados -->
        <meta charset="utf-8" />
        <title>Título da Página</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
     </head>
     <body>
       <!-- Prefira class em vez de id para CSS; id é principalmente para JS -->
        <header class="cabeçalho" id="cabeçalho">
            Cabeçalho da Página
         </header>
         <nav class="navegação">
            Menu
         </nav>
         
         <main class="conteúdo">
            <!-- Apenas um por página/documento -->
            Conteúdo Principal
         </main>
         
         <footer class="rodapé">
         </footer>
     </body>
</html>
```

- `<!DOCTYPE html>`: indica que o documento será em formato HTML
- Elemento `html`: contém todos os elementos de um documento HTML.
- Elemento `head`: contém os elementos referentes as configurações da página (como título, descrição, etc.), arquivos externos vinculados na página (como JavaScript e CSS) e ícone da página.
- Elemento `body`: é o corpo do documento, onde está todo elemento disponível para o usuário. Só pode haver um por página.
- Elemento `header`: contém elementos, incluindo textos e imagens, que formam o cabeçalho da página. Costuma ser a parte superior visível da página. Só pode haver um por parte (um por `body`, um por `section`, um por `article`).
- Elemento `nav`: contém elementos para menu de navegação. Pode haver vários por página, por exemplo, um no `header` e um no `footer` ou um menu primário e um secundário.
- Elemento `main`: contém a parte principal da página. Só deve haver um `main` por página.
- Elemento `footer`: contém elementos, incluindo textos e imagens, que formam o rodapé da página, a parte inferior visível da página. Só pode haver um por parte (um por `body`, um por `section`, um por `article`).
- Atributo `class` em um elemento HTML: determina a classe do elemento, pense em classe como no mundo real, você faz parte da classe dos estudantes, por exemplo. Vamos aprender mais sobre isso num próximo texto.

### Comentários em HTML

Como evidente no código acima, o HTML permite a inclusão de comentários. A sintaxe é simples: comece com `<!--` e termine com `-->`. Por exemplo:

```html
<!-- Este é um comentário -->
```

## Vamos Além

Nos próximos artigos, você se aprofundará em tags de bloco, conceitos da web semântica (incluindo tags semânticas) e técnicas para identificar tags. Fique atento!