Entenda a estrutura inicial do HTML5
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 :)