Elementos Semânticos HTML

Este artigo discute a semântica HTML . Um elemento com um significado semântico é chamado de elemento semântico.

Elementos semânticos: o que são?

Tanto o navegador quanto o desenvolvedor podem entender o significado de um elemento semântico. Um elemento não semântico é um <div> ou <span> , que não exibe nenhuma informação sobre seu conteúdo.

Um <form> , um <table> e um <article> são exemplos de elementos semânticos HTML. Eles definem claramente seu conteúdo.

Índice-

Elementos em semântica HTML

O código HTML típico em um site da Web é o seguinte:

<div id=”nav”> <div class=”cabeçalho”> <div id=”rodapé”>

É usado para indicar a barra de navegação, cabeçalho e rodapé.

Para explicar os diferentes componentes de uma página web, a semântica HTML opera os seguintes elementos semânticos:

  • <artigo>
  • <à parte>
  • <detalhes>
  • <figcaption>
  • <figura>
  • <rodapé>
  • <cabeçalho>
  • <principal>
  • <marca>
  • <nav>
  • <seção>
  • <resumo>
  • <tempo>
Elementos Semânticos HTML

Elemento HTML <seção>:

O elemento <section> em um documento representa uma seção.

A documentação HTML para mrc declara: “Uma seção é um agrupamento temático de conteúdo.”

Uma seção de introdução, seção de conteúdo e seção de informações de contato são incluídas em uma página da Web em HTML .
Existem duas seções em um documento:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<body>
<section>
<h1>Nikola Tesla</h1>
<p>Tesla, an Austrian native, finished his undergraduate training in engineering and physics in the 1870s without earning a degree. However, he did obtain experience working for Continental Edison and in the telephone industry in the early 1880s. In 1884, he was granted naturalization as a citizen of the United States. He was employed at New York City's Edison Machine Works before leaving alone. Partners who helped Tesla fund and sell his ideas made it feasible for him to develop mechanical and electrical devices in New York.</p>
</section><section>
<h1>WWF's Panda symbol</h1>
<p>The alternating current (AC) induction motor and polyphase AC system covered by his patents from 1888 served as the pillars of the polyphase system sold by Westinghouse Electric.</p>
</section>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Elemento HTML <cabeçalho>

Em HTML, o elemento <header> contém conteúdo como links de navegação e conteúdo introdutório em semântica HTML .

Normalmente, um elemento <header> contém as seguintes informações:

  • Logotipos ou ícones
  • Contém um título (<h1> – <h6>)
  • Informações sobre o autor

Observe que você pode ter mais de um elemento <header> no mesmo documento HTML, mas é impossível colocar cabeçalhos dentro de outro <header> , um <footer> ou um <address> .
O cabeçalho de um artigo é o seguinte:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<body>
<article>
<header>
<h1>What is Google?</h1>
<p>Google goals</p>
</header>
<p>Formerly known as BackRub. As a research project at Stanford University, Sergey Brin and Larry Page began developing Google in 1996 in order to search the Internet for files. Their search engine's name was later changed to Google, which is inspired by the term googol. A headquarters can be found in Mountain View, California, where the company is based.</p>
</article>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está outro exemplo do elemento HTML <header>

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Welcome to Mr Examples</h1>
<nav>
<ul>
<li>HTML |</li>
<li>CSS |</li>
<li>Python</li>
</ul>
</nav>
</header>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

HTML <artigo>

Os artigos especificam conteúdo independente e independente. Na semântica HTML , <article> deve fazer sentido por conta própria e ser distribuído independentemente do restante do site.

A seguir estão exemplos de como um elemento <article> pode ser usado na semântica HTML:

  1. Um artigo sobre entretenimento.
  2. Artigo em um jornal.
  3. Poste no fórum.
  4. Postar no blog.

Os três artigos a seguir são independentes e independentes:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<body>
<article>
<h2>Alphabet Inc</h2>
<p>The headquarters of Alphabet Inc., a holding company for an American technological corporation, are located in Mountain View, California. Google underwent a reorganisation on October 2, 2015, and in the process, became Alphabet.By revenue, Alphabet is the third-largest technology corporation in the world and one of the most valuable businesses.</p>
</article><article>
<h2>Youtube</h2>
<p>Another American social networking and video-sharing site is YouTube, which has its headquarters in San Bruno, California. On February 14, 2005, Steve Chen, Chad Hurley, and Jawed Karim established it. It is owned by Google and is the second-most visited website, after Google Search. More than one billion hours of video are seen on YouTube each day by its more than 2.5 billion monthly subscribers.</p>
</article><article>
<h2>Facebook</h2>
<p>Facebook is an online social network and social media website that was launched in 2004 and is owned by Meta Platforms in the US. Together with fellow Harvard College students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz, and Chris Hughes, Mark Zuckerberg launched Facebook in 2004. Its name is derived from the Facebook directory often sent to students at American universities. Since 2006, anybody above the age of 13 is welcome to join. Harvard students were the first to do so, and afterwards students from other North American colleges. With 2.93 billion monthly active users, Facebook ranked third among the most popular websites in the world in July 2022.</p>
</article>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

