Tag article là gì | Cách sử dụng thẻ article trong html 5

Tag article là gì

Tag article là một thẻ mới trong html 5 giúp định nghĩa một bài viết, một nội dung riêng biệt nào đó. Thẻ tag article thường được sử dụng trong bài viết, bài đăng trên diễn đàn, tin tức, bình luận…

Bạn sẽ dễ dàng tìm thấy tag article trong những website mới của các tổ chức lớn. Ngay ở website của mình cũng đang sử dụng tag article. Mình khuyến khích các bạn nên thay đổi cấu trúc bài viết của mình từ div sang article. Nó giúp website của bạn tối ưu hơn trong bộ máy tìm kiếm của google.

Cú pháp sử dụng:

<article></article>

Thẻ html article được dùng trong bài viết là chủ yếu. Xem ví dụ ở dưới để hiểu hơn về thẻ tag cũng như ý nghĩa của nó này.

<article>
<h2>Cách sử dụng thẻ tag Article trong html</h2>
<p>Sử dụng rất đơn giản phải không nào..hehe</p>
</article>

Mẫu ví dụ trên sẽ hiện thị như thế này.

tag article là gì

Các trình duyệt hỗ trợ tag article

Các duyệt trình website hiện nay đều hỗ trợ hiện thị cho tag article. Nhưng với các phiên bản ie IE6, IE7, IE8 cần css và java để có thể xem được chính xác.

Đoạn css hỗ trợ ie

article {
    display: block;	
}

Đoạn javascript hỗ trợ ie.

Với đoạn javascript này các bạn có thể ứng dụng cho các tag khác như <section>, <article>, <hgroup>, <header>, <footer>, <nav>, <aside>, <figure>, <mark>, <time>, <ruby>, <rt>, <rp>.

(function (){
    var els = [	'section', 'article', 'hgroup', 'header', 'footer', 'nav', 'aside', 
	'figure', 'mark', 'time', 'ruby', 'rt', 'rp' ];
    for (var i=0; i<els.length; i++){
        document.createElement(els[i]);
        }
})();

Cách sử dụng tag article trong html.

Cách sử dụng tag article rất đơn giản. Các bạn có thể xem những mẫu ví dụ ở dưới để có thể áp thành thạo nha.

Mẫu ví dụ số 1:

<article>
  <h1>Học html cùng Alan Tien</h1>
  <p>Alan Tiến rất đẹp trai :D</p>
</article>

Mẫu ví dụ số 2: Các bạn có thể kết hợp các html khác để tạo ra một trang tin tức đẹp với đủ các thành phần.

<article>
  <h1>Tin bài viết</h1>
  <span class="meta">Tác giả</span>
  <div class="noidung">Nội dung tin tức trong ngày</div>
</article>

Thuộc tính cơ bản của tag article trong html

Cách sử dụng: <article thuoctinh=”giatri”></article>

Ví dụ

<article class="content">
<p>đây là ví dụ <p>
</article>
<style>
article.content{
 padding:10px;
 color:#aaa;
}
</style>

Tất cả thuộc tính tổng quát và thuộc tính sự kiện đều có thể áp dụng trong HTML5.

Lời kết về tag article

Như đã đề cập từ đầu phải, thẻ tag article rất quan trọng trong website. Nó giúp bạn rất nhiều trong việc tạo một trang bài viết. Hãy ứng dụng ngay tag article sau khi đọc xong bài này của mình nha. Và đừng quên theo dõi những bài học tiếp theo trong Series học HTML căn bản