Desenvolvendo uma web page I: semântica

Veja como desenvolver uma web page semântica, responsiva e validada pela W3C - parte I

Ei, dev!

Suponhamos que você foi contratado e seu primeiro projeto é desenvolver uma web page baseada no layout acima.

Pede-se que esta web page respeite as seguintes condições:

Ser semântica;
Ser responsiva;
Ser validada pela World Wide Web Consortium (W3C)

E aí, pronto para o desafio?

A resolução

Esta resolução será dividida em três posts. O primeiro cuidará da Semântica. O segundo tratará da Responsividade, enquanto o último das Validações W3C da web page. Então, aproveite o conteúdo!

Quando falamos sobre "HTML Semântico" estamos nos referindo a possibilidade de dar significado a seções do conteúdo de um site, de tal modo, que isto, seja visível não apenas ao usuário via browser, mas à outros user-agents, como motores de busca e tecnologias assistidas. Conforme a W3C Brasil, entenda a expressão 'dar significado' como "indicar que tipo de informação cada parte de nossas páginas está exibindo." (W3C BRASIL, HTML 5: Curso W3C Escritório Brasil)

Para este fim, novas tags foram acrescentadas a partir da especificação 5 da linguagem HTML em uma parceria entre as organizações W3C e Web Hypertext Application Technology Working Group (WHATWG). Dentre estas, destacamos:

header: Representa o cabeçalho da página. É a parte superior do site, onde geralmente ficam o logo, banner ou mesmo a seção de navegação.
nav: Representa uma seção com links de navegação do site. Tem como filho(s) as tags de lista não-ordenada, o ul e li, além de âncoras, o a.
main: Representa a seção principal do site.
section: Representa uma seção de conteúdo genérico. Deve ter como filho(s) as tags h1 | h2 | h3 | h4 | h5 | h6 que indicarão o título/assunto da referida seção.
article: Representa uma seção de conteúdo independente, ou seja, que seja completa mesmo que removida de seu contexto original. Exemplos: artigos de notícias, posts de blog, textos de fóruns/comunidades, widgets, entre outros.
aside: Representa uma seção de conteúdos secundários, ou que não tenham relação direta com o conteúdo principal do site.
footer: Representa o rodapé da página. É a parte inferior do site, onde geralmente se encontram informações como termos de uso, política de privacidade, entre outros.

Nota: A tag article pode ser filha de section, e o inverso também é válido, desde que em seu site isto faça sentido!

Para o layout proposto, vamos dividí-lo visualmente nível a nível, propiciando assim, um melhor entendimento. Inicialmente dispomos as tags do seguinte modo:

Figura 1 - Tag body e suas filhas header, main e footer visualmente representadas.
Fonte: Autor (CC BY-NC-SA 4.0)

Com isto em mente, criamos a estrutura de arquivos e diretórios abaixo:

p8/
  assets/
    css/
      style.css
    image/
      banner.svg
      favicon.png
      valid-css-gold.png
      valid-html-gold.png
  index.html

As imagens estão disponíveis no repositório do projeto bastando clicarmos em Code, e em seguida em Download ZIP para realizar o download. Após isto descompactamos o arquivo e migramos as imagens deste para a nossa estrutura de diretórios.

Agora em nosso arquivo index.html, com um editor de texto, redijimos/copiamos a estrutura inicial da página, conforme:

<!DOCTYPE html>
<html>
    <head>
        <title>Web page semântica, responsiva e validada pela W3C</title>
        <meta charset="UTF-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <link href="assets/css/style.css" rel="stylesheet">
        <link href="assets/image/favicon.png" rel="icon" type="image/png">
    </head>
    <body></body>
</html>

Agora entre as tags body, incluímos as tags header, main e footer:

<header></header>
<main></main>
<footer></footer>

Seguimos dispondo as tags, agora em header:

Figura 2 - Tags div e nav, filhas de header, visualmente representadas.
Fonte: Autor (CC BY-NC-SA 4.0)

Deste modo, como filhas de header incluímos as tags div e nav:

<div></div>
<nav></nav>

Figura 3 - Tag img, filha de div, e tags filhas de nav visualmente representadas.
Fonte: Autor (CC BY-NC-SA 4.0)

Como filha de div, incluímos a tag img.

<img src="assets/image/banner.svg"

Já como filhas de nav incluímos:

