A tag de artigo em HTML5
Neste artigo vamos aprender como usar a tag de artigo em HTML5, assim você saberá quando usar a tag de artigo e quando usar a tag de seção.
No artigo anterior, aprendemos a estrutura de um template HTML5 padrão, mas apenas aprendemos como usá-lo de forma simples, então neste artigo vamos aprofundar um pouco mais o que é declarar um artigo em html5 . Cada artigo é um registro, e vamos tratá-lo como uma parte que inclui cabeçalho e rodapé.
Antes de ler este artigo, você deve ver a lição de estrutura HTML5, pois não vou explicar a estrutura de uma página web feita de HTML5.
1. O que é a tag de artigo em HTML5?
Artigo é uma tag HTML adicionada na versão HTML5, é usada para declarar a estrutura dos artigos a serem exibidos na página web.
A tag de artigo é usada em páginas sobre listagens de artigos ou detalhes de artigos. Dentro de cada artigo você também pode declarar outras tags de cabeçalho, que é o título de cada artigo.
<article></article>Em termos de propriedades, a tag article é como uma tag div, ou seja, exibe um bloco com largura de 100% e altura dependendo do seu conteúdo.
2. Adicionar artigo HTML5 ao layout
Primeiro, veja o código da estrutura HTML5 abaixo:
<!doctype html> <html lang="vi"> <head> <meta charset="utf-8" /> <title>Chương Trình HTML Đầu Tiên</title> </head> <body> <header> <h1>HTML5 Cho Người Mới Bắt Đầu Tại web888.vn</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Serie</a></li> <li><a href="#">Tutorial</a></li> <li><a href="#">Ebook</a></li> </ul> </nav> <section> <article> <header> <hgroup> <h1>Trung Quốc vi phảm chủ quyền biển Việt Nam</h1> <h2>Bản Tin 24/7</h2> </hgroup> </header> <p>Trung quốc xâm phạm vùng biển thuộc chủ quyền việt nam một cách trắng trợn</p> <footer> <p>Tác giả: thehalfheart - Đăng ngày: 08-05-2014</p> </footer> </article> </section> <aside> <h3>Tuts HTML</h3> Học Lập Trình HTML5 </aside> <footer> Copyright 2014 By web888.vn </footer> </body> </html> Nesta seção, o header e nav, side e footer ainda são os mesmos do post anterior, a própria section possui mais algumas tags dentro, que são:
<section> <article> <header> <hgroup> <h1>Trung Quốc vi phảm chủ quyền biển Việt Nam</h1> <h2>Bản Tin 24/7</h2> </hgroup> </header> <p>Trung quốc xâm phạm vùng biển thuộc chủ quyền việt nam một cách trắng trợn</p> <footer> <p>Tác giả: thehalfheart - Đăng ngày: 08-05-2014</p> </footer> </article> </section> Nesta section , quero exibir um template de notícias, então criei um article , e no article há um header contendo o título, uma tag p contendo o conteúdo e uma tag de footer contendo o autor e a data de postagem da notícia. No header , tenho 2 tags h1 e h2 , então usei uma tag hgroup para envolvê-lo, se você usar apenas uma tag h1 , não precisa usar uma tag hgroup adicional.
Todo o artigo, hgroup, cabeçalho, rodapé, seção, tags de lado são tags HTML5, o resto são tags HTML regulares.
E se você tiver uma lista de 2 registros? É muito simples, você só precisa copiar a tag do artigo em 2.
<section> <article> <header> <hgroup> <h1>Trung Quốc vi phảm chủ quyền biển Việt Nam</h1> <h2>Bản Tin 24/7</h2> </hgroup> </header> <p>Trung quốc xâm phạm vùng biển thuộc chủ quyền việt nam một cách trắng trợn</p> <footer> <p>Tác giả: thehalfheart - Đăng ngày: 08-05-2014</p> </footer> </article> <article> <header> <hgroup> <h1>Trung Quốc vi phảm chủ quyền biển Việt Nam</h1> <h2>Bản Tin 24/7</h2> </hgroup> </header> <p>Trung quốc xâm phạm vùng biển thuộc chủ quyền việt nam một cách trắng trợn</p> <footer> <p>Tác giả: thehalfheart - Đăng ngày: 08-05-2014</p> </footer> </article> </section>3. Conclusão
Através deste artigo, vemos que as tags de cabeçalho e rodapé não são apenas para o layout principal, mas você também pode usá-las dentro da tag do artigo . No cabeçalho temos a tag html5 hgroup para agrupar o cabeçalho. E claro, o uso dessas tags é opcional, ou seja, ao invés de usar a tag header do artigo, você pode usar uma tag div ou outra tag normal.
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
