As principais tags semânticas do HTML5

Semântica
O Que é?
é o estudo do significado. o
sentido, o que nós entendemos e
como interagimos com a língua
humana.
Em programação:
A semântica é complementar à sintaxe de programas
de computador, que se preocupa em descrever as
estruturas de uma linguagem de programação.
HTML5 Semântico
Elementos semânticos do HTML5 são aqueles que
descrevem claramente seu significado de uma maneira que
seja legível tanto para humanos quanto para máquinas.
Elementos como <header>, <footer> e <article>
(cabeçalho, rodapé e artigo, respectivamente, traduzidos
para o português) são considerados semânticos, pois eles
descrevem com precisão o propósito do elemento e o tipo
de conteúdo dentro dele.
<!DOCTYPE html>
<html lang="en">
ALGUMAS
<head>
<meta charset="UTF-8">
<title>Document</title>
TAGS
</head>
<body>
<header>
<h1>Vai na Web</h1>
<h2>escola de tecnologia <h2>
</header>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <header>
<title>Document</title> Usado para definir o cabeçalho da
</head>
página e introduzir o assunto da
<body>
página ou de um artigo, geralmente é
<header>
a primeira tag usada no site.
<h1>Vai na Web</h1>
<h2>escola de tecnologia <h2>
</header>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<nav>
<head>
</head>
<body> Representa uma lista de links internos
<main> ou externos na página.
<nav>
<a href="#about">Sobre Mim</a>
<a href="#history">Minha História</a>
<a href="#skills">Habilidades</a>
</nav>
</main>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<main>
</head> Define o conteúdo principal da sua
<body> página, deve ser único na página.
<main>
todo o conteúdo da página entra
aqui.
</main>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<section>
<head>
</head>
<body>
Representa uma seção dentro do seu
<main> site, como uma seção sobre um
<section> produto ou uma pessoa.
<h1>Sobre Mim</h1>
<p>Eu começei minha carreira no ano de
1990...<p>
</section>
</main>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<figure>
<head>
<figcaption>
</head>
<body>
<main>
Representa um conteúdo completo,
<figure> que pode ser utilizado sem
<img src="" alt="" />
<figcaption> legenda da imagen</figcaption>
dependências.
</figure>
</main>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<article>
<main>
<article> Representa um conteúdo completo,
<h2>O Chrome é o navegador da Web mais que pode ser utilizado sem
popular do mundo atualmente.</h2>
</article> dependências.
<article>
<h2>O Firefox é o segundo navegador mais
popular desde janeiro de 2018.>/h2>
</article>
</main>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<aside>
</head>
<body>
<main> Representa uma seção de conteúdo
<section>
<h1>Sobre Mim</h1> secundário e menos importante do
<p>Olá, meu nome é José e sou um guitarrista.</p> que o conteúdo usado nas sections,
</section>
</main> geralmente usado em menus laterais
<aside>
onde temos informações adicionais do
<h3>Bateria<h3>
<p>A guitarra é um instrumento de cordas</p> site.
</aside>
</body>
</html>
<div>
<!DOCTYPE html> Define uma divisão ou uma seção em
<html lang="en">
<head> um documento HTML.
<meta charset="UTF-8"> É usada como um contêiner para
</head> elementos HTML.
<body> Qualquer tipo de conteúdo pode ser
<main>
<div> colocado dentro da <div>.
O Chrome é o navegador da Web mais popular É um elemento de nível de bloco
do mundo atualmente.
</div> (ocupa toda a largura).
<div>
O Firefox é o segundo navegador mais popular
desde janeiro de 2018. Não tem valor semântico, sempre
</div> optar por usar dentro de uma tag
</main>
</body> semântica.
</html>
<!DOCTYPE html>
<span>
<html lang="en">
A tag é um contêiner embutido usado
<head>
<meta charset="UTF-8"> para marcar uma parte de um texto ou
uma parte de um documento.
</head>
<body> É muito parecida com o elemento <div> ,
<main> mas <div> é um elemento de nível de
<span>
<h3>Bateria<h3> bloco e <span>é um elemento embutido
<p>A guitarra é um instrumento de cordas</p> (Ocupa a largura necessária).
</span>
</main>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<footer>
<head>
</head>
<body>
<main> Usado para definir o rodapé da
página/seção ou de uma section e
</main>
<footer>
<p>Todos os direitos reservados.</p>
contém informações do autor, direitos
<a href="http://facebook.com/minhapagina">Facebook</a> autorais ou links relacionados ao
<a href="http://twitter.com/minhapagina">Twitter</a>
<a href="http://linkedin.com/minhapagina">Linkedin</a> conteudo da página/seção.
</footer>
</body>
</html>
início Produtos sobre
Header nav
Article
Section div div
Section span span
Section
Article
Main Aside
Footer
nav header
section article
conteúdo da nav span
footer main
aside
div
Legendas

As principais tags semânticas do HTML5

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

As principais tags semânticas do HTML5

Enviado por

Direitos autorais:

Formatos disponíveis

Semântica

Section div div

Section span span

conteúdo da nav span

Você também pode gostar