Carregando...

Principais Tags HTML5

Postado: 4 de outubro de 2023 Tempo de Leitura: 4 Minutos

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

Tags

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *