Hướng dẫn HTML

TRANG CHỦ HTML Giới thiệu HTML Trình chỉnh sửa HTML HTML cơ bản Phần tử HTML Thuộc tính HTML Tiêu đề HTML Đoạn văn HTML Kiểu HTML Định dạng HTML Trích dẫn HTML Nhận xét HTML Màu HTML HTML CSS Liên kết HTML Hình ảnh HTML HTML Favicon Bảng HTML Danh sách HTML Khối HTML & Nội tuyến Các lớp HTML Id HTML Khung nội tuyến HTML HTML JavaScript Đường dẫn tệp HTML Đầu HTML Bố cục HTML HTML đáp ứng Mã máy tính HTML Ngữ nghĩa HTML Hướng dẫn kiểu HTML Thực thể HTML Biểu tượng HTML Biểu tượng cảm xúc HTML Bộ mã HTML Mã hóa URL HTML HTML so với XHTML

Biểu mẫu HTML

Biểu mẫu HTML Thuộc tính biểu mẫu HTML Phần tử biểu mẫu HTML Các loại đầu vào HTML Thuộc tính đầu vào HTML Thuộc tính biểu mẫu nhập HTML

Đồ họa HTML

HTML Canvas HTML SVG

HTML Media

HTML Media Video HTML Âm thanh HTML Trình cắm HTML HTML YouTube

API HTML

Vị trí địa lý HTML Kéo / thả HTML Lưu trữ web HTML Nhân viên web HTML HTML SSE

Ví dụ HTML

Ví dụ HTML HTML Quiz Bài tập HTML Chứng chỉ HTML Tóm tắt HTML Khả năng truy cập HTML

Tham chiếu HTML

Danh sách thẻ HTML Thuộc tính HTML Thuộc tính toàn cầu HTML Hỗ trợ trình duyệt HTML Sự kiện HTML Màu HTML HTML Canvas HTML Audio / Video HTML Doctypes Bộ ký tự HTML Mã hóa URL HTML Mã HTML Lang Tin nhắn HTTP Phương thức HTTP Công cụ chuyển đổi PX sang EM Các phím tắt bàn phím

Phần tử ngữ nghĩa HTML


Các yếu tố ngữ nghĩa = các yếu tố có một ý nghĩa.


Các yếu tố ngữ nghĩa là gì?

Phần tử ngữ nghĩa 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 yếu tố phi ngữ nghĩa : <div><span>- Không cho biết gì về nội dung của nó.

Ví dụ về các yếu tố ngữ nghĩa:,<form><table>- <article>Xác định rõ ràng nội dung của nó.


Các phần tử ngữ nghĩa trong HTML

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ó một số phần tử ngữ nghĩa có thể được sử dụng để xác định các phần khác nhau của trang web:  

  • <hạt>
  • <bên ngoài>
  • <chi tiết>
  • <figcaption>
  • <cấu hình>
  • <footer>
  • <header>
  • <chính>
  • <dấu>
  • <nav>
  • <phần>
  • <sơ lược>
  • <thời gian>
Phần tử ngữ nghĩa HTML


Phần tử <section> HTML

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

Theo tài liệu HTML của W3C: "Phần là một nhóm nội dung theo chủ đề, thường có tiêu đề."

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

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

Một trang web thông 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ệ.

Thí dụ

Hai phần trong một tài liệu:

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>


Phần tử HTML <article>

Phần <article>tử chỉ định nội dung độc lập, khép kín.

Một bài báo nên tự nó có ý nghĩa và có thể phân phối 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>có thể sử dụng phần tử:

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

Thí dụ

Ba bài báo có nội dung độc lập, khép kín:

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>

Ví dụ 2

Sử dụng CSS để tạo kiểu cho phần tử <article>:

<html>
<head>
<style>
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}

.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}

.browser {
  background: white;
}

.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>

<article class="all-browsers">
  <h1>Most Popular Browsers</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</article>

</body>
</html>

Lồng <article> trong <section> hay Vice Versa?

Phần <article> tử chỉ định nội dung độc lập, khép kín.

Phần <section>tử xác định phần trong tài liệu.

Chúng ta có thể sử dụng các định nghĩa để quyết định cách lồng các phần tử đó không? Không chúng tôi không thể!

Vì vậy, bạn sẽ tìm thấy các trang HTML có <section>phần tử chứa <article>phần tử và <article>phần tử chứa <section>phần tử.


Phần tử HTML <header>

Phần <header>tử đại diện cho một vùng chứa cho nội dung giới thiệu hoặc một tập hợp các liên kết điều hướng.

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

  • một hoặc nhiều phần tử tiêu đề (<h1> - <h6>)
  • logo hoặc biểu tượng
  • thông tin về quyền tác giả

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

Thí dụ

Tiêu đề cho một <article>: 

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

Phần tử HTML <footer>

Phần <footer>tử xác định chân trang cho tài liệu hoặc phần.

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

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

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

Thí dụ

Phần chân trang trong tài liệu:

<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>

Phần tử HTML <nav>

Phần <nav>tử 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 một tài liệu phải nằm bên trong một <nav>phần tử. Phần <nav>tử chỉ dành cho khối liên kết điều hướng chính.

Các trình duyệt, chẳng hạn như trình đọc màn hình cho người dùng bị vô hiệu, có thể sử dụng phần tử này để xác định xem có bỏ qua hiển thị ban đầu của nội dung này hay không.

Thí dụ

Một tập hợp các liên kết điều hướng:

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

Phần tử HTML <aside>

Phần <aside>tử xác định một số nội dung ngoài nội dung mà nó được đặt trong (như một thanh bên).

Nội <aside>dung cần liên quan gián tiếp đến nội dung xung quanh.

Thí dụ

Hiển thị một số nội dung ngoài nội dung mà nó được đặt trong:

<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>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

Ví dụ 2

Sử dụng CSS để tạo kiểu cho phần tử <aside>:

<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>

<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>

<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

<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>
<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>

</body>
</html>

Phần tử HTML <figure> và <figcaption>

Thẻ <figure>chỉ đị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 <figure>phần tử. Phần <figcaption>tử có thể được đặt làm con đầu tiên hoặc con cuối cùng của một <figure>phần tử.

Phần <img>tử xác định hình ảnh / hình minh họa thực tế. 

Thí dụ

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

Tại sao lại là yếu tố ngữ nghĩa?

Theo W3C: "Web ngữ nghĩa cho phép dữ liệu được chia sẻ và sử dụng lại giữa các ứng dụng, doanh nghiệp và cộng đồng."


Các phần tử ngữ nghĩa trong HTML

Dưới đây là danh sách một số thành phần ngữ nghĩa trong HTML.

Tag Description
<article> Defines independent, self-contained content
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time

Để có danh sách đầy đủ tất cả các thẻ HTML có sẵn, hãy truy cập Tham khảo thẻ HTML của chúng tôi .