close

Introdução à estrutura HTML: elementos básicos e sintaxe

A estrutura HTML desempenha um papel crucial na construção de páginas da web. Ele define como o conteúdo é organizado e exibido em uma página da web. Aqui está uma introdução à estrutura básica do HTML:

1. Doctype

O Doctype(Declaração de tipo de documento) define a versão HTML que a página da Web está usando. Deve ser colocado no início do arquivo HTML.

2. tag html

A tag html é o elemento raiz de todo arquivo HTML. Ele encapsula todo o conteúdo da página da web.

3. head etiqueta

A tag head contém informações sobre a página da web que não são exibidas diretamente no navegador. É aqui que o título da página, meta tags, links para arquivos CSS e JavaScript e vários outros elementos são definidos.

4. body etiqueta

A tag body contém todo o conteúdo exibido na página da web. É aqui que elementos como texto, imagens, vídeos, links e outros componentes da interface do usuário são definidos.

5. Tags aninhadas

O HTML usa uma estrutura hierárquica com tags de abertura e fechamento. As tags filhas são colocadas dentro das tags pai. Por exemplo, a tag p(parágrafo) pode conter tags span(texto embutido), tags fortes(texto em negrito) e muitas outras tags.

6. Etiquetas comuns

O HTML fornece uma variedade de tags para formatação e exibição de conteúdo. Por exemplo, as tags h1-h6(títulos), tag p(parágrafo), tag img(imagem), tag a(link) e muitas outras.

 

Aqui está um exemplo de uma estrutura de página HTML completa:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>My Webpage</title>  
    <link rel="stylesheet" href="styles.css">  
    <script src="script.js"></script>  
</head>  
<body>  
    <header>  
        <h1>Welcome to My Webpage</h1>  
        <nav>  
            <ul>  
                <li><a href="#">Home</a></li>  
                <li><a href="#">About</a></li>  
                <li><a href="#">Contact</a></li>  
            </ul>  
        </nav>  
    </header>  
    <main>  
        <section>  
            <h2>About Me</h2>  
            <p>I am a web developer passionate about creating amazing websites.</p>  
        </section>  
        <section>  
            <h2>My Projects</h2>  
            <ul>  
                <li><a href="#">Project 1</a></li>  
                <li><a href="#">Project 2</a></li>  
                <li><a href="#">Project 3</a></li>  
            </ul>  
        </section>  
    </main>  
    <footer>  
        <p>&copy; 2022 My Webpage. All rights reserved.</p>  
    </footer>  
</body>  
</html>

No exemplo acima, temos uma página HTML completa com os elementos principais como doctype, html tag, head tag e body tag. Na seção head, definimos o título da página, os arquivos CSS e JavaScript a serem usados. A seção do corpo contém elementos como cabeçalho, principal e rodapé para exibir o conteúdo da página da web.

 

Usando a estrutura HTML correta, você pode criar páginas da Web bem organizadas, legíveis e interativas.