NỘI DUNG BÀI VIẾT
Trong bài viết này, mình sẽ giới thiệu tới bạn 7 lựa chọn thay thế thẻ div trong HTML.
Trong giai đoạn đầu của việc học cách cấu trúc một document HTML, không có gì lạ khi thấy hầu như các lập trình viên chỉ sử dụng thẻ div để cấu trúc.
Không có gì sai về mặt chức năng khi viết HTML theo cách này. Các trình duyệt sẽ vẫn có thể hiển thị nội dung của bạn cho người dùng. Vấn đề chính khi sử dụng nhiều thẻ div là chúng thiếu ý ngữ nghĩa. Viết HTML theo ngữ nghĩa mang lại ý nghĩa đánh dấu của bạn cho các trình duyệt web và trình đọc màn hình, có thể giúp SEO, giúp gỡ lỗi mã dễ dàng hơn và hơn thế nữa.
Theo W3C,
Phần tử div không có ý nghĩa đặc biệt gì cả… Mọi người được khuyến khích xem phần tử div như lựa chọn cuối cùng, vì không có phần tử nào khác phù hợp. Việc sử dụng các phần tử thích hợp hơn thay vì phần tử div dẫn đến khả năng tiếp cận tốt hơn cho người đọc và khả năng bảo trì dễ dàng hơn cho các lập trình viên
Khi HTML5 được phát hành vào năm 2014, nó đã giới thiệu một số phần và nhóm yếu tố mới mà các lập trình viên web có thể sử dụng để nâng cao ý nghĩa ngữ nghĩa HTML của họ.
7 lựa chọn thay thế thẻ div trong HTML
Phần tử Main
Phần tử main là một lựa chọn thay thế thẻ div. Nó cho các trình duyệt và trình đọc màn hình biết phần nào trong đánh dấu của bạn chứa phần nội dung chính trên một trang nhất định. Điều này có thể giúp truy cập lệnh bàn phím, phóng to trên trình duyệt di động và hơn thế nữa. Nó chỉ nên được sử dụng một lần trên mỗi trang.
<!-- other content -->
<main role="main">
<h1>Skateboards</h1>
<p>The skateboard is the way cool kids get around.</p>
</main>
<!-- other content -->Code language: HTML, XML (xml)Phần tử Section
Phần tử Section được sử dụng để nhóm nội dung theo chủ đề và đại diện cho một phần của tài liệu hoặc ứng dụng. Các phần có thể có phần tử header và footer riêng và có thể có nhiều phần tử Section được sử dụng trên một trang.
<!-- other content -->
<main role="main">
<section id="skateboards-intro">
<h1>Skateboards</h1>
<p>The skateboard is the way cool kids get around.</p>
</section>
<section id="skateboards-history">
<h1>History of Skateboards</h1>
<p>Skateboarding was born in the late 1940s or early 1950s.</p>
</section>
</main>
<!-- other content -->Code language: HTML, XML (xml)Phần tử Aside
Để thay thể thẻ div, bạn có thể dùng các phần tử Aside chủ yếu được sử dụng để đại diện cho một phần của trang chứa nội dung liên quan đến một phần nhất định. Bên cạnh thường được sử dụng làm thanh bên trái hoặc phải.
<!-- other content -->
<main role="main">
<section id="skateboards-intro">
<h1>Skateboards</h1>
<p>The skateboard is the way cool kids get around.</p>
</section>
<section id="skateboards-history">
<h1>History of Skateboards</h1>
<p>Skateboarding was born in the late 1940s or early 1950s.</p>
<aside id="timeline">
<p>1940s: Lorem Ipsum</p>
<p>1950s: Lorem Ipsum</p>
<p>1960s: Lorem Ipsum</p>
</aside>
</section>
</main>
<!-- other content -->Code language: HTML, XML (xml)Phần tử Article
Phần tử Article có thể được sử dụng cho các phần nội dung đứng 1 mình như các bài đăng trên blog, các bài báo và nhận xét của người dùng là một số trường hợp sử dụng có thể có của phần tử bài viết.
<!-- other content -->
<main role="main">
<section id="skateboards-intro">
<h1>Skateboards</h1>
<p>The skateboard is the way cool kids get around.</p>
</section>
<section id="skateboards-history">
<h1>History of Skateboards</h1>
<p>Skateboarding was born in the late 1940s or early 1950s.</p>
<aside id="timeline">
<p>1940s: Lorem Ipsum</p>
<p>1950s: Lorem Ipsum</p>
<p>1960s: Lorem Ipsum</p>
</aside>
</section>
<article class="blog-posts">
<header>
<h2>Why I Love Skateboarding</h2>
<p>By Tony Hawk</p>
</header>
<p>Skateboarding is the best! I love doing gnarly tricks 🤘</p>
</article>
</main>
<!-- other content -->Code language: HTML, XML (xml)Phần tử Blockquote
Phần tử Blockquote cũng có thể thay thế thẻ div. Nó đại diện cho nội dung đang được trích dẫn từ một nguồn bên ngoài (một người, tài liệu, tờ báo, nghiên cứu điển hình, v.v.). Nó thường được đi kèm với một phần tử footer bên trong để gán trích dẫn cho nguồn của nó.
<!-- other content -->
<main role="main">
<section id="skateboards-intro">
<h1>Skateboards</h1>
<p>The skateboard is the way cool kids get around.</p>
</section>
<section id="skateboards-history">
<h1>History of Skateboards</h1>
<p>Skateboarding was born in the late 1940s or early 1950s.</p>
<aside id="timeline">
<p>1940s: Lorem Ipsum</p>
<p>1950s: Lorem Ipsum</p>
<p>1960s: Lorem Ipsum</p>
</aside>
</section>
<article class="blog-posts">
<header>
<h2>Why I Love Skateboarding</h2>
<p>By Tony Hawk</p>
</header>
<p>Skateboarding is the best! I love doing gnarly tricks 🤘</p>
</article>
<blockquote cite="http://www.tonyhawkshreds.com">
"Skateboarding is life. The rest is just details."
<footer>- Tony Hawk</footer>
</blockquote>
</main>
<!-- other content -->Code language: HTML, XML (xml)Phần tử Nav
Như tên của nó, các phần tử Nav đại diện cho phần điều hướng của tài liệu. Phần tử điều hướng phải bao gồm các liên kết điều hướng chính cho một trang, ứng dụng, v.v.
<!-- other content -->
<nav id="main-navigation">
<ul>
<li><a href="#skateboards-intro"></a>Introduction to Skateboards</li>
<li><a href="#skateboards-history"></a>History of Skateboards</li>
</ul>
</nav>
<main role="main">
<section id="skateboards-intro">
<h1>Skateboards</h1>
<p>The skateboard is the way cool kids get around.</p>
</section>
<section id="skateboards-history">
<h1>History of Skateboards</h1>
<p>Skateboarding was born in the late 1940s or early 1950s.</p>
<aside id="timeline">
<p>1940s: Lorem Ipsum</p>
<p>1950s: Lorem Ipsum</p>
<p>1960s: Lorem Ipsum</p>
</aside>
</section>
<article class="blog-posts">
<header>
<h2>Why I Love Skateboarding</h2>
<p>By Tony Hawk</p>
</header>
<p>Skateboarding is the best! I love doing gnarly tricks 🤘</p>
</article>
<blockquote cite="http://www.tonyhawkshreds.com">
"Skateboarding is life. The rest is just details."
<footer>- Tony Hawk</footer>
</blockquote>
</main>
<!-- other content -->Code language: HTML, XML (xml)Phần tử Footer
Phần tử footer đại diện cho phần “footer” của tài liệu hoặc phần. Trong nhiều trang web, phần tử footer sẽ chứa thông tin liên hệ và bản quyền, lời giới thiệu ngắn gọn về ‘giới thiệu’, các biểu trưng và liên kết trên mạng xã hội, v.v.
<!-- other content -->
<nav id="main-navigation">
<ul>
<li><a href="#skateboards-intro"></a>Introduction to Skateboards</li>
<li><a href="#skateboards-history"></a>History of Skateboards</li>
</ul>
</nav>
<main role="main">
<section id="skateboards-intro">
<h1>Skateboards</h1>
<p>The skateboard is the way cool kids get around.</p>
</section>
<section id="skateboards-history">
<h1>History of Skateboards</h1>
<p>Skateboarding was born in the late 1940s or early 1950s.</p>
<aside id="timeline">
<p>1940s: Lorem Ipsum</p>
<p>1950s: Lorem Ipsum</p>
<p>1960s: Lorem Ipsum</p>
</aside>
</section>
<article class="blog-posts">
<header>
<h2>Why I Love Skateboarding</h2>
<p>By Tony Hawk</p>
</header>
<p>Skateboarding is the best! I love doing gnarly tricks 🤘</p>
</article>
<blockquote cite="http://www.tonyhawkshreds.com">
"Skateboarding is life. The rest is just details."
<footer>- Tony Hawk</footer>
</blockquote>
</main>
<footer>
<p>© 2019 Skateboards, Inc.</p>
<a href="https://twitter.com/@skateboards">Twitter Profile</a>
<a href="https://www.facebook.com/Skateboards">Facebook Page</a>
</footer>
<!-- other content -->Code language: HTML, XML (xml)Kết luận
Trên đây là 7 lựa chọn thay thế thẻ div trong HTML. Bây giờ chúng ta đã biết về một số lựa chọn thay thế được tối ưu hóa về mặt ngữ nghĩa cho phần tử div, làm cách nào để biết khi nào sử dụng chúng? Và khi nào (nếu có) thì vẫn sử dụng các phần tử div nhỉ? Hãy truy cập vào HTML5 Doctor bởi nó có một sơ đồ tiện dụng thực sự để giúp trả lời câu hỏi đó.
Cảm ơn bạn đã theo dõi bài viết!
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU
KHOÁ HỌC BOOTCAMP JAVA/PHP/.NET TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG
