Thẻ Semantic trong Html

Một thẻ được gọi là Semantic khi nó mô tả rõ ràng ý nghĩa của nó đối với cả trình duyệt và nhà phát triển. Ví dụ về các thẻ Semantic : <form>, <table>, và <article>. Các bạn nghe tên là có thể xác định được rõ ràng nội dung của nó rồi đúng không. Nó sẽ khác với các thẻ còn lại như <div>và <span>

Nhiều trang web chứa mã HTML như: <div id="nav"> <div class="header"> <div id="footer"> để biểu thị điều hướng, đầu trang và chân trang.

Trong Html các thẻ Semantic  được sử dụng để xác định các phần khác nhau của trang web:  

Thẻ <section>:  xác định một phần trong tài liệu.

Ví dụ về nơi một thẻ <section> có thể được sử dụng để chứa:

• + Chương
• + Giới thiệu
• + Mục tin tức
• + Thông tin liên lạc

Một trang web thường có thể được chia thành các phần để giới thiệu, nội dung và thông tin liên hệ.

<section>
<h1>Giới thiệu</h1>
<p>Minacode được thành lập năm 1945 khi nạn đói…. </p>
</section>

<section>
<h1>Dịch vụ</h1>
<p>Minacode chuyên chia sẻ kiến thức lập trình Fullstack…</p>
</section>

Thẻ <article>: chỉ định nội dung độc lập, khép kín thường dùng cho Bài viết. Một bài viết phải có ý nghĩa riêng của nó và có thể xuất hiện một cách độc lập với phần còn lại của trang web.

Ví dụ về nơi <article>phần tử có thể được sử dụng:

• + Bài đăng trên diễn đàn
• + Bài đăng trên blog
• + Ý kiến ​​người sử dụng
• + Sản phẩm
• + Bài báo

<article>
<h2>Html</h2>
<p> HTML là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web trên World Wide Web.</p>
</article>

<article>
<h2>Css</h2>
<p> Trong môn tin học, các tập tin định kiểu theo tầng – dịch từ tiếng Anh là Cascading Style Sheets.</p>
</article>

<article>
<h2>Javascript</h2>
<p> JavaScript, theo phiên bản hiện hành, là một ngôn ngữ lập trình được phát triển từ các ý niệm nguyên mẫu.</p>
</article>

Thẻ <header>: Là thành phần chứa nội dung giới thiệu hoặc một tập hợp các thanh điều hướng.

Một <header>phần tử thường chứa:

• + Một hoặc nhiều thành phần tiêu đề (<h1> - <h6>)
• + Logo hoặc biểu tượng
• + Thanh điều hướng Nav

Lưu ý: Bạn có thể có nhiều thẻ <header> trong một tài liệu Html. Tuy nhiên, <header> không thể đặt trong thẻ <footer> hoặc thẻ <address> khác <header>.

Thẻ <footer>:  xác định chân trang cho tài liệu Html

Một thẻ <footer> thường chứa:

• + Thông tin tác giả
• + Thông tin bản quyền
• + Thông tin liên lạc
• + Sơ đồ trang web
• + Liên kết quay lại đầu trang
• + Tài liệu liên quan

Bạn có thể có nhiều thẻ <footer> trong một tài liệu.

<footer>
  <p>Bản quyền thuộc về minacode.net</p>
</footer>

Thẻ <nav>: xác định một tập hợp các liên kết điều hướng.

Lưu ý rằng KHÔNG phải tất cả các liên kết của tài liệu đều phải nằm trong một thẻ <nav>. Thẻ <nav> chỉ dành cho các khối liên kết điều hướng chính.

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

Thẻ <aside> xác định một số nội dung ngoài nội dung được đặt trong đó (như thanh một bên). Nội dung trong thẻ <aside> phải liên quan gián tiếp đến nội dung xung quanh.

Thẻ <figure> xác định nội dung độc lập, như hình minh họa, sơ đồ, ảnh, danh sách mã, v.v.

Thẻ <figcaption> xác định chú thích cho một thẻ <figure>. Thẻ <figcaption> có thể được đặt làm phần tử đầu tiên hoặc phần tử con cuối cùng của một thẻ <figure>

<figure>
  <img src="banner.jpg" alt="Minacode-Banner">
  <figcaption>Da Năng – Viet Nam.</figcaption>
</figure>

>>Còn tiếp nhé anh em>>