DEV Community: Arthur Nascimento Assunção

HTML5 - Principais insights sobre tabelas

Arthur Nascimento Assunção — Mon, 25 Sep 2023 19:11:22 +0000

Neste artigo, aprenderemos sobre tabelas em HTML.

As tabelas desempenham um papel crucial na apresentação eficaz de dados tabulares estruturados, nos quais as informações são logicamente organizadas em linhas e colunas. No entanto, é imperativo enfatizar que as tabelas nunca devem ser usadas para ditar o layout ou a estrutura de uma página da web. O design web moderno depende de técnicas mais versáteis e responsivas, como CSS grid, flexbox e elementos HTML semânticos. Esses métodos permitem a criação de layouts de página visualmente atraentes e adaptáveis, garantindo uma experiência do usuário perfeita. Utilizar tabelas para fins de layout pode introduzir problemas relacionados à acessibilidade, responsividade e manutenção de designs web. Portanto, embora as tabelas se destaquem na organização de dados, elas não são adequadas para definir a estrutura mais ampla de uma página da web.

Lembre-se de que uma tabela se parece com esta:

Filme	Avaliação IMDB
Interstellar	8.4
O Grande Truque	8.5
Efeito Borboleta	7.6

Observe que temos um cabeçalho de tabela e três linhas (linhas), cada linha com duas células.

Em HTML, temos:

um elemento para a tabela, chamado table;
um elemento para o cabeçalho da tabela, o grupo de células que formam o cabeçalho, chamado thead;
um elemento para a célula do cabeçalho da tabela, chamado th;
um elemento para o corpo da tabela, o grupo de linhas e células que formam o corpo da tabela, chamado tbody;
um elemento para o rodapé da tabela, o grupo de células que formam o rodapé, chamado tfoot. Este elemento é totalmente opcional.
um elemento para cada linha, chamado tr;
um elemento para célula (dados da tabela), chamado td;

Veja o código abaixo:

<table>
    <tr>
        <td>Filme</td>
        <td>Avaliação IMDB</td>
    </tr>
    <tr>
        <td>Interstellar</td>
        <td>8.4</td>
    </tr>
    <tr>
        <td>O Grande Truque</td>
        <td>8.5</td>
    </tr>
    <tr>
        <td>Efeito Borboleta</td>
        <td>7.6</td>
    </tr>
</table>

Este código se parece com isto:

Cabeçalho da Tabela

A primeira linha não parece um cabeçalho de tabela, você concorda?

Para corrigir isso, precisamos usar os elementos thead e th, como neste novo exemplo:

<table>
    <thead>
        <th>Filme</th>
        <th>Avaliação IMDB</th>
    </thead>
    <tbody>
        <tr>
            <td>Interstellar</td>
            <td>8.4</td>
        </tr>
        <tr>
            <td>O Grande Truque</td>
            <td>8.5</td>
        </tr>
        <tr>
            <td>Efeito Borboleta</td>
            <td>7.6</td>
        </tr>
    </tbody>
</table>

Este código se parece com isso:

Borda da Tabela

Observe que não há uma borda; para adicionar uma borda, usamos um atributo chamado border ou, se você desejar fazer a coisa certa, use CSS.

<table border="1">
    <thead>
        <th>Filme</th>
        <th>Avaliação IMDB</th>
    </thead>
    <tbody>
        <tr>
            <td>Interstellar</td>
            <td>8.4</td>
        </tr>
        <tr>
            <td>O Grande Truque</td>
            <td>8.5</td>
        </tr>
        <tr>
            <td>Efeito Borboleta</td>
            <td>7.6</td>
        </tr>
    </tbody>
</table>

Este código se parece com isso:

Estilizando Tabelas

Agora temos bordas, mas a borda parece ruim. Para uma boa aparência, podemos usar os atributos cellspacing e cellpadding. Cellspacing controla o espaço entre a célula e o restante da tabela, e cellpadding controla o espaço entre os dados da célula e a borda da célula.

<table border="1" cellspacing="0" cellpadding="8">
    <thead>
        <th>Filme</th>
        <th>Avaliação IMDB</th>
    </thead>
    <tbody>
        <tr>
            <td>Interstellar</td>
            <td>8.4</td>
        </tr>
        <tr>
            <td>O Grande Truque</td>
            <td>8.5</td>
        </tr>
        <tr>
            <td>Efeito Borboleta</td>
            <td>7.6</td>
        </tr>
    </tbody>
</table>

Agora, a tabela se parece com isso, muito melhor, você sabe?:

Lembre-se: a estilização é feita com CSS.

Mesclando Células da Tabela

Às vezes, precisamos mesclar células em uma tabela, como fazemos no Excel (ou em outro editor de planilha). Portanto, se você precisar mesclar células, pode usar colspan ou rowspan para isso. Veja o exemplo abaixo. Observe que adiciono o atributo colspan no elemento th, mas é possível adicionar colspan no elemento td, porque colspan é adicionado no elemento da célula e mescla as células horizontalmente, lado a lado. Portanto, a primeira e a segunda célula do cabeçalho são combinadas como uma única célula.

<table border="1" cellspacing="0" cellpadding="8">
    <thead>
        <th colspan="2">Informações do Filme</th>
        <th>Avaliação IMDB</th>
    </thead>
    <tbody>
        <tr>
            <td>Interstellar</td>
            <td>Ficção Científica</td>
            <td>8.4</td>
        </tr>
        <tr>
            <td>O Grande Truque</td>
            <td>Drama</td>
            <td>8.5</td>
        </tr>
        <tr>
            <td>Efeito Borboleta</td>
            <td>Ficção Científica</td>
            <td>7.6</td>
        </tr>
    </tbody>
</table>

Este código se parece com a imagem abaixo.

Como mencionado, também é possível mesclar células verticalmente com o atributo rowspan.

Cabeçalho de Coluna e Linha da Tabela

Até aqui, tínhamos apenas um cabeçalho na primeira linha, mas é possível ter um cabeçalho na primeira coluna usando a célula th. Veja o exemplo abaixo:

<table border="1" cellspacing="0" cellpadding="8">
    <thead>
        <th>Filme</th>
        <th>Gênero</th>
        <th>Avaliação IMDB</th>
    </thead>
    <tbody>
        <tr>
            <td>Interstellar</td>
            <td>Ficção Científica</td>
            <td>8.4</td>
        </tr>
        <tr>
            <td>O Grande Truque</td>
            <td>Drama</td>
            <td>8.5</td>
        </tr>
        <tr>
            <td>Efeito Borboleta</td>
            <td>Ficção Científica</td>
            <td>7.6</td>
        </tr>
    </tbody>
</table>

Este exemplo se parece com isto:

Outras Considerações Sobre Tabelas

Existem os elementos colgroup e col, mas eu não recomendo usá-los, pois eles são para estilização, e como sabemos, a estilização é feita com CSS. É mais comum estilizar tabelas com CSS em vez de usar colgroup.

Tabelas com div e span

Sim, você leu corretamente. É possível criar tabelas usando divs ou outros elementos de bloco, mas a div se comportará como uma tabela para acessibilidade, embora com menos semântica. Nesse caso, é essencial organizar o layout da tabela com CSS.

Para isso, você deve usar o atributo role e Aria Role

Veja o exemplo abaixo:

<div role="table" aria-label="Informações do Filme">
    <div role="rowgroup">
        <div role="row">
            <span role="columnheader" aria-colspan="2">Informações do Filme</div>
            <span role="columnheader">Avaliação IMDB</div>
        </div>
    </div>
    <div role="rowgroup">
        <div role="row">
            <span role="cell">Interstellar</span>
            <span role="cell">Ficção Científica</span>
            <span role="cell">8.4</span>
        </div>
        <div role="row">
            <span role="cell">O Grande Truque</span>
            <span role="cell">Drama</span>
            <span role="cell">8.5</span>
        </div>
        <div role="row">
            <span role="cell">Efeito Borboleta</span>
            <span role="cell">Ficção Científica</span>
            <span role="cell">7.6</span>
        </div>
    </div>
</div>

Esse código será renderizado assim:

Observe que usamos div e span com o atributo role e seus valores:

table: para toda a tabela;
rowgroup: para o grupo de linhas, grupo de linhas de cabeçalho ou grupo de linhas de dados;
columnheader: para o cabeçalho da coluna;
row: para linhas;
cell: para células;

Em detalhes:

<div role="table" aria-label="Informações do Filme"> representa a tabela inteira com o atributo aria-label para acessibilidade.
<div role="rowgroup"> agrupa as linhas, semelhante aos elementos thead e tbody.
<div role="row"> representa cada linha.
<div role="columnheader" aria-colspan="2"> representa o cabeçalho da tabela com aria-colspan indicando o colspan de 2.
<div role="cell"> representa os dados da tabela.

Quando usar essa forma?

Ambas as formas, elemento table ou atributo role, funcionam quase igualmente, principalmente quando precisamos usar CSS para melhorar o layout e a aparência da tabela. No entanto, o elemento table é mais semântico, portanto, você deve preferir tabelas. Além disso, é melhor criar uma tabela com o atributo role para maior acessibilidade.

