Anatomia Documento

Estaremos vendo nesta aula sobre a Anatomia do documento HTML e como ver o nosso HTML, além do preview.

Se abrirmos o documento .html pelo navegador estaremos vendo a nossa página e se clicarmos em ver o código fonte dela, estaremos vendo o HTML que escrevemos no VSCode.

Agora na parte de anatomia de um documento HTML, temos este exemplo.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Anatomia do Documento</title>
    </head>

    <body>
        <h1>Título</h1>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis saepe similique perferendis mollitia a assumenda doloribus omnis, quidem tempore accusamus repudiandae. Accusamus, rem dolorum ad repellendus distinctio blanditiis praesentium nulla?
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis saepe similique perferendis mollitia a assumenda doloribus omnis, quidem tempore accusamus repudiandae. Accusamus, rem dolorum ad repellendus distinctio blanditiis praesentium nulla?
        </p>
    </body>
</html>

O padrão seria esta forma.

<!DOCTYPE html> — diz ao navegador que estamos a trabalhar com HTML 5. <html></html> — o próprio HTML, elemento raiz, o inicio da cadeia. <head></head> — contém configurações importantes para página, mas não ainda o que o usuário vai ver.

<meta> — onde vai representar vários tipos de metadados da página.

<title></title> — título da página. <body></body> — onde haverá conteúdo visual da página.

Se quiser facilitar tudo digitando ! o emmet irá completar automaticamente.

Links úteis

Discord

O grupo é um dos pilares do nosso método e impulsiona tanto o desenvolvimento de habilidades técnicas e comportamentais, quanto a carreira através de conexões profissionais.

Plataforma

Nossa plataforma de aprendizado contínuo reúne todos os nossos programas completos e é a casa dos eventos gratuitos da Rocketseat.