Section trong html là một phần quan trọng trong html 5. Với giá trị của semantic trong code. Giờ đây, khi việc sắp xếp dữ liệu trên internet đang ngày càng quan trọng thì việc sử dụng các ngữ nghĩa trong lập trình html cần thiết hơn bao giờ hết.
Section tag trong html
Phần tử <section> dùng trong html mục đích để phân chia logic một page, một article. Vậy <section> hay được sử dụng chia trong Article.
Phần tử HTML <section> đại diện cho một phần độc lập chung của tài liệu, phần tử này không có phần tử ngữ nghĩa cụ thể hơn để đại diện cho phần đó. Các phần phải luôn có một heading, với rất ít trường hợp ngoại lệ.
Ví dụ như 1 trang bình thường có <section> chứa menu, <section> khác chứa side bar, <section>thông tin thêm …
Thuộc tính
Phần tử này chỉ bao gồm các thuộc tính Global.
Cách sử dụng
Như đã đề cập ở trên, <section> là một phần tử phân đoạn chung và chỉ nên được sử dụng nếu không có phần tử cụ thể hơn để đại diện cho nó. Ví dụ: menu điều hướng nên được bao bọc trong phần tử <nav>, nhưng danh sách kết quả tìm kiếm hoặc màn hình bản đồ và các điều khiển của nó không có các phần tử cụ thể và có thể được đặt bên trong <section>.
Cũng nên xem xét các trường hợp sau:
Nếu nội dung của phần tử đại diện cho một đơn vị nội dung độc lập có ý nghĩa được cung cấp như một phần độc lập (ví dụ: một bài đăng blog hoặc nhận xét trên blog hoặc một bài báo), thì phần tử <article> sẽ là lựa chọn tốt hơn.
Nếu nội dung đại diện cho thông tin tiếp tuyến hữu ích hoạt động cùng với nội dung chính, nhưng không trực tiếp là một phần của nó (như các liên kết có liên quan hoặc tiểu sử tác giả), hãy sử dụng <aside>.
Nếu nội dung đại diện cho vùng nội dung chính của tài liệu, hãy sử dụng <main>.
Nếu bạn chỉ sử dụng phần tử làm trình bao bọc tạo kiểu, hãy sử dụng <div>. Một quy tắc chung là một <section> phải xuất hiện một cách hợp lý trong đường viền của tài liệu.
Để nhắc lại, mỗi <section> phải được xác định, thường bằng cách bao gồm một heading (phần tử <h1> – <h6>) như một phần tử con của phần tử <section>, nếu có thể. Xem bên dưới để biết các ví dụ về nơi bạn có thể thấy một <section> không có heading.
Sử dụng một Section không có heading
Các trường hợp mà bạn có thể thấy <section> được sử dụng mà không có heading thường được tìm thấy trong phần ứng dụng web / giao diện người dùng hơn là trong cấu trúc tài liệu truyền thống. Trong một tài liệu, không thực sự có ý nghĩa gì nếu có một phần nội dung riêng biệt mà không có heading để mô tả nội dung của nó. Các heading như vậy hữu ích cho tất cả người đọc, nhưng đặc biệt hữu ích cho người dùng các công nghệ hỗ trợ như trình đọc màn hình và chúng cũng tốt cho SEO.
Tuy nhiên, hãy xem xét một cơ chế điều hướng phụ. Nếu điều hướng chung đã được bao bọc trong một phần tử <nav>, bạn có thể hiểu một cách có thể bao bọc một menu trước đó / tiếp theo trong một <section>:
<section> <a href="#">Previous article</a> <a href="#">Next article</a> </section>
Hoặc một số loại button để điều khiển ứng dụng của bạn thì sao? Điều này có thể không nhất thiết phải cần một heading, nhưng nó vẫn là một phần riêng biệt của tài liệu:
<section> <button >Reply</button> <button >Forward</button> <button >Delete</button> </section>
Các phần không có heading sẽ không xuất hiện trong đề cương tài liệu. Nếu bạn muốn buộc phải bao gồm một khối HTML như vậy bên trong đường viền tài liệu nhưng không ảnh hưởng đến kết quả trực quan theo bất kỳ cách nào, bạn có thể bao gồm một heading nhưng ẩn nó đi:
<section> <h2 class="hidden">Controls</h2> <button class="reply">Reply</button> <button class="reply-all">Reply to all</button> <button class="fwd">Forward</button> <button class="del">Delete</button> </section>
Đảm bảo sử dụng một số công nghệ hỗ trợ và CSS thân thiện với trình đọc màn hình để ẩn nó như display:none;
Tùy thuộc vào nội dung, bao gồm cả một heading cũng có thể tốt cho SEO, vì vậy nó là một lựa chọn cần xem xét.
Adress Element trong html
Phần tử HTML <address> chỉ ra rằng HTML kèm theo cung cấp thông tin liên hệ cho một người hoặc nhiều người hoặc cho một tổ chức.
Thông tin liên hệ được cung cấp bởi nội dung của phần tử <address> có thể ở bất kỳ hình thức nào phù hợp với ngữ cảnh và có thể bao gồm bất kỳ loại thông tin liên hệ nào cần thiết, chẳng hạn như địa chỉ thực, URL, địa chỉ email, số điện thoại, phương tiện truyền thông xã hội , tọa độ địa lý, v.v. Phần tử <address> phải bao gồm tên của người, con người hoặc tổ chức mà thông tin liên hệ đề cập đến.
<address> có thể được sử dụng trong nhiều ngữ cảnh khác nhau, chẳng hạn như cung cấp thông tin liên hệ của doanh nghiệp trong tiêu đề trang hoặc chỉ ra tác giả của bài báo bằng cách đưa phần tử <address> vào trong <article>.
Thuộc tính
Phần tử này chỉ bao gồm các thuộc tính toàn cục.
Cách sử dụng
Phần tử <address> chỉ có thể được sử dụng để đại diện cho thông tin liên hệ cho tổ tiên phần tử <article> hoặc <body> gần nhất của nó.
Phần tử này không được chứa nhiều thông tin hơn thông tin liên hệ, chẳng hạn như ngày xuất bản (thuộc phần tử <time>).
Thông thường, một phần tử <address> có thể được đặt bên trong phần tử <footer> của phần hiện tại, nếu có.
Ví dụ về Adress tag
Ví dụ này minh họa việc sử dụng <address> để phân ranh giới thông tin liên hệ của tác giả bài báo.
<p>Contact the author of this page:</p> <address> <a href="mailto:jim@rock.com">jim@rock.com</a><br> <a href="tel:+13115552368">(311) 555-2368</a><br> <a href="tel:+13115552368">facebook</a><br> <a href="tel:+13115552368">zalo</a><br> </address>
Mặc dù nó hiển thị văn bản với cùng kiểu mặc định như các phần tử <i> hoặc <em>, nhưng sẽ thích hợp hơn khi sử dụng <address> khi xử lý thông tin liên hệ, vì nó truyền tải thêm thông tin ngữ nghĩa.
Article tag trong html
Phần tử HTML <article> đại diện cho một thành phần độc lập trong tài liệu, trang, ứng dụng hoặc trang web, nhằm mục đích phân phối độc lập hoặc có thể tái sử dụng (ví dụ: trong phân phối). Ví dụ bao gồm: một bài đăng trên diễn đàn, một tạp chí hoặc bài báo hoặc một mục blog, một thẻ sản phẩm, một nhận xét do người dùng gửi, một tiện ích hoặc tiện ích tương tác hoặc bất kỳ mục nội dung độc lập nào khác.
Một tài liệu nhất định có thể có nhiều bài báo trong đó; ví dụ: trên một blog hiển thị văn bản của từng bài báo lần lượt khi người đọc cuộn, mỗi bài đăng sẽ được chứa trong một phần tử <article>, có thể có một hoặc nhiều <section> bên trong.
Thuộc tính
Phần tử này chỉ bao gồm các thuộc tính toàn cục.
Cách sử dụng
Mỗi <article> phải được xác định, thường bằng cách bao gồm một tiêu đề (phần tử <h1> – <h6>) như một phần tử con của phần tử <article>.
Khi một phần tử <article> được lồng vào nhau, phần tử bên trong đại diện cho một bài viết liên quan đến phần tử bên ngoài. Ví dụ: các nhận xét của một bài đăng trên blog có thể là các phần tử <article> được lồng trong <article> đại diện cho bài đăng trên blog.
Thông tin tác giả của phần tử <article> có thể được cung cấp thông qua phần tử <address>, nhưng nó không áp dụng cho các phần tử <article> lồng nhau.
Ngày và giờ xuất bản của phần tử <article> có thể được mô tả bằng cách sử dụng thuộc tính datetime của phần tử <time>. Lưu ý rằng thuộc tính pubdate của <time> không còn là một phần của tiêu chuẩn W3C HTML5.
Ví dụ về article tag
<article class="forecast">
<h1>Thời tiết Hồ Chí Minh</h1>
<article>
<h2>05 March 2021</h2>
<p>Rain.</p>
</article>
<article>
<h2>06 March 2021</h2>
<p>Nóng.</p>
</article>
<article>
<h2>07 March 2021</h2>
<p>Gió.</p>
</article>
</article>Aside tag trong html
Phần tử HTML đại diện cho một phần của tài liệu mà nội dung của nó chỉ liên quan gián tiếp đến nội dung chính của tài liệu. Aside thường được trình bày dưới dạng thanh side bar hoặc call-out box.
Thuộc tính
Phần tử này chỉ bao gồm các thuộc tính toàn cục.
Cách sử dụng
Không sử dụng phần tử để gắn thẻ văn bản trong ngoặc đơn, vì loại văn bản này được coi là một phần của luồng chính.
Ví dụ này sử dụng để đánh dấu một đoạn trong một bài báo. Đoạn văn chỉ liên quan gián tiếp đến nội dung bài viết chính:
<p>Thông tin chính của chủ đề</p>
<aside>
<p>Thông tin liên quan bên lề chủ đề</p>
</aside>
<p>Thông tin chính chủ đề</p>Footer tag trong html
Phần tử HTML <footer> đại diện cho chân trang cho nội dung phân đoạn gần nhất hoặc phần tử gốc phân đoạn. <footer> thường chứa thông tin về tác giả của phần, dữ liệu bản quyền hoặc liên kết đến các tài liệu liên quan.
Thuộc tính
Phần tử này chỉ bao gồm các thuộc tính toàn cục.
Cách sử dụng
Đính kèm Adress tag về tác giả trong phần tử <address> có thể được đưa vào phần tử <footer>.
Phần tử <footer> không phải là nội dung phân đoạn và do đó không giới thiệu một phần mới trong dàn bài.
Các ví dụ
<article>
<h1>Cách sử dụng Footer</h1>
<ol>
<li>Sử dụng đoạn cuối bài viết.</li>
<li>chứa thông tin dữ liệu, bản quyền.</li>
</ol>
<footer>
<p>© 2021 websitehcm.com</p>
</footer>
</article>
Trước khi phát hành Safari 13, vai trò mốc của contentinfo không được VoiceOver thể hiện đúng cách. Nếu cần hỗ trợ các trình duyệt Safari cũ, hãy thêm role = “contentinfo” vào <footer> để đảm bảo mốc sẽ được hiển thị đúng cách.
Header tag trong html
Phần tử HTML <header> đại diện cho nội dung giới thiệu, thường là một nhóm hỗ trợ giới thiệu hoặc điều hướng. Nó có thể chứa một số thành phần tiêu đề nhưng cũng có thể là biểu trưng, biểu mẫu tìm kiếm, tên tác giả và các thành phần khác.
Cách sử dụng
Phần tử <header> không phải là phân đoạn nội dung và do đó không giới thiệu một phần mới trong dàn bài. Điều đó nói rằng, phần tử <header> thường chứa tiêu đề của phần xung quanh (phần tử h1 – h6), nhưng điều này không bắt buộc.
Mặc dù phần tử <header> không được đưa vào các thông số kỹ thuật cho đến HTML5, nhưng nó thực sự đã tồn tại ở giai đoạn đầu của HTML. Như đã thấy trong trang web đầu tiên, ban đầu nó được sử dụng làm phần tử <head>. Tại một số thời điểm, nó đã được quyết định sử dụng một tên khác. Điều này cho phép <header> tự do đảm nhận một vai trò khác sau này.
Thuộc tính
Phần tử này chỉ bao gồm các thuộc tính toàn cục.
Các ví dụ
<header class="page-header">
<h1>đây là header</h1>
</header>
<main>
<p>nội dung mô tả <em>so</em> ở đây</p>
</main>Phần tử <header> xác định mốc biểu ngữ khi ngữ cảnh của nó là phần tử <body>. Phần tử tiêu đề HTML không được coi là mốc biểu ngữ khi nó là con của phần tử <article>, <aside>, <main>, <nav> hoặc <section>.
Heading trong html
Các phần tử HTML <h1> đến <h6> đại diện cho sáu cấp độ của tiêu đề phần. <h1> là cấp phần cao nhất và <h6> là cấp thấp nhất.
Thuộc tính
Các phần tử này chỉ bao gồm các thuộc tính toàn cục.
Thuộc tính align đã lỗi thời; không sử dụng nó.
Cách sử dụng
Thông tin heading có thể được sử dụng bởi tác nhân người dùng để xây dựng mục lục cho tài liệu một cách tự động.
Tránh sử dụng các phần tử tiêu đề để thay đổi kích thước văn bản. Thay vào đó, hãy sử dụng thuộc tính kích thước phông chữ CSS.
Tránh bỏ qua các cấp tiêu đề: luôn bắt đầu từ <h1>, tiếp theo là <h2>, v.v.
Chỉ sử dụng một <h1> trên mỗi trang hoặc chế độ xem. Nó phải mô tả ngắn gọn mục đích tổng thể của nội dung.
Nhiều phần tử <h1> trên một trang
Đặc tả HTML cho phép sử dụng nhiều hơn một <h1>, nhưng không được coi là phương pháp hay nhất. Chỉ sử dụng một <h1> có lợi cho người dùng trình đọc màn hình.
Đặc tả HTML bao gồm khái niệm về một phác thảo được hình thành bằng cách sử dụng các phần tử <section>. Nếu điều này được triển khai, nó sẽ cho phép sử dụng nhiều phần tử <h1>, cung cấp cho tác nhân người dùng — bao gồm cả trình đọc màn hình — một cách để hiểu rằng một <h1> được lồng bên trong một phần đã xác định là một tiêu đề phụ. Chức năng này chưa bao giờ được triển khai; do đó điều quan trọng là sử dụng các tiêu đề của bạn để mô tả dàn ý của tài liệu.
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
Main tag trong html
Phần tử HTML <main> là thể hiện nội dung chính của tag <body> của tài liệu html. Khu vực này mang nội dung chính bao gồm thông tin của nội dung, nội dung liên quan trực tiếp đến vấn đề hoặc nội dung có tính mở rộng chủ đề.
Thuộc tính
Phần tử này chỉ bao gồm các thuộc tính chung.
Cách sử dụng
Nội dung của phần tử <main> phải là duy nhất cho tài liệu. Không nên đưa nội dung lặp lại trên một tập hợp tài liệu hoặc phần tài liệu như thanh bên, liên kết điều hướng, thông tin bản quyền, biểu trưng trang web và biểu mẫu tìm kiếm trừ khi biểu mẫu tìm kiếm là chức năng chính của trang.
<main> không đóng góp vào dàn bài của tài liệu; nghĩa là, không giống như các phần tử như <body>, các tiêu đề như <h2>, v.v., <main> không ảnh hưởng đến khái niệm của DOM về cấu trúc của trang. Đó là thông tin nghiêm ngặt.
Phần tử <main> hoạt động giống như một vai trò mốc chính. Các mốc có thể được sử dụng bằng công nghệ hỗ trợ để nhanh chóng xác định và điều hướng đến các phần lớn của tài liệu. Ưu tiên sử dụng phần tử <main> hơn khai báo role = “main”, trừ khi có những lo ngại về hỗ trợ trình duyệt cũ.
<body>
<a href="#main-content">điều hướng đến id main</a>
<main id="main-content">
<!-- main page content -->
</main>
</body>Bỏ qua điều hướng
Bỏ qua điều hướng, còn được gọi là “bỏ qua”, là một kỹ thuật cho phép người dùng công nghệ hỗ trợ nhanh chóng bỏ qua các phần lớn nội dung lặp lại (điều hướng chính, biểu ngữ thông tin, v.v.). Điều này cho phép người dùng truy cập nội dung chính của trang nhanh hơn.
Việc thêm thuộc tính id vào phần tử <main> sẽ cho phép nó trở thành mục tiêu của liên kết điều hướng bỏ qua.
Chế độ đọc
Chức năng chế độ trình đọc trình duyệt tìm kiếm sự hiện diện của phần tử <main>, cũng như các phần tử phân đoạn nội dung và tiêu đề khi chuyển đổi nội dung thành một chế độ xem trình đọc chuyên biệt.
Nav tag trong html
Phần tử HTML <nav> đại diện cho một phần của trang có mục đích là cung cấp các liên kết điều hướng, trong tài liệu hiện tại hoặc đến các tài liệu khác. Các ví dụ phổ biến về phần điều hướng là menu, mục lục và chỉ mục.
Thuộc tính
Phần tử này chỉ bao gồm các thuộc tính chung.
Cách sử dụng
Nó không cần thiết cho tất cả các liên kết được chứa trong một phần tử <nav>. <nav> chỉ dành cho khối liên kết điều hướng chính; thường thì phần tử <footer> thường có một danh sách các liên kết không cần phải có trong phần tử <nav>.
Một tài liệu có thể có một số phần tử <nav>, ví dụ, một phần tử để điều hướng trang web và một phần tử để điều hướng trong trang. aria-labellingby có thể được sử dụng trong trường hợp này để thúc đẩy khả năng tiếp cận, xem ví dụ.
Tác nhân người dùng, chẳng hạn như trình đọc màn hình nhắm mục tiêu người dùng bị vô hiệu, có thể sử dụng phần tử này để xác định xem có nên bỏ hiển thị ban đầu của nội dung chỉ điều hướng hay không.
Các ví dụ
Trong ví dụ này, một khối <nav> được sử dụng để chứa một danh sách không có thứ tự (<ul>) các liên kết. Với CSS thích hợp, điều này có thể được trình bày dưới dạng thanh bên, thanh điều hướng hoặc trình đơn thả xuống.
<nav class="menu">
<ul>
<li><a href="#">Trang chủ</a></li>
<li><a href="#">Liên hệ</a></li>
<li><a href="#">Giới thiệu</a></li>
</ul>
</nav>
