Introdução
HTML semântico é um conceito importante no desenvolvimento web porque ajuda os motores de busca e as tecnologias de assistência a compreender melhor o conteúdo de um website. Um dos elementos que podem ser usados para criar HTML semântico é a tag <article>. Neste laboratório, vamos aprender a usar a tag <article> e como ela ajuda na criação de páginas web acessíveis.
Nota: Pode praticar a codificação em
index.htmle aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Depois, pode atualizar o separador Web 8080 para visualizar a página web.
Adicione a Estrutura HTML5
Crie um ficheiro index.html no seu editor de texto favorito e guarde o ficheiro.
Adicione a estrutura básica HTML5 ao ficheiro index.html. Isto inclui a declaração <!DOCTYPE html>, o elemento <html>, o elemento <head> e o elemento <body>.
<!doctype html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<!-- Add content here -->
</body>
</html>
Adicione uma Tag <article>
Dentro do elemento <body>, adicione uma tag <article>. Esta tag conterá o conteúdo principal da sua página web. A tag <article> tem uma tag de abertura e uma tag de fechamento.
<article>
<!-- Add main content here -->
</article>
Adicione Conteúdo ao Artigo
Dentro da tag <article>, adicione algum conteúdo que representará o conteúdo principal da página web. Isso pode ser qualquer coisa, como um artigo, uma publicação de blog ou uma descrição de produto.
<article>
<h1>My Awesome Article</h1>
<p>
This is the main content of my webpage. It is a really awesome article that
everyone should read.
</p>
<p>Here are some reasons why:</p>
<ul>
<li>It is well-written</li>
<li>It is informative</li>
<li>It is funny</li>
</ul>
</article>
Adicione a Tag Footer
Dentro da tag <article>, adicione uma tag <footer> para fornecer informações adicionais sobre o conteúdo.
<article>
<h1>My Awesome Article</h1>
<p>
This is the main content of my webpage. It is a really awesome article that
everyone should read.
</p>
<p>Here are some reasons why:</p>
<ul>
<li>It is well-written</li>
<li>It is informative</li>
<li>It is funny</li>
</ul>
<footer>
<p>
Published on <time datetime="2022-09-15">September 15th, 2022</time> by
<a href="#">John Doe</a>
</p>
</footer>
</article>
Salve o arquivo index.html e abra-o em um navegador web para ver a página web final com informações de contato.
Resumo
Usar a tag <article> é uma maneira fácil de criar HTML semântico e tornar seu website mais acessível. Ao usar a tag <article>, você pode fornecer informações adicionais sobre o conteúdo principal da sua página web, o que pode ajudar os mecanismos de busca e tecnologias assistivas a entender melhor seu website. Lembre-se de sempre validar seu código HTML para garantir que ele esteja livre de erros e atenda a todos os padrões necessários.