Lembre-se, o atributo de função é essencial para acessibilidade.

O Que Vem Pela Frente

Nos próximos artigos, você mergulhará nos formulários em HTML. Fique ligado!

Referências

Mozilla Developer Network. HTML tables - Learn web development | MDN (Acessado em 25/09/2023)
Stack Overflow. HTML tables vs. - Stack Overflow (Acessado em 25/09/2023)

HTML5 - Key Insights into Tables

Arthur Nascimento Assunção — Mon, 25 Sep 2023 19:11:13 +0000

In this article, we will learn about tables in HTML.

Tables serve a crucial role in effectively presenting structured tabular data, where information is logically organized into rows and columns. However, it's imperative to emphasize that tables should never be employed to dictate the layout or structure of a webpage. Modern web design relies on more versatile and responsive techniques, such as CSS grid, flexbox, and semantic HTML elements. These methods enable the creation of visually appealing and adaptable page layouts, ensuring a seamless user experience. Utilizing tables for layout purposes can introduce issues related to accessibility, responsiveness, and the maintainability of web designs. Therefore, while tables excel at organizing data, they are not suited for defining the broader structure of a web page.

Remember that a table is like this one:

Movie	IMDB Rating
Interstellar	8.4
The Prestige	8.5
The Butterfly Effect	7.6

Notice that we have a table header and three lines (rows), each row has two cells.

In HTML we have:

an element to table, called table;
an element to table header, the group of cells that form the head, called thead;
an element to table header cell, called th;
an element to table body, the group of rows and cells that form the body of the table, called tbody;
an element to table footer, the group of cells that form the footer, called tfoot. This element is absolutely optional.
an element to each row, called tr;
an element to cell (table data), called td;

See the below code:

<table>
    <tr>
        <td>Movie</td>
        <td>IMDB Rating</td>
    </tr>
    <tr>
        <td>Interstellar</td>
        <td>8.4</td>
    </tr>
    <tr>
        <td>The Prestige</td>
        <td>8.5</td>
    </tr>
    <tr>
        <td>The Butterfly Effect</td>
        <td>7.6</td>
    </tr>
</table>

This code looks like this:

Table Header

The first line doesn't appear like a table head, do you agree?

To fix this, we need to use thead and th elements, like this new example:

<table>
    <thead>
        <th>Movie</th>
        <th>IMDB Rating</th>
    </thead>
    <tbody>
        <tr>
            <td>Interstellar</td>
            <td>8.4</td>
        </tr>
        <tr>
            <td>The Prestige</td>
            <td>8.5</td>
        </tr>
        <tr>
            <td>The Butterfly Effect</td>
            <td>7.6</td>
        </tr>
    </tbody>
</table>

Notice that we also add the tbody element. This code looks like this:

Table Border

Notice that there isn't a border; to add a border, we use an attribute called border or, if you desire to do the right thing, use CSS.

<table border="1">
    <thead>
        <th>Movie</th>
        <th>IMDB Rating</th>
    </thead>
    <tbody>
        <tr>
            <td>Interstellar</td>
            <td>8.4</td>
        </tr>
        <tr>
            <td>The Prestige</td>
            <td>8.5</td>
        </tr>
        <tr>
            <td>The Butterfly Effect</td>
            <td>7.6</td>
        </tr>
    </tbody>
</table>

This code looks like this:

Styling Tables

Now we have borders, but the border looks bad. For a good look, we can use cellspacing and cellpadding attributes. Cellspacing controls the space between the cell and the rest of the table, and cellpadding controls the space between the cell data and cell border.

<table border="1" cellspacing="0" cellpadding="8">
    <thead>
        <th>Movie</th>
        <th>IMDB Rating</th>
    </thead>
    <tbody>
        <tr>
            <td>Interstellar</td>
            <td>8.4</td>
        </tr>
        <tr>
            <td>The Prestige</td>
            <td>8.5</td>
        </tr>
        <tr>
            <td>The Butterfly Effect</td>
            <td>7.6</td>
        </tr>
    </tbody>
</table>

Now, the table looks like this, much better, do you know?:

Remember: styling is made with CSS.

Table Cell Merging

Sometimes, we need to merge cells in a table, like we do in Excel (or another Spreadsheet editor). So, if you need to merge cells, you can use colspan or rowspan for this. See the below example. Notice that I add colspan attribute in th element, but it's possible to add colspan in td element, because colspan is added in cell element and merges cells horizontally, cell next to each other. So, the first and second header cell are combined as one unique cell.

<table border="1" cellspacing="0" cellpadding="8">
    <thead>
        <th colspan="2">Movie Info</th>
        <th>IMDB Rating</th>
    </thead>
    <tbody>
        <tr>
            <td>Interstellar</td>
            <td>Sci-fi</td>
            <td>8.4</td>
        </tr>
        <tr>
            <td>The Prestige</td>
            <td>Drama</td>
            <td>8.5</td>
        </tr>
        <tr>
            <td>The Butterfly Effect</td>
            <td>Sci-fi</td>
            <td>7.6</td>
        </tr>
    </tbody>
</table>

This code looks like the below image.

As I mentioned, it's possible to merge cells one on top of the other with rowspan attribute.

Table Column and Row Head

Until here, we had only a header in the first row, but it's possible there is a header in the first column using th cell. See the below example:

<table border="1" cellspacing="0" cellpadding="8">
    <thead>
        <th>Movie</th>
        <th>Genre</th>
        <th>IMDB Rating</th>
    </thead>
    <tbody>
        <tr>
            <td>Interstellar</td>
            <td>Sci-fi</td>
            <td>8.4</td>
        </tr>
        <tr>
            <td>The Prestige</td>
            <td>Drama</td>
            <td>8.5</td>
        </tr>
        <tr>
            <td>The Butterfly Effect</td>
            <td>Sci-fi</td>
            <td>7.6</td>
        </tr>
    </tbody>
</table>

This example looks like this:

Other Table Considerations

There are colgroup and col elements, but I don't recommend using them because they are for styling, and as we know, styling is done with CSS. It's more common to style tables with CSS rather than using colgroup.

Tables with div and span

Yes, you read correct. It's possible create tables using divs or other block element, but the div will behave as a table for accessibility, but with less semantic. In this case, it's essential to organize the table layout with CSS.

For this, you should use role attribute and Aria Role

See the below example:

<div role="table" aria-label="Movie Information">
    <div role="rowgroup">
        <div role="row">
            <span role="columnheader" aria-colspan="2">Movie Info</div>
            <span role="columnheader">IMDB Rating</div>
        </div>
    </div>
    <div role="rowgroup">
        <div role="row">
            <span role="cell">Interstellar</span>
            <span role="cell">Sci-fi</span>
            <span role="cell">8.4</span>
        </div>
        <div role="row">
            <span role="cell">The Prestige</span>
            <span role="cell">Drama</span>
            <span role="cell">8.5</span>
        </div>
        <div role="row">
            <span role="cell">The Butterfly Effect</span>
            <span role="cell">Sci-fi</span>
            <span role="cell">7.6</span>
        </div>
    </div>
</div>

This code will be rendered like this:

Notice, that we use div and span with role attribute and its values:

table: for the whole table;
rowgroup: for row group, header row group or data row group;
columnheader: for column header;
row: for rows;
cell: for cells;

In detail:

<div role="table" aria-label="Movie Information"> represents the entire table with an aria-label attribute for accessibility.
<div role="rowgroup"> groups the rows, similar to the thead and tbody elements.
<div role="row"> represents each row.
<div role="columnheader" aria-colspan="2"> represents the table header with aria-colspan indicating the colspan of 2.
<div role="cell"> represents the table data.

When use this form?

Both forms, table element or role attribute, work almost equally, mainly we need to use CSS to improve layout and appearance of the table. But table element is more semantic, then you should prefer table. And, the better is creating a table with role attribute for more accessibility.

Remember, the role attribute is essential for accessibility.

What Lies Ahead

In upcoming articles, you will delve into forms in HTML. Stay tuned!

References

Mozilla Developer Network. HTML tables - Learn web development | MDN (Accessed on 25/09/2023)
Stack Overflow. HTML tables vs. - Stack Overflow (Accessed on 25/09/2023)

HTML5 - listas ordenadas, de marcadores e de definição e detalhes expansíveis

Arthur Nascimento Assunção — Tue, 19 Sep 2023 14:36:39 +0000

Neste artigo, aprenderemos sobre listas (ordenadas, com marcadores, de definição) e detalhes que podem ser expandidos em HTML.

As listas são muito úteis, não apenas para listas comuns (de marcadores ou numeradas) em textos, mas também em um menu de navegação, lista de cartões ou outros conjuntos de elementos.

Lista Ordenada

Para criar listas ordenadas, como as do Microsoft Word ou outros editores de texto, podemos usar o elemento ol com elementos li. O elemento ol marca uma lista ordenada, e o elemento li marca os itens da lista.

Abaixo, você pode ver um trecho de código:

<ol>
    <li>Interestelar</li>
    <li>O Grande Truque</li>
    <li>Efeito Borboleta</li>
</ol>

O resultado do trecho de código é:

Lista com Marcadores

