Bảng tham chiếu nhanh HTML về cú pháp và các tác vụ thông dụng

Khi làm việc với HTML, sẽ rất tiện nếu có một cách nhanh chóng để ghi nhớ cách dùng các thẻ HTML đúng cách và cách áp dụng chúng. MDN cung cấp cho bạn tài liệu tham chiếu HTML đầy đủ cũng như một bộ hướng dẫn HTML chuyên sâu. Tuy nhiên, trong nhiều trường hợp chúng ta chỉ cần một vài gợi ý nhanh khi làm việc. Đó chính là mục đích của bảng tham chiếu này — cung cấp những đoạn mã sẵn dùng, chính xác và nhanh chóng cho các tình huống phổ biến.

Note: Các thẻ HTML phải được sử dụng theo giá trị ngữ nghĩa của chúng, không phải theo hình thức hiển thị. Bạn hoàn toàn có thể thay đổi giao diện của một thẻ bất kỳ bằng CSS, vì vậy khi sử dụng HTML, hãy tập trung vào ý nghĩa thay vì hình thức.

Phần tử nội tuyến

Một "phần tử" là một thành phần đơn lẻ của trang web. Một số phần tử lớn và chứa các phần tử nhỏ hơn bên trong, giống như các vùng chứa. Một số phần tử nhỏ và được "lồng" bên trong các phần tử lớn hơn. Theo mặc định, "phần tử nội tuyến" xuất hiện cạnh nhau trên một trang web. Chúng chỉ chiếm đúng phần chiều rộng cần thiết và xếp ngang với nhau như các từ trong một câu hoặc những cuốn sách xếp cạnh nhau trên kệ. Tất cả các phần tử nội tuyến đều có thể được đặt bên trong phần tử <body>.

Phần tử nội tuyến: cách dùng và ví dụ
Cách dùng Phần tử Ví dụ
Một liên kết <a>
html
<a href="https://example.org">
A link to example.org</a>.
Một hình ảnh <img>
html
<img src="beast.png" width="50" />
Vùng chứa nội tuyến <span>
html
Used to group elements: for example,
to <span style="color:blue">style
them</span>.
Nhấn mạnh văn bản <em>
html
<em>I'm posh</em>.
Chữ in nghiêng <i>
html
Mark a phrase in <i>italics</i>.
Chữ in đậm <b>
html
Bold <b>a word or phrase</b>.
Văn bản quan trọng <strong>
html
<strong>I'm important!</strong>
Tô sáng văn bản <mark>
html
<mark>Notice me!</mark>
Văn bản gạch ngang <s>
html
<s>I'm irrelevant.</s>
Chỉ số dưới <sub>
html
H<sub>2</sub>O
Chữ nhỏ <small>
html
Used to represent the <small>small
print </small>of a document.
Địa chỉ <address>
html
<address>Main street 67</address>
Trích dẫn văn bản <cite>
html
For more monsters,
see <cite>The Monster Book of Monsters</cite>.
Chỉ số trên <sup>
html
x<sup>2</sup>
Trích dẫn nội tuyến <q>
html
<q>Me?</q>, she said.
Ngắt dòng <br>
html
Line 1<br />Line 2
Vị trí ngắt dòng tuỳ chọn <wbr>
html
<div style="width: 200px">
  Llanfair<wbr />pwllgwyngyll<wbr />gogerychwyrndrobwllllantysiliogogogoch.
</div>
Ngày giờ <time>
html
Used to format the date. For example:
<time datetime="2020-05-24">
published on 23-05-2020</time>.
Định dạng mã nguồn <code>
html
This text is in normal format,
but <code>this text is in code
format</code>.
Âm thanh <audio>
html
<audio controls>
  <source src="/shared-assets/audio/t-rex-roar.mp3" type="audio/mpeg" />
</audio>
        
Video <video>
html
<video controls width="250"
  src="/shared-assets/videos/flower.webm" >
  <a href="/shared-assets/videos/flower.webm">Download WebM video</a>
</video>

Phần tử khối

"Phần tử khối", ngược lại, chiếm toàn bộ chiều rộng của trang web. Chúng cũng chiếm trọn một dòng; chúng không xếp cạnh nhau theo chiều ngang. Thay vào đó, chúng xếp chồng lên nhau như các đoạn văn trong một bài luận hoặc các khối đồ chơi trong một tòa tháp.

Note: Vì bảng tham chiếu này chỉ giới hạn ở một số phần tử đại diện cho các cấu trúc cụ thể hoặc có ngữ nghĩa đặc biệt, phần tử div không được đưa vào một cách có chủ ý — vì phần tử div không đại diện cho bất cứ điều gì và không có ngữ nghĩa đặc biệt nào.

Cách dùng Phần tử Ví dụ
Một đoạn văn đơn giản <p>
html
<p>I'm a paragraph</p>
<p>I'm another paragraph</p>
Trích dẫn dài <blockquote>
html
They said:
<blockquote>The blockquote element indicates
an extended quotation.</blockquote>
Thông tin bổ sung <details>
html
<details>
  <summary>HTML Cheat Sheet</summary>
  <p>Inline elements</p>
  <p>Block elements</p>
</details>
Danh sách không có thứ tự <ul>
html
<ul>
  <li>I'm an item</li>
  <li>I'm another item</li>
</ul>
Danh sách có thứ tự <ol>
html
<ol>
  <li>I'm the first item</li>
  <li>I'm the second item</li>
</ol>
Danh sách định nghĩa <dl>
html
<dl>
  <dt>A Term</dt>
  <dd>Definition of a term</dd>
  <dt>Another Term</dt>
  <dd>Definition of another term</dd>
</dl>
Đường kẻ ngang <hr>
html
before<hr />after
Tiêu đề văn bản <h1>-<h6>
html
<h1> This is Heading 1 </h1>
<h2> This is Heading 2 </h2>
<h3> This is Heading 3 </h3>
<h4> This is Heading 4 </h4>
<h5> This is Heading 5 </h5>
<h6> This is Heading 6 </h6>