HTML Semântico
Veja neste código-fonte um exemplo de uma página completamente organizada com o uso das principais tags do HTML semântico. Baixe agora!
Projeto já adicionado aos favoritos. Clique aqui para ver todos seus favoritos
Obrigado pela sua avaliação, deixe o seu feedback nos comentários :D
Semântica no texto
Neste vídeo apresentamos um exemplo do uso das tags semânticas que são usadas no nível do texto. Esse conjunto de marcações é utilizado para indicar, através do HTML, o sentido do texto. Para isso empregamos as seguintes tags:
<nav>
<ul>
<li><a href="#">favorito</a></li>
<li><a href="#">anotar</a></li>
<li><a href="#">dúvida?</a></li>
</ul>
</nav>
- Linhas 3 a 5: Usamos o elemento <a> para indicar que esses trechos do texto, presentes dentro dos itens da lista, representam links para outros documentos.
<p><strong>HTML</strong> (Hypertext Markup Language) é a linguagem base...</p>
- Linha 1: Aqui podemos ver o elemento <strong> sendo empregado para dar ênfase à palavra "HTML", indicando que esta é uma palavra que merece maior relevância e destaque em relação as demais presentes no texto.
<p>Publicado em
<time datetime="2017-02-14 00:00:00">2017</time>
</p>
- Linha 2: Usamos o elemento <time> para indicar que este fragmento do texto dentro do parágrafo representa uma data. Uma vez que o atributo datetime apresenta a data e a hora em um formato padrão reconhecível pela máquina, o formato da data dentro desta tag pode variar, apresentando inclusive apenas o ano, como visto acima.
Esse projeto faz parte da Série Dê o próximo passo após o HTML/CSS!