CSS pode ser usado para estilizar o elemento:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><style><br>.all-tech {<br>margin: 0;padding: 5px;<br>background-color: lightpink;<br>}.all-tech<br>> h1, .browser {<br>margin: 15px;<br>padding: 10px;<br>}.tech{<br>background: lightgrey;<br>}.browser > h2,<br>p {<br>margin: 3px;<br>font-size: 80%;<br>}<br></style><br><br><article class="all-tech"><br><h1>Alphabet Inc</h1><br><article class="tech"><h2>Google by Alphabet Incorporation</h2><br><p>By revenue Alphabet is the third-largest technology corporation in the world and one of the most valuable businesses.</p><br></article><br><article class="tech"><h2>facebook</h2><br><p>Mark Zuckerberg launched Facebook in 2004. Its name is derived from the Facebook directory often sent to students at American universities.</p><br></article><article class="tech"><br><h2>Youtube</h2><p>It is also owned by Google and is the second-most visited website, after Google Search. More than one billion hours of video are seen on YouTube each day by its more than 2.5 billion monthly subscribers.</p><br></article><br></article><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

HTML <detalhes>

Um componente de divulgação é criado com o elemento HTML <details> exibindo informações somente quando o componente é pressionado em um estado aberto. Este elemento deve conter um resumo ou rótulo quando se trata de semântica HTML .

Por favor, consulte o exemplo abaixo para entender o funcionamento da tag HTML <details> :

Example: 

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<details>
<summary>Google</summary>
Google LLC is an American multinational technology company focusing on search engine technology, online advertising, cloud computing, computer software, quantum computing, e-commerce, artificial intelligence, and consumer electronics.
</details>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

CSS também pode ser aplicado ao elemento <detail> para torná-lo mais atraente aqui está como:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<style>
details {
border: 1px solid black;
border-radius: 3px;
padding: 5px 5px 0;
}
summary {
font-weight: bold;
margin: 0;
padding: 5px;
}
details[open] {
padding: 0.5em;
}
details[open] summary {
border-bottom: 1px solid black;
margin-bottom: 5px;
}
</style>
</head>
<body>
<details>
<summary>Google</summary>
Google LLC is an American multinational technology company focusing on search engine technology, online advertising, cloud computing, computer software, quantum computing, e-commerce, artificial intelligence, and consumer electronics.
</details>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aninhando <article> em <section> ou vice-versa?

<article> especifica conteúdo independente e independente. As seções de um documento são definidas pelo elemento <section> .

É possível aninhar esses elementos com base nas definições? Não é possível!

Assim, haverá páginas HTML com seções contendo artigos e artigos contendo seções no que diz respeito à semântica HTML .

Aqui está um exemplo:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<article>
<h1>Tesla Model 3</h1>
<p>Model 3 comes with the option of dual motor all-wheel drive, 20" Ãœberturbine Wheels and Performance Brakes for total control in all weather conditions.</p>
<section>
<h2>User Reviews</h2>
<article>
<header>
<h3>Sam says:</h3>
<p><time datetime="2023-06-05T22:43-08:00">3 hours ago</time></p>
</header>
<p>Fun to drive, muscle-car challenging performance, great driving range for the price.</p>
</article>
<article>
<header>
<h3>Daniel says:</h3>
<p><time datetime="2023-06-05T23:45-08:00">2 hours ago</time></p>
</header>
<p>Self-driving promise remains unrealized, too many controls buried in the central touchscreen, build quality needs finessing.</p>
</article>
</section>
</article>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Marca HTML <nav>:

<nav> representa um conjunto de links de navegação em HTML. Alguns links dentro de um documento NÃO devem estar dentro da tag <nav> .

Ele deve ser usado apenas para exibir links de navegação para blocos de texto significativos.

A renderização inicial do conteúdo pode ser perdida pelos navegadores.
Aqui estão alguns links para ajudá-lo a navegar:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Em um documento ou seção, a tag <footer> é usada para especificar o rodapé.

Na maioria dos casos, a tag <footer> contém os seguintes dados:

  • Informações sobre autoria.
  • Uma declaração de direitos autorais.
  • Entrar em contato.
  • Mapa do site.
  • Os principais links desta página.
  • Postagens relacionadas ou mais recentes..

Em um único documento, você pode ter várias tags <footer> .
Rodapés de documentos incluem o seguinte:

