Thẻ <aside> trong HTML5
Sự khác nhau giữa HTML4.01 và HTML5
Cấu trúc<aside></aside> Show Code <aside> <h2>Tiêu đề cho aside</h2> <p>Nội dung cho aside</p> </aside>Trình duyệt hỗ trợ Yêu cầu phiên bản trình duyệt với mức tối thiểu được hỗ trợ cho thẻ <aside>: Trình duyệt dành cho PC:  Tag <aside>được hỗ trợ trong đa số các trình duyệt, tuy nhiên các trình duyệt IE6, IE7, IE8 muốn hiển thị đúng thì cần phải có thêm css và javascript hỗ trợ: Css viết: aside { display: block; }Javascript viết: Đoạn javascript này sử dụng chung cho cả các tag: <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]); } })();Thiết bị hỗ trợ Yêu cầu phiên bản hệ điều hành và trình duyệt với mức tối thiểu được hỗ trợ cho thẻ <aside>: ĐIỆN THOẠI (SMARTPHONE) Hệ điều hành Trình duyệt MÁY TÍNH BẢNG (TABLETS) Hệ điều hành Trình duyệt Các thuộc tính Global Thẻ này hỗ trợ tất cả các thuộc tính Global được miêu tả trong chương: Tổng hợp thuộc tính trong HTML Các thuộc tính sự kiện Thẻ này hỗ trợ tất cả các thuộc tính sự kiện được miêu tả trong chương: Tổng hợp sự kiện (Event) trong HTML Định nghĩa và cách sử dụngThẻ <aside> định nghĩa nội dung bên ngoài nội dung chính. Nội dung trong <aside> nên liên quan tới phần nội dung chính. 1. Thẻ aside trong HTML5 là gì?Aside dịch ra tiếng Anh có nghĩa là một bên, được dùng trong các vị trí nằm một bên như sidebar. Những vị trí này thường có nội dung liên quan đến chủ đề hiện tại của bài viết. Bạn không nên đặt thẻ aside bên trong thẻ article, hoặc nếu đặt thì nội dung của aside phải liên quan đến bài viết đó. Thông thường thì chúng ta chỉ đặt aside bên sidebar. Bạn có thể đặt các thẻ heading (h2 -> h6) vào bên trong thẻ aside. Cú pháp aside như sau: <aside></aside> 2. Cách sử dụng aside trong HTMLBạn cứ áp dụng theo định nghĩa của nó là được nhé. Sau đây là một vài ví dụ cơ bản. Đặt aside bên trong thẻ articleTrường hợp này thì dữ liệu của aside phải liên quan đến nội dung chính của bài viết article. <article> <header> <h2>Học HTML5 tại freetuts<h2> <p class="byline">by Cường Nguyễn</p> </header> <section> <h2>The Two Types of Wheat</h2> <p>There … to rise.</p> <p>Where … with less protein.</p> </section> <aside> HTMl5 có rất nhiều thẻ khác nhau ... </aside> </article> Đặt aside bên ngoài articleTrường hợp này thì nội dung của aside phải liên quan đến toàn bộ trang web. <aside> <h3>Học lập trình</h3> <a href="#">Học C++</a> <a href="#"> Học Javascript</a> <a href="#">Học Python</a> </aside> <article> <header> <h2>Học HTML5 tại freetuts<h2> <p class="byline">by Cường Nguyễn</p> </header> <section> <h2>The Two Types of Wheat</h2> <p>There … to rise.</p> <p>Where … with less protein.</p> </section> </article> Trên là cách dùng thẻ aside cơ bản trong HTML5. Chỉ cần bạn hiểu ý nghĩa của thẻ này là có thể áp dụng vào giao diện dự án thật của mình. Thẻ <article>article là phần tử để bao bọc nội dung độc lập, nó có thể là một bài post của diễn đàn, một bài viết của trang, một bài báo, một bình luận ... hoặc bất kỳ một nội dung độc lập nào. Thẻ <article> trong HTML5 được dùng thay thế cho thẻ <div> của HTML4. <article> <h2>Tiêu đề bài viết</h2> <p>Các nội dung bài viết</p> </article>Phần tử <article> có thể chứa các <article> khác. Các <article> bên trong trình bày các nội dung liên quan đến <article> bên ngoài. HTML <aside> Tag❮ Reference ❯
ExampleDisplay some content aside from the content it is placed in:
<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my
family!</p> More "Try it Yourself" examples below. Thẻ tag aside là gì?Tag aside là một thẻ tag mới trong html 5 giúpđịnh nghĩa nội dung bên ngoài nội dung chính. Chúng ta thường thấy tag aside bên phần sidebar của website. Nó có thể chứa tất cả các tag định dạng khác trong html. |