Outro tipo comum de lista é a Lista com Marcadores ou Lista de Marcadores, que pode ser criada usando o elemento ul com elementos li, de maneira semelhante à Lista Ordenada. Esse tipo de lista é frequentemente usado para criar menus de navegação.

Abaixo, você pode ver um trecho de código:

<nav>
    <ul>
        <li>Início</li>
        <li>Projetos</li>
        <li>Contato</li>
     </ul>
</nav>

O resultado do trecho de código é:

Lista de Definição

Em algumas wikis, relatórios e documentos acadêmicos, é comum ter termos e suas definições. Para fazer isso, você deve usar uma lista de definição com os elementos dl (lista de definição), dt (termo de definição) e dd (descrição de definição). O elemento dl marca uma lista de definição, e para cada combinação de termo e descrição, usamos dt e dd.

Abaixo, você pode ver um trecho de código:

<dl>
  <dt>HTML</dt>
  <dd>Linguagem de marcação</dd>
  <dt>CSS</dt>
  <dd>Linguagem de estilo</dd>
  <dt>JavaScript</dt>
  <dd>Linguagem de programação web</dd>
</dl>

O resultado do trecho de código é:

Detalhes

Um elemento incrível é o detalhes. Este elemento cria um bloco recolhível com um título e descrição. É ideal para Perguntas Frequentes, onde o usuário pode clicar na pergunta para ver a resposta.

Este elemento utiliza três elementos: detalhes para marcar o bloco, o elemento summary para o título do detalhe e qualquer elemento, como p, para a descrição do detalhe.

Abaixo, você pode ver um trecho de código:

<details>
    <summary>Qual é o grau acadêmico de Arthur?</summary>
    <p>Mestrado em Ciência da Computação.</p>
</details>

O resultado do trecho de código é:

E, se você clicar no texto "Qual é o grau acadêmico de Arthur?", a descrição aparecerá. Você pode ver este resultado na próxima imagem:

Mas é possível iniciar o elemento de detalhes aberto; basta adicionar o atributo open, como no exemplo abaixo.

<details open>
    <summary>Quais tecnologias Arthur tem experiência?</summary>
    <p>ReactJS, NextJS, TypeScript/JavaScript, React Native, Jest, React Testing Library, Python.</p>
</details>

O resultado do trecho de código é:

O Que Vem a Seguir

Nos próximos artigos, você vai se aprofundar em tabelas. Fique ligado!

HTML5 - ordered, marker and definition lists, details

Arthur Nascimento Assunção — Tue, 19 Sep 2023 14:10:47 +0000

In this article, we will learn about lists (ordered, marker, definition) and details that can be expanded in HTML.

Lists are very useful, not just for common lists (of markers or numbered) in texts, but in a navigation menu, list of cards, or other sets of elements.

Ordered List

To create ordered lists, like those in Microsoft Word or other text editors, we can use the ol element with li elements. The ol element marks an ordered list, and the li element marks list items.

Below, you can see a code snippet:

<ol>
    <li>Interstellar</li>
    <li>The Prestige</li>
    <li>Butterfly Effect</li>
</ol>

The result of the code snippet is:

Unordered List

Another common type of list is the Unordered List or Marker List, which can be created using the ul element with li elements, similar to the Ordered List. This list type is often used to create navigation menus.

Below, you can see a code snippet:

<nav>
    <ul>
        <li>Home</li>
        <li>Projects</li>
        <li>Contact</li>
     </ul>
</nav>

The result of the code snippet is:

Definition List

In some wikis, reports, and academic documents, it is common to have terms and their definitions. To achieve this, you should use a definition list with dl (definition list), dt (definition term), and dd (definition description). The dl element marks a definition list, and for each combination of term and description, we use dt and dd.

Below, you can see a code snippet:

<dl>
  <dt>HTML</dt>
  <dd>Markup language</dd>
  <dt>CSS</dt>
  <dd>Style language</dd>
  <dt>JavaScript</dt>
  <dd>Web programming language</dd>
</dl>

The result of the code snippet is:

Details

An incredible element is details. This element creates a collapsible block with a title and description. It is ideal for Frequently Asked Questions where the user can click on the question to see the answer.

This element uses three elements: details to mark the block, summary element for the details title, and any element, such as p, for the details description.

Below, you can see a code snippet:

<details>
    <summary>What is Arthur's academic degree?</summary>
    <p>Master's in Computer Science.</p>
</details>

The result of the code snippet is:

And, if you click on the element text "What is Arthur's academic degree?" the description will appear. You can see this result in the next image:

But, it's possible to start the details element opened; you just need to add the open attribute, like in the example below.

<details open>
    <summary>What technologies does Arthur have expertise in?</summary>
    <p>ReactJS, NextJS, TypeScript/JavaScript, React Native, Jest, React Testing Library, Python.</p>
</details>

The result of the code snippet is:

What Lies Ahead

In upcoming articles, you will delve into tables. Stay tuned!

HTML5 - Conteúdo incorporado e multimídia

Arthur Nascimento Assunção — Sat, 16 Sep 2023 18:41:33 +0000

Neste artigo, aprenderemos sobre o conteúdo embutido e multimídia em HTML, como imagem, vídeo, áudio e iframe.

Figuras

Existe uma forma de inserir figuras em uma página com o elemento img. É um elemento de auto-fechamento, ou seja, o elemento <img> se fecha na tag de abertura.

Entre os atributos possíveis para este elemento, os mais importantes são:

src: significa fonte e é um atributo obrigatório, pois o texto (string) com o URL/link da imagem é indicado aqui.
alt: significa texto alternativo e é obrigatório para acessibilidade. Você deve indicar um texto alternativo (descrição) para a imagem no atributo alt.
width: a largura da imagem pode ser configurada por este atributo, mas é recomendável que o tamanho da imagem, sempre que possível, seja configurado em CSS.
height: a altura da imagem pode ser configurada por este atributo, mas é recomendável que o tamanho da imagem, sempre que possível, seja configurado em CSS.
srcset: significa conjunto de fontes. Este é um atributo incrível, pois permite usar várias imagens para um elemento, criando uma imagem responsiva.

Geralmente, o adaptável usa dois ou mais arquivos diferentes para a mesma imagem, cada arquivo com um tamanho diferente e para um tamanho de tela de dispositivo diferente. O responsivo geralmente usa o mesmo arquivo, mas altera seu tamanho.

Exemplo:

O tamanho original da imagem é de 200 x 100 pixels (width é 200 e height é 100). A proporção é de 2 para 1. Se você indicar width="400", sua imagem será de 400 x 200. Mas se você indicar width="400" e height="300", a proporção será alterada, e a imagem aparecerá distorcida. Você entende?

Abaixo, você pode ver um trecho de código:

<img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" alt="Cristo Redentor" />

<img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" alt="Cristo Redentor" width="100" />

<img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" alt="Cristo Redentor" height="50" />

Picture

Uma alternativa adaptável à srcset do elemento img é o elemento picture. Neste elemento, você indica diferentes fontes e um elemento img é usado como fallback.

Veja este exemplo:

<picture>
  <source media="(max-width: 799px)" srcset="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" />
  <source media="(min-width: 800px)" srcset="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=1200" />
  <img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=720" alt="Cristo Redentor" />
</picture>

<picture>: Este é um elemento de contêiner usado para fornecer várias fontes para um elemento <img>.
<source>: Esses elementos são usados dentro do elemento <picture> para especificar diferentes fontes (imagens) com base em condições de consulta de mídia.

Vídeo

Para incluir um vídeo em sua página, você pode usar o elemento video. Aqui está um exemplo:

<video src="link-video.mp4" type="video/mp4">
  Seu navegador não suporta o elemento <code>video</code>.
</video>

Você pode incluir:

Trilhas, como vídeos com áudios em diferentes idiomas.
Largura e altura como o elemento img.
Repetição, se o vídeo for reproduzido em um loop.

Mais informações podem ser acessadas em video: O Elemento de Incorporação de Vídeo.

Áudio

Para incluir áudio em uma página, você pode usar o elemento audio. Aqui está um exemplo:

<audio src="https://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
  Seu navegador não suporta o elemento <code>audio</code>.
</audio>

Você pode incluir:

Trilhas, como vídeos com diferentes idiomas.
Repetição, se o áudio for reproduzido em um loop.

Mais informações podem ser acessadas em audio.

Figure

O elemento figure é útil quando você precisa inserir conteúdo independente, como imagens, código ou vídeos dentro do seu conteúdo, opcionalmente com uma legenda.

Nesse cenário, o figure é um bom elemento para usar. Aqui está um exemplo:

<figure>
  <img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" alt="Cristo Redentor" />
  <figcaption>Cristo Redentor no Brasil.</figcaption>
</figure>

Você pode usar o elemento figure para vários tipos de conteúdo, não apenas imagens. Ele pode ser usado para vídeos, código e muito mais.

Iframe

Finalmente, você pode incluir conteúdo incorporado, como vídeos do YouTube ou até mesmo outra página da web, usando o elemento iframe. Este elemento cria um espaço com um contexto individual, funcionando como conteúdo separado dentro da sua página.

Aqui está um exemplo com dois elementos iframe:

<iframe src="https://www.google.com/webhp?igu=1" width="500" height="400">
  <p>Seu navegador não suporta iframes.</p>
</iframe>
<iframe src="page.html" width="400" height="400">
  <p>Seu navegador não suporta iframes.</p>
</iframe>

O iframe permite especificar um URL de um recurso no atributo src, indicar atributos width e height, e fornece uma mensagem de fallback se o navegador não suportar iframes.

Vídeo do Youtube

Outro uso comum para iframes é incorporar vídeos do YouTube. Aqui está um exemplo:

<iframe width="560" height="315" src="https://www.youtube.com/embed/sYmjU2mYc1o?si=DIANF95yhkCnOjBN" title="Player de Vídeo do YouTube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Este iframe incorpora um player de vídeo do YouTube com dimensões específicas, URL de origem e várias permissões para habilitar recursos como reprodução automática e modo tela cheia.

Visualizador de PDF

Uma coisa interessante que podemos fazer com um iframe é exibir um PDF (como um Visualizador de PDF) em sua página. Em outras palavras, podemos incorporar um PDF em uma página. O código abaixo mostra essa funcionalidade.

<iframe src="https://www.tutorialspoint.com/html/html_tutorial.pdf" width="400" height="600" frameborder="0" allowfullscreen></iframe>

No entanto, o exemplo acima não funciona porque é comum o servidor indicar que o conteúdo incorporado só funciona se estiver na mesma origem, como o mesmo site. Portanto, se o seu PDF estiver em seu site, está tudo bem, ele funcionará.

Para contornar esse problema, podemos usar o visualizador de documentos do Google, como no exemplo abaixo:

<iframe src="https://docs.google.com/viewerng/viewer?url=https://www.tutorialspoint.com/html/html_tutorial.pdf&embedded=true" frameborder="0" height="500" width="400"></iframe>

Este código será renderizado como na imagem abaixo.

O que Vem Pela Frente

Nos próximos artigos, você explorará listas ordenadas, listas de marcadores e definições, bem como detalhes em HTML. Fique ligado!

Referências

MDN WEB DOCS. Imagens Responsivas. Acessado em 16 de setembro de 2023.
WHATWG. HTML Living Standard. Acessado em 16 de setembro de 2023.

HTML5 - Embedded and Multimedia content

Arthur Nascimento Assunção — Sat, 16 Sep 2023 18:41:25 +0000

In this article, we will learn about Embedded and Multimedia content in HTML, such as image, video, audio, and iframe.

Figures

There is a form to insert figures in a page with the img element. It's a self-closing element, i.e., <img> element closes in the opening tag.

Among the possible attributes for this element, the most important ones are:

src: meaning source, and it is a mandatory attribute, because the text (string) with the URL/link for the image is indicated here.
alt: meaning alternative text, and it's mandatory for accessibility. You must indicate an alternative text (description) for the image in the alt attribute.
width: the width of the image can be configured by this attribute, but it's recommended that image size, whenever possible, be configured in CSS.
height: the height of the image can be configured by this attribute, but it's recommended that image size, whenever possible, be configured in CSS.
srcset: meaning set of sources. This is an incredible attribute because it allows using several images for an element, creating a Responsive image.

Adaptive usually uses two or more different files for the same image, each file with a different size and each file for a different device screen size. Responsive usually uses the same file but changes its size.

Example:

The original image size is 200 x 100 pixels (width is 200 and height is 100). The proportion is 2 to 1. If you indicate width="400", then your image will be 400 x 200. But if you indicate width="400" and height="300", the proportion will be changing, and the image will appear distorted. Do you understand?

Below, you can see a code snippet:

<img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" alt="Christ the Redeemer" />

<img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" alt="Christ the Redeemer" width="100" />

<img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" alt="Christ the Redeemer" height="50" />

This code will be rendered like below image.

Picture

An adaptive image alternative to srcset from img element is the picture element. In this element, you indicate different sources and an img element is used for fallback.

Look at this example:

<picture>
  <source media="(max-width: 799px)" srcset="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" />
  <source media="(min-width: 800px)" srcset="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=1200" />
  <img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=720" alt="Christ the Redeemer" />
</picture>

<picture>: This is a container element used for providing multiple sources for an <img> element.
<source>: These elements are used inside the <picture> element to specify different sources (images) based on media query conditions.

Video

To include a video on your page, you can use the video element. Here's an example:

<video src="link-video.mp4" type="video/mp4">
  Your browser does not support the <code>video</code> element.
</video>

You can include:

Tracks, such as videos with different language audios.
Width and Height like the img element.
Loop, if the video plays in a loop.

More information can be accessed in video: The Video Embed element.

Audio

To include audio on a page, you can use the audio element. Here's an example:

<audio src="https://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>

You can include:

Tracks, such as videos with different languages.
Loop, if the audio plays in a loop.

More information can be accessed in audio.

Figure

The figure element is useful when you need to insert independent content like images, code, or videos within your content, optionally with a caption.

In this scenario, the figure is a good element to use. Here's an example:

<figure>
  <img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" alt="Christ the Redeemer" />
  <figcaption>Christ the Redeemer in Brazil.</figcaption>
</figure>

You can use the figure element for various types of content, not just images. It can be used for videos, code, and more.

Iframe

Finally, you can include embedded content, such as YouTube videos, PDF file or even another web page, using the iframe element. This element creates a space with an individual context, working as separate content inside your page.

Below is an example with two iframe elements:

<iframe src="https://www.google.com/webhp?igu=1" width="500" height="400">
  <p>Your browser does not support iframes.</p>
</iframe>
<iframe src="page.html" width="400" height="400">
  <p>Your browser does not support iframes.</p>
</iframe>

The iframe allows you to specify a URL of a resource in the src attribute, indicate width and height attributes, and provides a fallback message if the browser doesn't support iframes.

Youtube Videos

Another common use for iframes is to embed YouTube videos. Here's an example:

<iframe width="560" height="315" src="https://www.youtube.com/embed/sYmjU2mYc1o?si=DIANF95yhkCnOjBN" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

This iframe embeds a YouTube video player with specific dimensions, source URL, and various permissions to enable features like autoplay and fullscreen mode.

PDF Viewer

An interesting thing that we can do with an iframe is show a PDF (such as a PDF Viewer) in your page. In other words, we can embed a PDF into a page. The below code shows this functionality.

<iframe src="https://www.tutorialspoint.com/html/html_tutorial.pdf" width="400" height="600" frameborder="0" allowfullscreen></iframe>

But, the above example doesn't work because it's common the server indicates that embed content only works if it's in the same origin, such as the same site. Then, if your PDF is on your website, it's OK, it will work.

To get around this problem, we can use the Google Docs viewer, like this below example:

<iframe src="https://docs.google.com/viewerng/viewer?url=https://www.tutorialspoint.com/html/html_tutorial.pdf&embedded=true" frameborder="0" height="500" width="400"></iframe>

This code will be rendered like the below image.

What Lies Ahead

In upcoming articles, you will delve into ordered, marker, and definition lists, as well as details in HTML. Stay tuned!

References

MDN WEB DOCS. Responsive Images. Accessed on September 16, 2023.
WHATWG. HTML Living Standard. Accessed on September 16, 2023.

HTML5 - Como identificar um elemento

Arthur Nascimento Assunção — Thu, 14 Sep 2023 15:11:04 +0000

Neste artigo, vou ensinar a você como identificar uma tag. Isso é muito importante quando usamos CSS ou JavaScript.

Três Formas de Identificação

Um elemento ou tag (abertura) pode ser identificado de três maneiras:

Usando um ID (identificador);
Usando uma classe;
Usando o nome da tag;

Usando um ID

ID é um atributo que pode ser colocado em uma tag, mas você deve usá-lo apenas para identificar elementos únicos e "nunca" usá-lo em um seletor CSS. Um ID é único; não há dois IDs iguais na mesma página, porque ID é como seu CPF (identificador de uma pessoa brasileira). ID é muito útil quando você precisa acessar o elemento por meio do JavaScript.

Exemplo:

<main id="content">
...
</main>

Usando uma Classe

Classe é um atributo que pode ser colocado em uma tag, e recomendamos que você use classe em quase todas as tags que precisarão de estilização com CSS. Uma classe é a mesma coisa que classe na vida real; você pertence à classe de estudantes, à classe de humanos, à classe de desenvolvedores, etc. É possível que um elemento tenha ID e Classe ao mesmo tempo. Porque cada um é para um propósito diferente.

Exemplo:

<main class="content">
...
</main>

Usando um Nome de Tag

É possível acessar uma tag usando seu nome de tag, seja CSS ou JavaScript, mas não recomendo usar essa forma em JS, e recomendo usá-la em CSS apenas para estilizar um elemento em geral, nunca um elemento específico.

Código Inicial Completo

Após este texto, abaixo, mostro a você um código inicial completo para seus códigos HTML5.