Example

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Author: Colin Smith</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Marca HTML <aside>:

Essa tag descreve o conteúdo que é diferente do conteúdo em que está inserido (como uma barra lateral).

A semântica HTML exige que o conteúdo de um <aside> seja indiretamente interconectado ao conteúdo circundante.
Você também pode exibir algum conteúdo fora do local onde está colocado:

Example

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
<p>The American business Meta Platforms is the owner of the social networking and social media website Facebook. The name of the social networking site, which was established in 2004 by Mark Zuckerberg and fellow Harvard College students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz, and Chris Hughes, is derived from the Face Book directories that are frequently distributed to students at American universities.</p><aside>
<h4>Mark Zuckerberg</h4>
<p>Mark Elliot Zuckerberg, an American business mogul, internet entrepreneur, and philanthropist, was born on May 14, 1984. He is renowned for co-founding Facebook, a social networking platform, and Meta Platforms, the corporation that owns it (formerly known as Facebook, Inc.), of which he serves as chairman, chief executive officer, and majority shareholder.</p>
</aside>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O seguinte código CSS pode ser usado para estilizar o elemento <aside> :

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><style><br>aside {<br>width: 33%;padding-left: 10px;<br>margin-left: 10px;<br>float: right;font-style: italic;<br>background-color: lightpink;<br>}<br></style><br><br><p>The American business Meta Platforms is the owner of the social networking and social media website Facebook. The name of the social networking site, which was established in 2004 by Mark Zuckerberg</p><aside><br><p>Mark Elliot Zuckerberg, an American business mogul, internet entrepreneur, and philanthropist, was born on May 14, 1984.</p><br></aside><p>He is renowned for co-founding Facebook, a social networking platform, and Meta Platforms, the corporation that owns it (formerly known as Facebook, Inc.), of which he serves as chairman, chief executive officer, and majority shareholder.</p><br><p>While a student at Harvard University, Eduardo Saverin, Andrew McCollum, Dustin Moskovitz, and Chris Hughes were his roommates when they founded Facebook in February 2004.</p><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Elementos HTML <figure> e <figcaption>

Na semântica HTML, as figuras são conteúdos independentes, como ilustrações, diagramas, fotos, listagens de código, etc.

A tag <figcaption> representa uma legenda para o elemento <figure> . As legendas das figuras podem ser colocadas como o primeiro ou o último filho de uma figura.

A tag <img> demonstra a imagem/ilustração existente.

Example

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
<figure>
<img src="https://mrexamples.com/wp-content/uploads/html_images/pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. -- Trulli, Puglia, Italy.</figcaption>
</figure>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Elementos semânticos: por que eles são importantes?

De acordo com a caracterização do MRC, uma web semântica permite que os usuários compartilhem e reutilizem dados em vários aplicativos, empresas e comunidades.

Uma abordagem semântica para elementos HTML

O HTML possui vários elementos semânticos, listados abaixo.

Marcação Visão geral
<tempo> Representa uma data/hora.
<à parte> Conteúdo que não faz parte de uma página.
<artigo> Conteúdo independente e independente.
<detalhes> Detalhes adicionais visíveis ou ocultos.
<figura> Fornece conteúdo independente, como ilustrações, diagramas, fotos, listagens de código, etc.
<figcaption> Especifica uma legenda para um elemento <figure>.
<marca> Texto que foi marcado ou realçado.
<rodapé> Cria um rodapé para um documento ou seção.
<seção> Um esboço das seções de um documento.
<nav> Caracteriza links de navegação.
<cabeçalho> Adiciona um cabeçalho a um documento ou seção.
<resumo> O cabeçalho de uma tag <details>.
<principal> Conteúdo principal do documento.

Dica: Visite nossa referência de tags HTML para ver uma lista completa de tags HTML.

Vantagens dos elementos semânticos HTML:

  1. Melhor acessibilidade: os elementos semânticos fornecem uma melhor estrutura à página da Web, tornando-a mais acessível para usuários com deficiência.
  2. SEO aprimorado: os elementos semânticos ajudam os mecanismos de pesquisa a entender o conteúdo, o que pode melhorar as classificações de pesquisa.
  3. Código mais claro: os elementos semânticos fornecem uma maneira clara e concisa de estruturar o código, tornando mais fácil para outros desenvolvedores entender e manter o código.
  4. À prova de futuro: os elementos semânticos são projetados para serem compatíveis com o futuro, garantindo que permaneçam relevantes à medida que os padrões da web evoluem.
  5. Consistência: O uso de elementos semânticos garante uma estrutura consistente, melhorando a experiência do usuário e facilitando as manutenções e atualizações.
Subscreva a nossa Newsletter abaixo para estar a par das informações técnicas deste site.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.