<ul>
    <li>
        <a href="#">Home</a>
    </li>                    
    <li>
        <a href="#">Tutoriais</a>
    </li>
    <li>
        <a href="#">Artigos</a>
    </li>
    <li>
        <a href="#">Projetos</a>
    </li>                    
    <li>
        <a href="#">Downloads</a>
    </li>
    <li>
        <a href="#">Comunidade</a>
    </li>
    <li>
        <a href="#">Sobre</a>
    </li>
    <li>
        <a href="#">Contato</a>
    </li>                  
</ul>

Como filhas de main, incluímos as sections e o aside:

Figura 4 - Tags section e aside, filhas de main, visualmente representadas.
Fonte: Autor (CC BY-NC-SA 4.0)

<section></section>
<section></section>
<section></section>
<aside></aside>

Na primeira section incluímos o título da seção, bem como seu article-filho:

Figura 5 - Tags h1 e article, filhas de section, visualmente representadas.
Fonte: Autor (CC BY-NC-SA 4.0)

<h1>DESTAQUES</h1>
<article></article>

Seguidamente, incluímos as tags filhas de article:

Figura 6 - Tags h2, p e div button, filhas de article, visualmente representadas.
Fonte: Autor (CC BY-NC-SA 4.0)

<h2>Semântica, Responsividade e Validação W3C</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<div>
    <button onclick="window.open('#','_top')">LEIA MAIS</button>
</div>

Na segunda section incluímos:

Figura 7 - Tags h2, article e section, filhas de section, visualmente representadas.
Fonte: Autor (CC BY-NC-SA 4.0)

<h2>SOA</h2>
<article></article>
<section></section>

Seguidamente, incluímos as tags filhas de article:

Figura 8 - Tags h3, p e div button, filhas de article, visualmente representadas.
Fonte: Autor (CC BY-NC-SA 4.0)

<h3>Consumindo a PokéAPI v2</h3>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<div>
    <button onclick="window.open('#','_top')">LEIA MAIS</button>
</div>

E as filhas de section:

Figura 9 - Tags h3 e ul li a, filhas de section, visualmente representadas.
Fonte: Autor (CC BY-NC-SA 4.0)

<h3>MAIS ARTIGOS</h3>
<ul>
    <li>
        <a href="#">Lorem Ipsum Lorem Ipsum</a>
    </li>
    <li>
        <a href="#">Lorem Ipsum Lorem Ipsum</a>
    </li>
    <li>
        <a href="#">Lorem Ipsum Lorem Ipsum</a>
    </li>
    <li>
        <a href="#">Lorem Ipsum Lorem Ipsum</a>
    </li>
</ul>

Na terceira section, procedemos similarmente à segunda section, incluindo as tags filhas h2, article e section:

Figura 10 - Tags h2, article e section, filhas de section, visualmente representadas.
Fonte: Autor (CC BY-NC-SA 4.0)

<h2>JAVA</h2>
<article></article>
<section></section>

Incluindo as tags filhas de article:

Figura 11 - Tags h3, p e div button, filhas de article, visualmente representadas.
Fonte: Autor (CC BY-NC-SA 4.0)

<h3>Calculadora com Java Swing e exp4j</h3>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<div>
    <button onclick="window.open('#','_top')">LEIA MAIS</button>
</div>

E de section:

Figura 12 - Tags h3 e ul li a, filhas de section, visualmente representadas.
Fonte: Autor (CC BY-NC-SA 4.0)

<h3>MAIS ARTIGOS</h3>
<ul>
    <li>
        <a href="#">Lorem Ipsum Lorem Ipsum</a>
    </li>
    <li>
        <a href="#">Lorem Ipsum Lorem Ipsum</a>
    </li>
    <li>
        <a href="#">Lorem Ipsum Lorem Ipsum</a>
    </li>
    <li>
        <a href="#">Lorem Ipsum Lorem Ipsum</a>
    </li>
</ul>

Agora, em aside incluímos:

Figura 13 - Tags section e div, filhas de aside, visualmente representadas.
Fonte: Autor (CC BY-NC-SA 4.0)

<section></section>
<div></div>
<div></div>
<div></div>
<div></div>

Já em section:

Figura 14 - Tags h2 e ul li a, filhas de section, visualmente representadas.
Fonte: Autor (CC BY-NC-SA 4.0)

