- Página Inicial
- Códigos HTML Prontos
- Principais Tags HTML5
- Voltar
Principais tags HTML5
Neste artigo vamos apresentar as principais Tags semânticas HTML5, marcações que agregam mais significado ao HTML5.
Os elementos semânticos são aqueles usados para definir diferentes partes do documento HTML, ou seja, eles tem um significado. Exemplo, Uma tag <div> , por exemplo, não nos diz nada sobre qual será o conteúdo do elemento. Já as Tags HTML5 <header>, <footer> ,<section>, <article>, <nav>, <aside>,<main>, <figure> e entre outras nos diz exatamente qual será o conteúdo deste elemento.
o papel do HTML5 não é apenas estruturar documentos para web, mais também descrever o significado do conteúdo presente nesses documentos por meio de TAGS semânticas.
Veja como escrever o HTML5 de forma correta.
Conheça as principais tags semânticas do html5 a seguir.
<Header>
o header é utilizado para representar CABEÇALHO de um documento declarado no HTML.
Repare que podemos adicionar classes no css como “topo” para estilizar o mesmo.
Nele podemos inserir elementos como: h1 , Menu lista de navegação, e imagens.
<header class="topo"> <img src="logo.png" alt="logo.png" title="Logo"> <h1>Titulo</h1> <nav class="menu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="sobre.html">Sobre</a></li> <li><a href="categoria.html">Categoria</a></li> <li><a href="contato.html">Contato</a></li> </ul> </nav> </header>
<Section>
o elemento section representa uma seção dentro de um documento e geralmente contém um título, o qual é definido por meio de um h1, h2, h3, h4, h5 ou h6.
veja alguns exemplos abaixo:
<section> <h1>Html</h1> <p>Veja como escrever o html5 do jeito certo.</p> </section> <section> <h2>Css</h2> <p>Veja como escrever o Css do jeito certo e utilizável</p> </section> <section> <h3>Jquery</h3> <p>Veja como Aprender jquery de uma forma fácil, em poucas linhas de códigos.</p> </section>
<Article>
utilizamos o elemento article quando não precisamos declarar um conteúdo que não precisa de outro para fazer sentido em um documento HTML, é recomendado identificar cada article com um titulo.
Veja no código baixo:
<article> <h1>Html</h1> <p>Html semântico</p> </article> <article> <h1>Css</h1> <p>Como resetar a página web com css</p> </article>
<nav>
o elemento nav é utilizado quando precisamos representar um grupo de links de navegação.
Veja o exemplo abaixo:
<nav> <ul> <li><a href="index.html" title="início">Início</a></li> <li><a href="sobre.html" title="Sobre">Sobre</a></li> <li><a href="fotos.html" title="Galeria de Fotos">Galeria de Fotos</a></li> <li><a href="contato.html" title="Contato">Contato</a></li> </ul> </nav>
Podemos usar o elemento nav no header, sidebar, ou footer.
<aside>
o elemento aside é utilizado quando precisamos criar um conteúdo de apoio ao conteúdo Principal.
Veja o exemplo abaixo:
<aside> <nav> <ul> <li><a href="index.html" title="início">Início</a></li> <li><a href="sobre.html" title="Sobre">Sobre</a></li> <li><a href="fotos.html" title="Galeria de Fotos">Galeria de Fotos</a></li> <li><a href="contato.html" title="Contato">Contato</a></li> </ul> </nav> </aside>
<main>
o elemento main especifica o conteúdo principal, consequentemente, de maior relevância dentro de uma página.
Para ser considerada bem construída, uma página deve apresentar apenas um conteúdo principal.
a tag <main> deve ser utilizada apenas uma vez no html ou seja, é a tag de engloba todo conteúdo da pagina.
Veja o exemplo abaixo:
<header> <h1>Titulo</h1> </header> <main> <h1>Html semântico</h1> <p>Veja as principais tags do html</p> <article> <h2>Css</h2> <p>como utilizar as tag de forma certa no html</p> </article> </main> <footer> <p>By: Loop Nerd</p> </footer>
<figure>
o elemento figure é uma marcação de uso específico para inserção de uma figura .
para incluir a descrição dessa figura , podemos utilizar o elemento figure.
Veja o exemplo abaixo:
<figure> <img src="https://www.site.com.br/imagens/foto.jpg" title="Foto" alt="Foto"> </figure>
Veja abaixo o exemplo com <figcaption>
<figure> <img src="https://www.site.com.br/imagens/foto.jpg" title="Foto" alt="Foto"> <figcaption> Descrição - Foto 1</figcaption> </figure>
<footer>
o elemento footer representa um rodapé de um documento, como área presente no final de uma página web.
normalmente é utilizado para descrever informações de autoria
<footer> <p>Desenvolvido po: Loop nerd</p> </footer>
<a>
a principal função do elemento <a> é descrever um link , conectando os diversos documentos de um site e permitindo a navegação por esse conteúdo.
Vaja o exemplo abaixo:
<a href="https://www.loopnerd.com.br/tag/html/" title="Html">html</a> <a href="https://www.loopnerd.com.br/tag/css/" title="Css">Css</a> <a href="https://www.loopnerd.com.br/tag/jquery/" title="Jquery">Jquery</a>
<em>
o elemento em é utilizado quando enfatizar um trecho ou palavra no texto, indicando que ela contribui de forma mais relevante para o sentido do conteúdo.
veja o exemplo abaixo:
<p> <em>Você sabe</em> escrever o html do jeito certo ?</p>
Dessa forma enfatizamos um trecho mais relevante da pergunta.
<strong>
o elemento strong também é utilizado para destacar uma parte do texto. sua principal diferença em relação ao elemento <em> é que pode alterar o propósito de uma frase, como vimos anteriormente.
veja o exemplo abaixo:
<p> Entender tags html é importante porque <strong>possibilita o desenvolvimento de soluções web moderna.</strong> </p>
<cite> e q
o elemento cite é utilizado para declarar que naquele trecho há uma citação , isto é, um trecho de texto que não foi escrito pelo autor do conteúdo. normalmente utiliza-se o cite em conjunto com elemento <q>, responsável por apresentar o conteúdo retirado de outro fonte.
veja o exemplo abaixo:
<p> <q> Frase do Chorão Charlie Brown Jr - <cite>Todos vivemos dias difíceis mas nada disso é em vão</cite> </q> </p>
<time>
o elemento time é utilizado para representar datas. Assim, caso seja necessário informar a data em que um conteúdo foi escrito, podemos declarar a TAG <time> e acrescentar a ela o atributo datetime para escrever a data de forma padronizada.
<time datetime="17/03/2021"> 17/03/2021</time>
Exemplo pratico:
a princípio temos o exemplo prático que demostramos passo a passo anteriormente.
Neste exemplo temos uma pagina de Curso de HTML, que contém um: cabeçalho, main dividido por section e um rodapé.
<body> <header> <h1>Curso de Html5 do Jeito Certo.</h1> </header> <main> <section> <h2>Html5</h2> <article> <h3>Html semântico</h3> <p>como escrever o html do jeito certo</p> </article> <article> <h3>Conhecendo as tags </h3> <p>como utilizar as tags de forma correta</p> </article> </section> <section> <h3>Css3</h3> <article> <h3>Design Responsivo</h3> <p>design responsivo para dispositivos móveis.</p> </article> <article> <h3>Design Responsivo</h3> <p>design responsivo para dispositivos móveis.</p> </article> </section> </main> <footer> <p>www.loopnerd.com.br - Todos os Direitos Reservados.</p> </footer> </body>
Publicado por: Loop Nerd
3.388 Visualizações
Deixe um comentário