Como estruturar um novo documento HTML

HTML (HyperText Markup Language) é a espinha dorsal do conteúdo da web, fornecendo estrutura para as informações exibidas nos sites. Todo documento HTML segue uma estrutura básica que inclui elementos essenciais. Vamos nos aprofundar nos principais componentes.

1. '<!DOCTYPE html>'

Esta declaração define o tipo de documento e a versão do HTML que está sendo usado. Para páginas da web modernas, é comum usar '<!DOCTYPE html>'.

2. '<html>'

O elemento raiz encapsula todo o documento HTML.

3. '<head>'

A seção head contém metainformações sobre o documento, como título, conjunto de caracteres e folhas de estilo vinculadas.

4. '<title>'

Este elemento define o título do documento HTML, que aparece na aba ou janela do navegador.

5. '<body>'

O elemento body contém o conteúdo do documento HTML, incluindo texto, imagens, links e muito mais.

Exemplo de documento HTML

Agora, vamos juntar tudo em um exemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My HTML Document</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple example of an HTML document.</p>
    <img src="example.jpg" alt="An example image">
    <a href="https://www.example.com">Visit Example.com</a>
</body>
</html>

Neste exemplo, substitua "My HTML Document" pelo título desejado e ajuste o conteúdo de '<body>' de acordo. A compreensão dessa estrutura básica estabelece a base para a criação de páginas da web bem organizadas e semanticamente significativas.

Bônus: tags de fechamento

Ao compor uma página HTML é importante garantir que todas as tags estejam devidamente fechadas, para evitar problemas de fluxo e renderização da página. Para ajudar nesta tarefa, verifique nossa HTML Unclosed Tag Checker Tool para detectar problemas estruturais em seu código HTML.

html documento head body meta title div p img a h1 lang charset viewport