<h2>MAIS LIDOS</h2>                    
<ul>
    <li>
        <a href="#">Lorem Ipsum Lorem Ipsum</a>
    </li>
    <li>
        <a href="#">Lorem Ipsum Lorem Ipsum</a>
    </li>
    <li>
        <a href="#">Lorem Ipsum Lorem Ipsum</a>
    </li>
    <li>
        <a href="#">Lorem Ipsum Lorem Ipsum</a>
    </li>
    <li>
        <a href="#">Lorem Ipsum Lorem Ipsum</a>
    </li>
    <li>
        <a href="#">Lorem Ipsum Lorem Ipsum</a>
    </li>
    <li>
        <a href="#">Lorem Ipsum Lorem Ipsum</a>
    </li>
    <li>
        <a href="#">Lorem Ipsum Lorem Ipsum</a>
    </li>
</ul>

Por fim, em footer adicionamos os dados do autor, data, tecnologias e versão da página, conforme:

Figura 15 - Tag div e tags div a img, filhas de aside, visualmente representadas.
Fonte: Autor (CC BY-NC-SA 4.0)

<div>
    <strong>@author:</strong> Fábio Fernandes<br>
    <strong>@since:</strong> Julho de 2022<br>
    <strong>@technologies:</strong> HTML 5, CSS 3, Bootstrap 5.1.3 e Font Awesome 6.1.1<br>
    <strong>@version:</strong> 1.0
</div>
<div>
    <a href="#" target="_blank">
        <img src="assets/image/valid-html-gold.png">
    </a><br>    
    <a href="#" target="_blank">
        <img src="assets/image/valid-css-gold.png">
    </a>
</div>

Se correu tudo bem até aqui, nosso arquivo HTML aberto em um navegador, deverá se parecer com:

Figura 16 - Página HTML construída com tags semânticas.
Fonte: Autor (CC BY-NC-SA 4.0)

Agora, vamos estilizar a página criada, tornando-a visualmente agradável! Para tal, abrimos o arquivo style.css em nosso editor de texto e incluímos os códigos abaixo, atentando-nos ao que faz cada instrução, dada a sintaxe CSS:

seletor {
    propriedade: valor;
}

Nota: Os trechos entre /* */ não são necessários para a estilização dos elementos, já que representam blocos de comentários e são ignorados na renderização da página. Estes, no entanto, podem nos auxiliar na memorização e/ou mesmo na legibilidade do nosso código. Assim, fiquem à vontade em usá-los ou não!

Bom, iniciamos com a configuração da tag body:

/* Seleciona a tag body */
body {
    margin: 0; /* Remove a margem (4 lados) */
    padding: 20px; /* Define o padding (4 lados) com 20px */
}

Agora abrimos o arquivo index.html no navegador Chrome, e em seguida abrimos o DevTools, clicando sobre a página com o botão inverso (direito) do mouse e selecionando Inspecionar. Também podemos abrir o Chrome DevTools pressionando a combinação de teclas Control + Shift + C (Windows, Linux, Chrome OS) ou Command + Option + C (macOS).

Clicamos seguidamente em Elements, <body><body> (que é a tag que queremos analisar) e Computed, aproximando após isso o cursor do mouse do quadro padding e obtemos o resultado abaixo, o que confirma a aplicação do estilo:

Figura 17 - Aplicação de estilo na tag body, visualmente representada.
Fonte: Autor (CC BY-NC-SA 4.0)

Seguimos com o bloco de tags do header:

/* Seleciona (todas) as tags div, que estão contidas na tag header */
header div {
    background-color: #FFFFD9; /* Define a cor de fundo */
    padding: 30px; /* Define o padding (4 lados) com 30px */
}