<!DOCTYPE html>
<html>
    <head>
        <!-- Arquivos externos (CSS, JS) e metadados -->
    </head>
    <body>
        <!-- Prefira usar classes para estilização; IDs são apenas para JS -->
        <header class="header" id="header">
            cabeçalho da página
        </header>
        <nav class="nav">
            menu
        </nav>
        <main class="content">
            <!-- Apenas um por página/documento -->
            Conteúdo principal
            <article>
                artigo interno
                <header>cabeçalho deste artigo</header>
                <section id="introduction">
                </section>
                <section id="content">
                </section>
                <section id="summary">
                </section>
                <!-- É possível ter artigos dentro de seções ou vice-versa; veja o link do Stack Overflow -->
            </article>
        </main>
        <section id="comments">
        </section>
        <footer class="footer">
        </footer>
    </body>
</html>

Vou explicar cada linha do código HTML fornecido:

<!DOCTYPE html>: Esta é a declaração do tipo de documento, especificando que o documento é um documento HTML5.
<html>: Esta é a tag de abertura <html>, indicando o início do documento HTML.
<head>: O elemento <head> contém metainformações sobre o documento, como links para arquivos externos (CSS e JavaScript) e metadados (como o título do documento).
: Este é um comentário HTML, fornecendo uma observação para quem lê o código, mas não afeta a renderização da página. Sugere que a seção <head> é onde você normalmente inclui links para arquivos CSS e JavaScript externos e especifica metadados.
<body>: O elemento <body> é onde vai o conteúdo visível da página da web.
: Outro comentário HTML, fornecendo orientações sobre o uso de classes para estilizar elementos e reservar IDs principalmente para interações com JavaScript.
<header class="header" id="header">: Esta linha define um elemento de cabeçalho (<header>) com tanto um atributo class quanto um atributo id. O atributo class é definido como "header", que pode ser usado para estilização com CSS. O atributo id também é definido como "header", o que identifica exclusivamente esse elemento na página.
cabeçalho da página: Dentro do elemento <header>, "cabeçalho da página" é o conteúdo visível que será exibido como o cabeçalho da página.
<nav class="nav">: Esta linha define um elemento de navegação (<nav>) com um atributo class definido como "nav", indicando que é um menu de navegação.
menu: Dentro do elemento <nav>, "menu" é o conteúdo visível do menu de navegação.
<main class="content">: Aqui, um elemento <main> é definido com um atributo class definido como "content". O elemento <main> geralmente contém o conteúdo principal da página da web.
Conteúdo principal: Dentro do elemento <main>, "Conteúdo principal" é o conteúdo visível que indica o conteúdo principal da página.
<article>: O elemento <article> é usado para representar uma peça de conteúdo autônoma, como uma postagem de blog, artigo ou notícia.
artigo interno: Dentro do elemento <article>, "artigo interno" representa o título ou cabeçalho do artigo.
<header>cabeçalho deste artigo</header>: Esta linha define outro elemento <header> dentro do <article>, contendo o cabeçalho ou título do artigo.
<section id="introduction">: Esta linha define um elemento <section> com um atributo id definido como "introduction", que pode ser usado para direcionar e estilizar esta seção especificamente.
<section id="content">: Semelhante à linha anterior, esta define outro elemento <section> com um atributo id definido como "content".
<section id="summary">: Mais um elemento <section> é definido com um atributo id definido como "summary".
: Este é outro comentário HTML, fornecendo uma observação sobre a possibilidade de ter artigos dentro de seções ou vice-versa. Ele também faz referência a um link do Stack Overflow para mais informações.
</article>: Isso marca o final do elemento <article>, fechando-o.
<section id="comments">: Esta linha define um elemento <section> com um atributo id definido como "comments", provavelmente indicando uma seção onde comentários ou discussões seriam inseridos.
</section>: Isso fecha o elemento <section> para comentários.
<footer class="footer">: Aqui, um elemento <footer> é definido com um atributo class definido como "footer", sugerindo que é a seção de rodapé da página.
</footer>: Isso fecha o elemento <footer>.
</body>: Isso marca o final do elemento <body>.
</html>: Esta é a tag de fechamento </html>, indicando o fim do documento HTML.

Cada linha deste código HTML contribui para a estrutura e conteúdo de uma página da web. Os comentários fornecem informações adicionais e orientações para entender o código.

O Que Vem Pela Frente

Nos próximos artigos, você irá explorar:

figuras
imagens
listas ordenadas e não ordenadas
listas de definição
detalhes
tabelas

Fique ligado!

HTML5 - How to identify an element

Arthur Nascimento Assunção — Thu, 14 Sep 2023 15:10:23 +0000

In this article, I'll teach you how to identify a tag. It's very important when we use CSS or JavaScript.

Three Forms of Identification

An element or tag (opening) can be identified in three ways:

Using an ID (identifier);
Using a class;
Using the tag name;

Using an ID

ID is an attribute that can be put in a tag, but you must use it just to identify unique elements and "never" use it in CSS selector. An ID is unique; there is not a two equals ID in the same page, because ID is like your CPF (a Brazilian person identifier). ID is very useful when you need to access the element by JavaScript.

Example:

<main id="content">
...
</main>

Using a Class

Class is an attribute that can be put in a tag, and we encourage you to use class in almost tags that will need styling with CSS. A class is the same thing that class in real life; you belong to student class, human class, developer class, etc. It's possible an element has ID and Class at the same time. Because each one is for a different purpose.

Example:

<main class="content">
...
</main>

Using a Tag Name

It's possible to access a tag using your tag name, whether CSS or JavaScript, but I don't recommend using this form in JS, and I recommend using it in CSS just to style an element in general, never a specified element.

Complete Initial Code

After this text, below, I show you a complete initial code for your HTML5 codes.

<!DOCTYPE html>
<html>
    <head>
        <!-- External files (CSS, JS) and metadata -->
    </head>
    <body>
        <!-- Prefer class than ID if you use it in CSS; ID is only for JS -->
        <header class="header" id="header">
            page header
        </header>
        <nav class="nav">
            menu
        </nav>
        <main class="content">
            <!-- Only one per page/document -->
            Main content
            <article>
                internal article
                <header>header of this article</header>
                <section id="introduction">
                </section>
                <section id="content">
                </section>
                <section id="summary">
                </section>
                <!-- It's possible there are articles inside sections or vice-versa; see stackoverflow link -->
            </article>
        </main>
        <section id="comments">
        </section>
        <footer class="footer">
        </footer>
    </body>
</html>

I'll explain each line of the provided HTML code:

<!DOCTYPE html>: This is the document type declaration, specifying that the document is an HTML5 document.
<html>: This is the opening <html> tag, indicating the start of the HTML document.
<head>: The <head> element contains meta-information about the document, such as links to external files (CSS and JavaScript) and metadata (like the document's title).
: This is an HTML comment, providing a note to anyone reading the code but doesn't affect the rendering of the page. It suggests that the <head> section is typically where you include links to external CSS and JavaScript files and specify metadata.
<body>: The <body> element is where the visible content of the web page goes.
: Another HTML comment, giving guidance on using classes for styling elements and reserving IDs primarily for JavaScript interactions.
<header class="header" id="header">: This line defines a header element (<header>) with both a class and an id attribute. The class attribute is set to "header," which can be used for styling with CSS. The id attribute is also set to "header," which uniquely identifies this element on the page.
Page header: Within the <header> element, "Page header" is the visible content that will be displayed as the header of the page.
<nav class="nav">: This line defines a navigation element (<nav>) with a class attribute set to "nav," indicating it's a navigation menu.
Menu: Inside the <nav> element, "Menu" is the visible content for the navigation menu.
<main class="content">: Here, a <main> element is defined with a class attribute set to "content." The <main> element typically contains the main content of the web page.
Main content: Within the <main> element, "Main content" is the visible content indicating the primary content of the page.
<article>: The <article> element is used to represent a self-contained piece of content, such as a blog post, article, or news story.
Internal article: Within the <article> element, "Internal article" represents the title or heading of the article.
<header>Header of this article</header>: This line defines another <header> element within the <article>, containing the header or title of the article.
<section id="introduction">: This line defines a <section> element with an id attribute set to "introduction," which can be used to target and style this section specifically.
<section id="content">: Similar to the previous line, this one defines another <section> element with an id attribute set to "content."
<section id="summary">: Yet another <section> element is defined with an id attribute set to "summary."
: This is another HTML comment, providing a note about the possibility of nesting articles inside sections or vice versa. It also references a Stack Overflow link for further information.
</article>: This marks the end of the <article> element, closing it.
<section id="comments">: This line defines a <section> element with an id attribute set to "comments," likely indicating a section where comments or discussions would go.
</section>: This closes the <section> element for comments.
<footer class="footer">: Here, a <footer> element is defined with a class attribute set to "footer," suggesting it's the footer section of the page.
</footer>: This closes the <footer> element.
</body>: This marks the end of the <body> element.
</html>: This is the closing </html> tag, indicating the end of the HTML document.

Each line in this HTML code contributes to the structure and content of a web page. The comments provide additional information and guidance for understanding the code.

What Lies Ahead

In upcoming articles, you will delve into:

figures
images
ordered and unordered lists
definition lists
details
tables

Stay tuned!

HTML5 - Elementos de Bloco e Web Semântica

Arthur Nascimento Assunção — Thu, 14 Sep 2023 15:06:14 +0000

Neste artigo, vou apresentar as tags de bloco HTML5 e discutir o conceito da web semântica juntamente com as tags semânticas.

Tags de Bloco

Imagine que você precise organizar um parágrafo e uma imagem do mesmo contexto ou duas frases dentro de um parágrafo com formatação diferente. Como você pode estruturá-los de forma eficaz?

Para esse fim, temos as tags de bloco. Existem duas tags de bloco genéricas: span e div. Essas tags são usadas para:

Definir uma divisão ou seção.
Definir contêineres, principalmente a tag div.
Separar partes do código para estilização com CSS.

Exemplo de div:

<div>
    <div>bloco 1</div>
    <div>bloco 2</div>
</div>

Exemplo de span:

<p>O que é <span>HTML</span> e <span>CSS</span> ?</p>

A Diferença entre as Tags `div` e `span`

A tag div cria um contêiner com display: block, causando uma quebra de linha após ela. Por outro lado, a tag span cria um contêiner com display: inline, o que significa que nenhuma quebra de linha ocorre após o span.

Normalmente, usamos div para criar contêineres de layout, e span é usado para estilizar partes de textos.

Web Semântica e HTML5

Por muitos anos, os desenvolvedores front-end usaram o div como contêiner de layout. No entanto, um div por si só não tem significado para várias entidades, como navegadores, desenvolvedores, mecanismos de busca e leitores de tela.

Para resolver isso, o Consórcio World Wide Web (W3C) introduziu a web semântica no HTML5, resultando em tags semânticas. A Figura 1 ilustra a diferença entre HTML4 e HTML5 em termos de semântica.

Figura 1. HTML4 vs HTML5 em visualização semântica. Fonte: Alejandro-ao.com.

No HTML4, dependíamos do div para estruturar várias seções de uma página da web. No entanto, o HTML5 introduziu uma mudança significativa, criando tags semânticas específicas para seções comuns, conferindo significado ao conteúdo.

Tags semânticas estão relacionadas ao significado do conteúdo.

Hoje em dia, usamos comumente:

header para o cabeçalho da página, que pode incluir elementos como logotipos, formulários de pesquisa e nomes de autores. Geralmente, há um por seção, artigo ou corpo.
main para o conteúdo principal da página, com apenas um por documento.
nav para menus de navegação, especialmente a navegação importante ou primária.
article para artigos no documento. Um artigo pode ter um cabeçalho, rodapé ou seções. Ele representa conteúdo independente na página.
section para agrupar conteúdo relacionado no documento.
aside para conteúdo lateral relacionado ao conteúdo principal.
footer para o rodapé do documento, artigo ou seção, incluindo informações como autoria, direitos autorais e links relacionados.

A Figura 2 fornece um exemplo mais detalhado.

Figura 2. HTML5 semântico em exemplo.

Seção vs. Artigo no HTML5

Consulte esta discussão: Seção vs. Artigo HTML5.

Código Inicial Completo

Seguindo essa explicação, abaixo você encontrará um código HTML5 inicial completo. Por enquanto, ignore os atributos class e id.

<!DOCTYPE html>
<html>
    <head>
        <!-- Arquivos externos (CSS, JS) e metadados -->
    </head>
    <body>
        <!-- Prefira usar classes para estilização; IDs são principalmente para JavaScript -->
        <header class="header" id="header">
            Cabeçalho da página
        </header>
        <nav class="nav">
            Menu
        </nav>
        <main class="content">
            <!-- Apenas um por página/documento -->
            Conteúdo principal
            <article>
                Artigo interno
                <header>Cabeçalho deste artigo</header>
                <section id="introduction">
                </section>
                <section id="content">
                </section>
                <section id="summary">
                </section>
                <!-- É possível ter artigos dentro de seções ou vice-versa; consulte o link do stackoverflow -->
            </article>
        </main>
        <section id="comments">
        </section>
        <footer class="footer">
        </footer>
    </body>
</html>

Explicação de cada linha do código HTML fornecido:

<!DOCTYPE html>: Esta é a declaração do tipo de documento, especificando que o documento é um documento HTML5.
<html>: Este é o início da tag <html>, indicando o início do documento HTML.
<head>: O elemento <head> contém metainformações sobre o documento, como links para arquivos externos (CSS e JavaScript) e metadados (como o título do documento).
: Este é um comentário HTML, fornecendo uma nota para quem lê o código, mas não afeta a renderização da página. Ele sugere que a seção <head> é normalmente onde você inclui links para arquivos CSS e JavaScript externos e especifica metadados.
<body>: O elemento <body> é onde o conteúdo visível da página da web é colocado.
: Outro comentário HTML, dando orientações sobre o uso de classes para estilizar elementos e reservar IDs principalmente para interações com JavaScript.
<header class="header" id="header">: Esta linha define um elemento <header> (<header>) com um atributo class e um atributo id. O atributo class está definido como "header", que pode ser usado para estilização com CSS. O atributo id também está definido como "header", identificando exclusivamente este elemento na página.
Cabeçalho da página: Dentro do elemento <header>, "Cabeçalho da página" é o conteúdo visível que será exibido como o cabeçalho da página.
<nav class="nav">: Esta linha define um elemento de navegação (<nav>) com um atributo class definido como "nav", indicando que é um menu de navegação.
Menu: Dentro do elemento <nav>, "Menu" é o conteúdo visível para o menu de navegação.
<main class="content">: Aqui, um elemento <main> é definido com um atributo class definido como "content". O elemento <main> geralmente contém o conteúdo principal da página.
Conteúdo principal: Dentro do elemento <main>, "Conteúdo principal" é o conteúdo visível que indica o conteúdo principal da página.
<article>: O elemento <article> é usado para representar um conteúdo independente, como uma postagem de blog, artigo ou notícia.
Artigo interno: Dentro do elemento <article>, "Artigo interno" representa o título ou cabeçalho do artigo.
<header>Cabeçalho deste artigo</header>: Esta linha define outro elemento <header> dentro do <article>, contendo o cabeçalho ou título do artigo.
<section id="introduction">: Esta linha define um elemento <section> com um atributo id definido como "introduction", que pode ser usado para direcionar e estilizar esta seção especificamente.
<section id="content">: Semelhante à linha anterior, esta define outro elemento <section> com um atributo id definido como "content".
<section id="summary">: Mais um elemento <section> é definido com um atributo id definido como "summary".
: Este é outro comentário HTML, fornecendo uma nota sobre a possibilidade de aninhar artigos dentro de seções ou vice-versa. Ele também faz referência a um link do Stack Overflow para mais informações.
</article>: Isso marca o final do elemento <article>, fechando-o.
<section id="comments">: Esta linha define um elemento <section> com um atributo id definido como "comments", provavelmente indicando uma seção onde os comentários ou discussões seriam inseridos.
</section>: Isso fecha o elemento <section> para comentários.
<footer class="footer">: Aqui, um elemento <footer> é definido com um atributo class definido como "footer", sugerindo que é a seção de rodapé da página.
</footer>: Isso fecha o elemento <footer>.
</body>: Isso marca o final do elemento <body>.
</html>: Esta é a tag de fechamento </html>, indicando o fim do documento HTML.

Cada linha deste código HTML contribui para a estrutura e conteúdo de uma página da web. Os comentários fornecem informações adicionais e orientações para entender o código.

O Que Está Por Vir

Nos próximos artigos, você aprenderá como identificar uma tag.
Fique ligado!

HTML5 - Text markup elements

Arthur Nascimento Assunção — Thu, 14 Sep 2023 15:01:59 +0000

In this article, we will learn about text markup, titles, code formatting, links, and citation elements in HTML.

Before the explanation, you need to know that HTML text markup is used to mark the semantic of the text, and it's not for visual formatting (presentation). However, some formatting elements can change the visual format of texts.

HTML tags are for markup (mainly semantically) and not for presentation.

Text Formatting Elements

If you need to indicate text, a word, or character differently, you have some elements:

`p` Element for Paragraphs

All paragraphs (not all texts) must be inside a paragraph element.

Below, you can see a code snippet:

<p>
    The p tag is used to create paragraphs. It formats content as a paragraph. It does not break lines by default.
</p>
<p>A second paragraph will be on a new line.</p>

The result of this code is:

`small` Element for Smaller Text

Firstly, I don't recommend using the small element because it doesn't have semantic meaning, and all presentation should be done with CSS.

The small element allows a text inside its opening and closing tags to be smaller than the rest of the text.

Below, you can see a code snippet:

<p>
    It is possible to indicate that a word will be <small>smaller</small> than the others.
</p>

The result of this code is:

`strong` Element for Important Content

If you have important words or texts, it can be good to use the strong element. Notice that strong is usually bold, but it's not relevant; think only about semantic.

What about the `b` Element?

The b element is for contents that deserve attention, but it's not more important than the rest of the text, and it's not necessary to change the voice or mood in screen readers. A common use example is keywords in a text.

Below, you can see a code snippet:

<p>
    If I want to indicate that something is <strong>important</strong>, I can use the strong tag.
    <br />But there's also a tag for <b>bold</b>, which is the b tag. What's the difference?
</p>

The result of the code snippet is:

`em` Element for Emphasis

If you need more emphasis in a particular content, use the em element. This content is not more important than the rest of the text because for importance, we use strong. Notice that em is usually italic, but it's not relevant; think only about semantic.

And `i` Element?

The i element is for alternate voice or mood for screen readers or specified terms, such as taxonomic designation, a technical term, or an idiomatic phrase from another language. It's important to notice that terms in different languages from the main text usually must be in italic, but italic must be indicated in CSS. In HTML, terms or texts in different languages must be annotated with lang attribute.

Below, you can see a code snippet:

<p>
    If I want to indicate that something is <em>emphasis</em>, I can use the em tag.
    <br />But there's also a tag for <i>italic</i>, which is the i tag. What's the difference?
</p>

The result of the code snippet is:

`mark` Element for Highlighting Content

The mark element is used to highlight terms in a text without semantic meaning.

Below, you can see a code snippet:

<p>If you want to <mark>highlight</mark> a text, use mark.</p>

The result of the code snippet is:

Title Headers / Headings

For titles in your text, use h1, h2, h3, h4, h5, and h6. Remember that titles are hierarchies, like below figures. Then h2 only exists if there's an h1 before, h3 only exists if there's an h2 before, and so on. I recommend that there should be just one h1 per page/document (or per section or article).

h1 for the primary title of the page or section;
h2 for a subtitle;
h3 for a sub-subtitle;
h4 for a sub-sub-subtitle;
h5 for a sub-sub-sub-subtitle;
h6 for a sub-sub-sub-sub-subtitle;

Some headings in tree view:

Some headings in another tree view:

Notice, each heading appears in a size, but it's not important in HTML; think about semantic and order for each heading. Size can be changed in CSS.

Below, you can see a code snippet:

<h1>Level 1 Title</h1>
<h2>Level 2 Title - h1 sub-title</h2>
<h3>Level 3 Title - h2 sub-title</h3>
<h4>Level 4 Title - h3 sub-title</h4>
<h5>Level 5 Title - h4 sub-title</h5>
<h6>Level 6 Title - h5 sub-title</h6>

The result of the code snippet is:

Code Format

If you need to show codes or text without formatting, you might use pre and code elements.

pre is for a block of preformatted text, so spaces are preserved, and the font can be monospaced. Another element is code for programming codes. Notice that code doesn't offer code highlighting; for this, use JavaScript + CSS code, like Highlight.js.

Generally, inline computer codes are marked with code element, and computer block codes are marked with pre and code elements.

Below, you can see a code snippet:

<p>The function <code>printf</code> prints a message on the user's screen</p>
<pre>
  <code>
int main(){
  printf("Message");

  return 0;
}
  </code>
</pre>

The result of the code snippet is:

Link to Another Page

A very useful element in HTML is the a tag for links to other pages or elements on the web (such as images, texts, files, etc.). A link can be a text, a button, an icon, an image, a section, or any other element.

Below, you can see a code snippet:

<p>
  <a href="https://google.com.br">Google</a>
</p>

The result of the code snippet is:

Citation Elements

We can use cite and blockquote for citation. cite indicates the authors, and blockquote creates quotes.

Below, you can see a code snippet:

<blockquote>
  "The last tag opened should be the first to be closed."
</blockquote>
<cite>Arthur Assuncao, 2023</cite>

The result of the code snippet is:

What Lies Ahead

In upcoming articles, you will delve into Block elements and Semantic web. Stay tuned!

References

WHATWG. HTML Living Standard. Available at: https://html.spec.whatwg.org/multipage/#toc-dom. Accessed on September 14, 2023.

HTML5 - Block elements and Semantic web

Arthur Nascimento Assunção — Thu, 14 Sep 2023 15:00:03 +0000

In this article, I'll introduce HTML5 block tags and discuss the concept of the semantic web along with semantic tags.

Block Tags

Imagine you need to organize a paragraph and an image from the same context or two phrases within a paragraph with different formatting. How can you structure them effectively?

For this purpose, we have block tags. There are two generic block tags: span and div. These tags are used to:

Define a division or section.
Define containers, primarily the div tag.
Separate parts of the code for styling with CSS.

Example of div:

<div>
    <div>block 1</div>
    <div>block 2</div>
</div>

Example of span:

<p>What's <span>HTML</span> and <span>CSS</span> ?</p>

The Difference between `div` and `span` Tags

The div tag creates a container with display: block, causing a line break after it. In contrast, the span tag creates a container with display: inline, meaning no line break occurs after the span.

Typically, we use div to create containers for layout, and span is for styling parts of texts.

Web Semantics and HTML5

For many years, front-end developers used div for layout containers. However, a div alone lacks meaning for various entities, such as browsers, developers, search engines, and screen readers.

To address this, the World Wide Web Consortium (W3C) introduced the semantic web in HTML5, resulting in semantic tags. Figure 1 illustrates the difference between HTML4 and HTML5 in terms of semantics.

Figure 1. HTML4 vs HTML5 in semantic view. Source: Alejandro-ao.com.

In HTML4, we relied on div for structuring various sections of a web page. However, HTML5 introduced a significant change by creating specific semantic tags for common sections, providing meaning to the content.

Semantic tags are related to the meaning of content.

Today, we commonly use:

header for the page header, which may include elements like logos, search forms, and author names. There is typically one per section, article, or body.
main for the main content of the page, with only one per document.
nav for navigation menus, particularly important or primary navigation.
article for articles in the document. An article can have a header, footer, or sections. It represents independent content on the page.
section for grouping related content in the document.
aside for side content related to the main content.
footer for footer content of the document, article, or section, including information like authorship, copyright, and related links.

Figure 2 provides a more detailed example.

Figure 2. Semantic HTML5 in example.

Section vs Article in HTML5

Refer to this discussion: Section vs Article HTML5.

Complete Initial Code

Following this explanation, below, you'll find a complete initial HTML5 code. For now, ignore the class and id attributes.

<!DOCTYPE html>
<html>
    <head>
        <!-- External files (CSS, JS) and metadata -->
    </head>
    <body>
        <!-- Prefer using classes for styling; IDs are primarily for JavaScript -->
        <header class="header" id="header">
            Page header
        </header>
        <nav class="nav">
            Menu
        </nav>
        <main class="content">
            <!-- Only one per page/document -->
            Main content
            <article>
                Internal article
                <header>Header of this article</header>
                <section id="introduction">
                </section>
                <section id="content">
                </section>
                <section id="summary">
                </section>
                <!-- It's possible to have articles inside sections or vice-versa; see the stackoverflow link -->
            </article>
        </main>
        <section id="comments">
        </section>
        <footer class="footer">
        </footer>
    </body>
</html>

I'll explain each line of the provided HTML code:

<!DOCTYPE html>: This is the document type declaration, specifying that the document is an HTML5 document.
<html>: This is the opening <html> tag, indicating the start of the HTML document.
<head>: The <head> element contains meta-information about the document, such as links to external files (CSS and JavaScript) and metadata (like the document's title).
: This is an HTML comment, providing a note to anyone reading the code but doesn't affect the rendering of the page. It suggests that the <head> section is typically where you include links to external CSS and JavaScript files and specify metadata.
<body>: The <body> element is where the visible content of the web page goes.
: Another HTML comment, giving guidance on using classes for styling elements and reserving IDs primarily for JavaScript interactions.
<header class="header" id="header">: This line defines a header element (<header>) with both a class and an id attribute. The class attribute is set to "header," which can be used for styling with CSS. The id attribute is also set to "header," which uniquely identifies this element on the page.
Page header: Within the <header> element, "Page header" is the visible content that will be displayed as the header of the page.
<nav class="nav">: This line defines a navigation element (<nav>) with a class attribute set to "nav," indicating it's a navigation menu.
Menu: Inside the <nav> element, "Menu" is the visible content for the navigation menu.
<main class="content">: Here, a <main> element is defined with a class attribute set to "content." The <main> element typically contains the main content of the web page.
Main content: Within the <main> element, "Main content" is the visible content indicating the primary content of the page.
<article>: The <article> element is used to represent a self-contained piece of content, such as a blog post, article, or news story.
Internal article: Within the <article> element, "Internal article" represents the title or heading of the article.
<header>Header of this article</header>: This line defines another <header> element within the <article>, containing the header or title of the article.
<section id="introduction">: This line defines a <section> element with an id attribute set to "introduction," which can be used to target and style this section specifically.
<section id="content">: Similar to the previous line, this one defines another <section> element with an id attribute set to "content."
<section id="summary">: Yet another <section> element is defined with an id attribute set to "summary."
: This is another HTML comment, providing a note about the possibility of nesting articles inside sections or vice versa. It also references a Stack Overflow link for further information.
</article>: This marks the end of the <article> element, closing it.
<section id="comments">: This line defines a <section> element with an id attribute set to "comments," likely indicating a section where comments or discussions would go.
</section>: This closes the <section> element for comments.
<footer class="footer">: Here, a <footer> element is defined with a class attribute set to "footer," suggesting it's the footer section of the page.
</footer>: This closes the <footer> element.
</body>: This marks the end of the <body> element.
</html>: This is the closing </html> tag, indicating the end of the HTML document.

Each line in this HTML code contributes to the structure and content of a web page. The comments provide additional information and guidance for understanding the code.

HTML5 - Elementos de marcação de texto

Arthur Nascimento Assunção — Thu, 14 Sep 2023 14:56:05 +0000

Neste artigo, aprenderemos sobre marcação de texto, títulos, formatação de código, links e elementos de citação em HTML.

Antes da explicação, é importante saber que a marcação de texto em HTML é usada para marcar a semântica do texto e não para formatação visual (apresentação). No entanto, alguns elementos de formatação podem alterar o formato visual do texto.

As tags HTML são para marcação (principalmente semântica) e não para apresentação.

Elementos de Formatação de Texto

Se você precisa destacar um texto, uma palavra ou caractere de maneira diferente, existem alguns elementos:

Elemento `p` para Parágrafos

Todos os parágrafos (nem todos os textos) devem estar dentro de um elemento de parágrafo.

Aqui está um trecho de código:



<p>
    A tag p é usada para criar parágrafos. Ela formata o conteúdo como um parágrafo e não quebra linhas por padrão.
</p>
<p>Um segundo parágrafo estará em uma nova linha.</p>

O resultado deste código é:

Elemento `small` para Texto Menor

Primeiramente, não recomendo o uso do elemento small porque ele não tem significado semântico, e toda formatação deve ser feita com CSS.

O elemento small permite que um texto dentro de suas tags de abertura e fechamento seja menor do que o restante do texto.

Aqui está um trecho de código:



<p>
    É possível indicar que uma palavra será <small>menor</small> do que as outras.
</p>

O resultado deste código é:

Elemento `strong` para Conteúdo Importante

Se você tiver palavras ou textos importantes, é bom usar o elemento strong. Observe que strong geralmente é em negrito, mas isso não é relevante; pense apenas na semântica.

E o Elemento `b`?

O elemento b é para conteúdos que merecem atenção, mas não são mais importantes do que o restante do texto, e não é necessário alterar a voz ou o tom em leitores de tela. Um exemplo comum de uso é palavras-chave em um texto.

Aqui está um trecho de código:



<p>
    Se eu quiser indicar que algo é <strong>importante</strong>, posso usar a tag strong.
    <br />Mas também existe uma tag para <b>negrito</b>, que é a tag b. Qual é a diferença?
</p>

O resultado do trecho de código é:

Elemento `em` para Ênfase

Se você precisa de mais ênfase em um conteúdo específico, use o elemento em. Esse conteúdo não é mais importante do que o restante do texto, pois para importância, usamos strong. Observe que em geralmente é em itálico, mas isso não é relevante; pense apenas na semântica.

E o Elemento `i`?

O elemento i é para voz ou tom alternativo em leitores de tela ou termos específicos, como designação taxonômica, um termo técnico ou uma frase idiomática de outro idioma. É importante observar que termos em diferentes idiomas do texto principal geralmente devem estar em itálico, mas o itálico deve ser indicado no CSS. No HTML, termos ou textos em diferentes idiomas devem ser anotados com o atributo lang.

Aqui está um trecho de código:



<p>
    Se eu quiser indicar que algo é <em>ênfase</em>, posso usar a tag em.
    <br />Mas também existe uma tag para <i>itálico</i>, que é a tag i. Qual é a diferença?
</p>

O resultado do trecho de código é:

Elemento `mark` para Destacar Conteúdo

O elemento mark é usado para destacar termos em um texto sem significado semântico.

Aqui está um trecho de código:



<p>Se você deseja <mark>destacar</mark> um texto, use mark.</p>

O resultado do trecho de código é:

Títulos

Para títulos em seu texto, use h1, h2, h3, h4, h5 e h6. Lembre-se de que os títulos são hierarquias, como nas figuras abaixo. Portanto, h2 só existe se houver um h1 antes, h3 só existe se houver um h2 antes e assim por diante. Recomendo que haja apenas um h1 por página/documento (ou por seção ou artigo).

h1 para o título principal da página ou seção;
h2 para um subtítulo;
h3 para um sub-subtítulo;
h4 para um sub-sub-subtítulo;
h5 para um sub-sub-sub-subtítulo;
h6 para um sub-sub-sub-sub-subtítulo;

Alguns títulos em visualização em árvore:

Alguns títulos em outra visualização em árvore:

Observe que cada título aparece em um tamanho, mas isso não é importante no HTML; pense na semântica e na ordem de cada título. O tamanho pode ser alterado no CSS.

Aqui está um trecho de código:



<h1>Título Nível 1</h1>
<h2>Título Nível 2 - subtítulo h1</h2>
<h3>Título Nível 3 - subtítulo h2</h3>
<h4>Título Nível 4 - subtítulo h3</h4>
<h5>Título Nível 5 - subtítulo h4</h5>
<h6>Título Nível 6 - subtítulo h5</h6>

O resultado do trecho de código é:

Formato de Código

Se você precisa mostrar códigos ou texto sem formatação, pode usar os elementos pre e code.

pre é para um bloco de texto pré-formatado, onde espaços são preservados e a fonte pode ser monoespaçada. Outro elemento é code para códigos de programação. Observe que o código não oferece destaque de sintaxe; para isso, use código JavaScript + CSS, como o Highlight.js.

Geralmente, os códigos de computador em linha são marcados com o elemento code, e os blocos de códigos de computador são marcados com os elementos pre e code.

Aqui está um trecho de código:



<p>A função <code>printf</code> imprime uma mensagem na tela do usuário</p>
<pre>
  <code>
int main(){
  printf("Mensagem");

  return 0;
}
  </code>
</pre>

O resultado do trecho de código é:

Link para Outra Página

Um elemento muito útil em HTML é a tag a para links para outras páginas ou elementos na web (como imagens, textos, arquivos etc.). Um link pode ser um texto, um botão, um ícone, uma imagem, uma seção ou qualquer outro elemento.

Aqui está um trecho de código:



<p>
  <a href="https://google.com.br">Google</a>
</p>

O resultado do trecho de código é:

Elementos de Citação

Podemos usar cite e blockquote para citação. cite indica os autores, e blockquote cria citações.

Aqui está um trecho de código:



<blockquote>
  "A última tag aberta deve ser a primeira a ser fechada."
</blockquote>
<cite>Arthur Assuncao, 2023</cite>

O resultado do trecho de código é:

O Que Vem Aí

Nos próximos artigos, você explorará os elementos de bloco e a web semântica. Fique ligado!

Referências

HTML - Padrão Atualizado em 11 de setembro de 2023

DEV Community: Arthur Nascimento Assunção

HTML5 - Principais insights sobre tabelas

Cabeçalho da Tabela

Borda da Tabela

Estilizando Tabelas

Mesclando Células da Tabela

Cabeçalho de Coluna e Linha da Tabela

Outras Considerações Sobre Tabelas

Tabelas com div e span

Quando usar essa forma?

O Que Vem Pela Frente

Referências

HTML5 - Key Insights into Tables

Table Header

Table Border

Styling Tables

Table Cell Merging

Table Column and Row Head

Other Table Considerations

Tables with div and span

When use this form?

What Lies Ahead

References

HTML5 - listas ordenadas, de marcadores e de definição e detalhes expansíveis

Lista Ordenada

Lista com Marcadores

Lista de Definição

Detalhes

O Que Vem a Seguir

HTML5 - ordered, marker and definition lists, details

Ordered List

Unordered List

Definition List

Details

What Lies Ahead

HTML5 - Conteúdo incorporado e multimídia

Figuras

Picture

Figure

Iframe

Vídeo do Youtube

Visualizador de PDF

O que Vem Pela Frente

Referências

HTML5 - Embedded and Multimedia content

Figures

Picture

Figure

Iframe

Youtube Videos

PDF Viewer

What Lies Ahead

References

HTML5 - Como identificar um elemento

Três Formas de Identificação

Usando um ID

Usando uma Classe

Usando um Nome de Tag

Código Inicial Completo

O Que Vem Pela Frente

HTML5 - How to identify an element

Three Forms of Identification

Using an ID

Using a Class

Using a Tag Name

Complete Initial Code

What Lies Ahead

HTML5 - Elementos de Bloco e Web Semântica

Tags de Bloco

A Diferença entre as Tags div e span

Web Semântica e HTML5

Seção vs. Artigo no HTML5

Código Inicial Completo

O Que Está Por Vir

HTML5 - Text markup elements

Text Formatting Elements

p Element for Paragraphs

small Element for Smaller Text

strong Element for Important Content

What about the b Element?

A Diferença entre as Tags `div` e `span`

`p` Element for Paragraphs

`small` Element for Smaller Text

`strong` Element for Important Content

What about the `b` Element?

`em` Element for Emphasis

And `i` Element?

`mark` Element for Highlighting Content

The Difference between `div` and `span` Tags

Elemento `p` para Parágrafos

Elemento `small` para Texto Menor

Elemento `strong` para Conteúdo Importante

E o Elemento `b`?

Elemento `em` para Ênfase

E o Elemento `i`?

Elemento `mark` para Destacar Conteúdo