Entenda a estrutura inicial do HTML5 · SrKim

O que é um HTML5?

De uma maneira bem simples e direta, podemos dizer que o HTML5 é o esqueleto de um site, a partir dele é formado a estrutura de como nosso site será apresentado.

HTML (Linguagem de Marcação de Hipertexto) é o código que você usa para estruturar uma página web e seu conteúdo. Por exemplo, o conteúdo pode ser estruturado em parágrafos, em uma lista com marcadores ou usando imagens e tabelas. Como o título sugere, este artigo fornecerá uma compreensão básica do HTML e suas funções. https://developer.mozilla.org/pt-BR/docs/Learn/Getting_started_with_the_web/HTML_basics

Como ficaria a estrutura básica inicial de um HTML5

<!DOCTYPE html>
<html>
  <head>
  
  </head>
  
  <body>
  
  </body>
  
</html>

O que significa cada item desses?

DOCTYPE: O "DOCTYPE" indica ao seu navegador, que tipo de arquivo você está escrevendo.
html: A tag "html", indica o início de nossa página. Quando definimos um atributo de linguagem a ela, facilitamos aos buscadores e aos leitores de tela a compreender qual a linguagem de seu site.
head: A tag "head", nos permite adicionar informações e recursos a nossa página. Exemplo: título, descrição, links de arquivos CSS e Javascript...
body: A tag "body", é onde ficam de fato o conteúdo e toda estrutura de layout do seu site, que serão apresentadas aos usuários.

Como seria um HTML com conteudo?

Abaixo segue um exemplo que peguei da https://www.w3docs.com/

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
      html,
      body {
        height: 100%;
      }
      body {
        display: flex;
        flex-wrap: wrap;
        margin: 0;
      }
      .header-menu,
      footer {
        display: flex;
        align-items: center;
        width: 100%;
      }
      .header-menu {
        justify-content: flex-end;
        height: 60px;
        background: #1c87c9;
        color: #fff;
      }
      h2 {
        margin: 0 0 8px;
      }
      ul li {
        display: inline-block;
        padding: 0 10px;
        list-style: none;
      }
      aside {
        flex: 0.4;
        height: 165px;
        padding-left: 15px;
        border-left: 1px solid #666;
      }
      section {
        flex: 1;
        padding-right: 15px;
      }
      footer {
        padding: 0 10px;
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <header class="header-menu">
      <nav>
        <ul>
          <li>Menu item</li>
          <li>Menu item</li>
          <li>Menu item</li>
        </ul>
      </nav>
    </header>
    <section>
      <article>
        <header>
          <h2>Learn HTML</h2>
          <small>Hyper Text Markup Language</small>
        </header>
        <p>Our free HTML tutorial for beginners will teach you HTML and how to create your website from the scratch. HTML isn't difficult, so hoping you will enjoy learning.</p>
      </article>
      <article>
        <header>
          <h2>Start Quiz "HTML Basic"</h2>
          <small>You can test your HTML skills with W3docs' Quiz.</small>
        </header>
        <p>You will get 5% for each correct answer for single choice questions. In multiple choice question it might be up to 5%. At the end of the Quiz, your total score will be displayed. Maximum score is 100%.</p>
      </article>
    </section>
    <aside>
      <h2>Our Books</h2>
      <p>HTML</p>
      <p>CSS</p>
      <p>JavaScript</p>
      <p>PHP</p>
    </aside>
    <footer>
      <small>Company © W3docs. All rights reserved.</small>
    </footer>
  </body>
</html>

Exemplo retirado de: https://www.w3docs.com/snippets/html/html5-page-structure.html

Muito obrigado por acompanhar! Até a próxima abraços :)