/* Seleciona (todas) as tags img, que estão contidas em tags div,
que por sua vez está contida na tag header */
header div img {
    /* A combinação das propriedades abaixo, centraliza a imagem */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Figura 18 - Aplicação de estilo na tags div e img, visualmente representada.
Fonte: Autor (CC BY-NC-SA 4.0)

/* Seleciona (todas) as tags nav */
nav {
    background-color: #302A2D; /* Define a cor de fundo */
    padding: 20px; /* Define o padding (4 lados) com 20px */
}

/* Seleciona (todas) as tag ul, que estão contidas em tags nav */
nav ul {
    list-style-type: none; /* Remove o estilo default de uma ul */
    margin-bottom: 0; /* Remove a margem inferior */
    margin-top: 0; /* Remove a margem superior */
    padding-left: 0; /* Remove o padding esquerdo */
    text-align: center; /* Alinha o texto no centro */
}

/* Seleciona (todas) as tags li, que estão contidas em tags ul, 
que por sua vez estão contidas em tags nav */
nav ul li {
    display: inline; /* Coloca as li's lado-a-lado */
    /* Define os padding's esquerdo e direito com 10px */
    padding-left: 10px; 
    padding-right: 10px;
}

/* Seleciona (todas) as tags a, que estão contidas em tags li, 
que por sua vez estão contidas em tags ul, que por sua vez 
estão contidas em tags nav */
nav ul li a {
    color: #FFF; /* Define a cor da fonte */    
}

/* Seleciona (todas) as tags a */
a {
    text-decoration: none; /* Remove o sublinhado (padrão) da âncora */
}

/* Seleciona (todas) as tags a
A pseudo-classe :hover indica que a seleção se dará no hover, isto
é, quando o cursor do mouse passar sobre a(s) tag(s) */ 
a:hover {
    font-weight: bold; /* Formata o texto em negrito */
}

Figura 19 - Aplicação de estilo na tags nav, ul, li e a, visualmente representada.
Fonte: Autor (CC BY-NC-SA 4.0)

Prosseguimos com os estilos, testando via DevTools cada modificação que realizamos. Agora do bloco main:

/* Seleciona a tag main */
main {
    margin-top: 20px; /* Define a margem superior em 20px */
}

/* Seleciona a tag h1 */
h1 {
    background-color: #302A2D; /* Define a cor de fundo */
    color: #FFF; /* Define a cor da fonte */
    font-weight: bold; /* Formata o texto em negrito */
    /* Remove as margens inferior e superior */
    margin-bottom: 0; 
    margin-top: 0;
    padding: 20px; /* Define o padding (4 lados) com 20px */
}

/* Seleciona (todas) as tags article */
article {
    background-color: #FFFFD9; /* Define a cor de fundo */
    padding: 20px; /* Define o padding (4 lados) com 20px */
}

/* Seleciona (todas) as tags h2 */
h2 {
    color: #302A2D; /* Define a cor da fonte */
    /* Remove as margens inferior e superior */
    margin-bottom: 0; 
    margin-top: 0;
}

/* Seleciona (todas) as tags div, contidas em tags article */
article div {
    padding-bottom: 34px; /* Define o padding inferior 
    com 34px (altura do button) */
}

/* Seleciona (todas) as tags p */
p {
    color: #302A2D; /* Define a cor da fonte */
    /* Define as margens inferior e superior com 20px */     
    margin-bottom: 20px;
    margin-top: 20px;    
}

/* Seleciona (todas) as tags button */
button {
    background-color: #DF1400; /* Define a cor de fundo */
    border: 0; /* Remove a borda (4 lados) */
    color: #FFF; /* Define a cor da fonte */
    cursor: pointer; /* Define o cursor do mouse 
    (indicado para links) */
    float: right; /* "Flutua" o botão para a direita */
    font-size: 12px; /* Define o tamanho da fonte */
    padding: 10px; /* Define o padding (4 lados) com 10px */
}

/* Seleciona (todas) as tags button no hover */
button:hover { 
    background-color: #CC0000; /* Define a cor de fundo */
    font-weight: bold; /* Formata o texto em negrito */
}

/* Seleciona a segunda tag section, que está contida na tag main */
main section:nth-child(2) {
    padding-top: 20px; /* Define o padding superior em 20px */
}

/* Seleciona (todas) as tags h2 (imediatamente) contidas 
em tags section */
section > h2 {
    background-color: #302A2D; /* Define a cor de fundo */
    color: #FFF; /* Define a cor da fonte */
    font-weight: bold; /* Formata o texto em negrito */
    padding: 20px; /* Define o padding (4 lados) com 20px */
}

/* Seleciona (todas) as tags section, que estão contidas 
em tags section */
section section {
    background-color: #FFFFD9; /* Define a cor de fundo */
    padding: 0 20px 20px 20px; /* Remove o padding superior e 
    define os padding's direito, inferior e esquerdo com 20px */
}

/* Seleciona (todas) as tags h3 */
h3 {
    /* Remove as margens inferior e superior */     
    margin-bottom: 0;
    margin-top: 0; 
}

/* Seleciona (todas) as tags h3, que estão contidas 
em tags section, que por sua vez estão contidas em tags section */
section section h3 {
    background-color: #302A2D; /* Define a cor de fundo */
    color: #FFF; /* Define a cor da fonte */
    font-weight: bold; /* Formata o texto em negrito */
    padding: 20px; /* Define o padding (4 lados) com 20px */
    text-align: center; /* Alinha o texto no centro */
}

/* Seleciona (todas) as tags ul, contidas em tags section */
section ul {
    /* Remove as margens inferior e superior */     
    margin-bottom: 0;
    margin-top: 0;
    padding: 20px 20px 0 40px; /* Remove o padding inferior 
    e define os padding's superior, direito e esquerdo com 20px */
}

/* Seleciona a primeira, segunda e terceira tag li, 
que está contida em uma tag ul, que está contida em tag section */
section ul li:first-child,
section ul li:nth-child(2),
section ul li:nth-child(3) {
    margin-bottom: 5px; /* Define a margem inferior com 5px */
}

/* Seleciona (todas) as tags a, contidas em tags li, 
que por sua vez contidas em tag ul, que contidas estão
em tags section */
section ul li a {
    color: #302A2D; /* Define a cor da fonte */
}

/* Seleciona a terceira tag section, que está (imediatamente) 
contida na tag main */
main > section:nth-child(3) {
    padding-top: 20px; /* Define o padding superior em 20px */
}

/* Seleciona a tag aside */
aside {
    padding-top: 20px; /* Define o padding superior em 20px */
}

/* Seleciona a tag section, que está contida na tag aside */
aside section {
    background-color: #FFFFD9; /* Define a cor de fundo */
    padding: 20px; /* Define o padding (4 lados) com 20px */
}

/* Seleciona a tag h3, que está contida na tag section, 
que por sua vez, está contida na tag aside */
aside section h2 {
    background-color: #302A2D; /* Define a cor de fundo */
    color: #FFF; /* Define a cor da fonte */
    font-weight: bold; /* Formata o texto em negrito */
    padding: 20px; /* Define o padding (4 lados) com 20px */
}

/* Seleciona a quarta, quinta, sexta e sétima tag li, que está 
contida em uma tag ul, que está contida em uma tag section, 
que por sua vez está em uma tag aside */
aside section ul li:nth-child(4),
aside section ul li:nth-child(5),
aside section ul li:nth-child(6),
aside section ul li:nth-child(7) {
    margin-bottom: 5px; /* Define a margem inferior com 5px */
}

E por fim, do bloco footer:

/* Seleciona a tag footer */
footer {
    background-color: #302A2D; /* Define a cor de fundo */
    color: #FFF; /* Define a cor da fonte */
    margin-top: 20px; /* Define a margem superior com 20px */
    padding: 20px; /* Define o padding (4 lados) com 20px */
}

/* Seleciona a primeira tag div, contida na tag footer */
footer div:first-child {
    font-size: 12px; /* Define o tamanho da fonte */
}

/* Seleciona a segunda tag div, contida na tag footer */
footer div:nth-child(2) {
    text-align: right; /* Alinha o texto no centro */
}

/* Seleciona a tag img, contida em uma tag a, 
que por sua vez, está contida na segunda div, contida na tag footer */
footer div:nth-child(2) a img {
    vertical-align: 1px; /* Alinha a imagem verticalmente em 1px */
}

Com isto feito, nossa página ficou com a seguinte aparência:

Figura 20 - Página HTML estilizada com CSS.
Fonte: Autor (CC BY-NC-SA 4.0)

Bom, assim concluímos a primeira parte desta incrível série! Fiquem atentos que em breve nosso segundo post estará disponível! Se gostaram, por favor, deixem seus COMENTÁRIOS, nos SIGAM e principalmente COMPARTILHEM para que assim, seja possível alcançar mais pessoas, que como vocês, curtem Programação, com conteúdos PRÁTICOS e GRATUITOS!

Para ver e/ou baixar o código-fonte desta resolução, ou mesmo melhorá-lo, visitem o repositório no GitHub.

Até a próxima!

Cite este material

FERNANDES, Fábio. Desenvolvendo uma web page I: semântica. aprendaCodar, 12 de julho de 2022. Disponível em: <https://aprendacodar.blogspot.com/2022/07/veja-como-desenvolver-uma-web-page.html>. Acesso em:

Desenvolvendo uma web page I: semântica

A resolução

Cite este material

যোগাযোগ ফর্ম