HTML Glossary (Thuật ngữ HTML)
Trần Thị Vân - 232
- 24/07/2026
HTML có một hệ thống thuật ngữ rất rộng. Nếu chỉ học thuộc tên các thẻ mà không hiểu bản chất của element, attribute, content, cấu trúc tài liệu và ngữ nghĩa, người học rất dễ viết được mã nhưng lại khó xây dựng một tài liệu HTML tốt. HTML Glossary này tập trung vào những thuật ngữ quan trọng nhất, từ nền tảng đến các khái niệm có giá trị thực tế trong quá trình xây dựng website.
Thay vì liệt kê thuật ngữ theo kiểu từ điển khô cứng, nội dung được giải thích theo cách một người làm website thực sự cần hiểu: thuật ngữ đó là gì, có vai trò nào, được sử dụng trong trường hợp nào và những nhầm lẫn nào nên tránh.
Nền tảng của HTML và tài liệu Web
Trước khi đi vào từng nhóm thẻ, cần hiểu HTML đang giải quyết vấn đề gì. HTML không phải công cụ để trang trí giao diện và cũng không phải ngôn ngữ lập trình dùng để xử lý logic. Nó là lớp cấu trúc giúp nội dung trên website có tổ chức và có ý nghĩa.
HTML
HTML là viết tắt của HyperText Markup Language, nghĩa là ngôn ngữ đánh dấu siêu văn bản. HTML được dùng để mô tả cấu trúc và ý nghĩa của nội dung trong tài liệu Web.
HTML có thể xác định đâu là tiêu đề, đoạn văn, liên kết, hình ảnh, danh sách, bảng, biểu mẫu hoặc một khu vực nội dung cụ thể. Trình duyệt dựa trên cấu trúc này để phân tích và hiển thị tài liệu.
HTML không đảm nhiệm vai trò xử lý thuật toán như JavaScript và cũng không phải công cụ chính để kiểm soát cách trình bày như CSS. Ba công nghệ thường phối hợp với nhau nhưng có nhiệm vụ khác nhau.
Markup
Markup là phần đánh dấu giúp mô tả cấu trúc hoặc ý nghĩa của nội dung. Trong HTML, markup được tạo nên từ các element, tag và attribute.
Markup không đơn thuần có mục đích làm cho nội dung trông đẹp hơn. Nó cung cấp thông tin cấu trúc để trình duyệt, công cụ tìm kiếm, công nghệ hỗ trợ và các công cụ xử lý tài liệu có thể hiểu nội dung theo cách nhất quán hơn.
Hypertext
Hypertext là nội dung có khả năng liên kết tới tài liệu, tài nguyên hoặc một vị trí khác. Đây là một trong những nền tảng quan trọng hình thành nên Web.
Trong HTML, element a thường được sử dụng để tạo liên kết.
<a href="https://example.com/">Trang chủ</a>
Trong ví dụ này, href xác định địa chỉ đích của liên kết, còn phần nội dung giữa start tag và end tag là nội dung hiển thị cho người dùng.
Document
Document là tài liệu HTML mà trình duyệt phân tích để tạo ra trang Web. Một document có thể chứa văn bản, hình ảnh, liên kết, biểu mẫu, dữ liệu dạng bảng và nhiều thành phần khác.
Mỗi document có cấu trúc phân cấp. Các thành phần bên trong không tồn tại độc lập mà thường có quan hệ cha, con hoặc cùng cấp.
Tag, element và content
Đây là nhóm thuật ngữ người mới học HTML thường nhầm lẫn nhất. Trong giao tiếp hằng ngày, nhiều người gọi tất cả là “thẻ HTML”, nhưng về mặt kỹ thuật tag và element không hoàn toàn giống nhau.
Tag
Tag là cú pháp đánh dấu dùng để biểu thị điểm bắt đầu hoặc kết thúc của một element.
<p>Đây là một đoạn văn.</p>
Trong ví dụ trên, phần mở đầu là start tag và phần kết thúc là end tag. Tag chỉ là một thành phần của element.
Start tag
Start tag là tag đánh dấu điểm bắt đầu của một element có cấu trúc thông thường.
<p>
Start tag có thể chứa tên element và các attribute.
End tag
End tag là tag đánh dấu điểm kết thúc của một element có nội dung.
</p>
Không phải element nào cũng có end tag. Một số element thuộc nhóm void element và không có nội dung con.
Element
Element là một đơn vị cấu trúc của tài liệu HTML. Với element thông thường, nó có thể bao gồm start tag, content và end tag.
<p>HTML mô tả cấu trúc nội dung.</p>
Toàn bộ cấu trúc trên là một element p. Chỉ phần mở đầu p không phải toàn bộ element.
Content
Content là nội dung nằm trong một element. Content có thể là văn bản hoặc có thể chứa những element khác.
<p>Đây là <strong>nội dung quan trọng</strong>.</p>
Ở đây, element p chứa văn bản và một element strong. Vì vậy content không nhất thiết chỉ là văn bản thuần túy.
Attribute và dữ liệu bổ sung
Nếu element xác định một thành phần thì attribute thường cung cấp thêm thông tin hoặc cấu hình cho thành phần đó.
Attribute
Attribute là thuộc tính được khai báo trong start tag nhằm cung cấp thêm thông tin hoặc điều khiển một khía cạnh nhất định của element.
<a href="https://example.com/">Liên kết</a>
Trong ví dụ này, href là attribute của element a.
Attribute value
Attribute value là giá trị được gán cho một attribute.
<img src="logo.png" alt="Logo Web Mới">
Giá trị của src là logo.png và giá trị của alt là Logo Web Mới.
Boolean attribute
Boolean attribute là attribute mà sự hiện diện của nó đã thể hiện trạng thái bật hoặc đúng. Không phải trường hợp nào cũng cần truyền vào một giá trị dạng chuỗi.
<button disabled>Không thể bấm</button>
Trong ví dụ trên, sự xuất hiện của disabled cho biết button đang ở trạng thái vô hiệu hóa.
Global attribute
Global attribute là attribute có thể được sử dụng trên nhiều loại element khác nhau thay vì chỉ dành riêng cho một element.
Một số global attribute quan trọng gồm id, class, title, lang, dir và style. Ngoài ra còn có nhóm data attribute phục vụ việc gắn dữ liệu tùy biến vào element.
Cấu trúc phân cấp trong HTML
HTML được tổ chức theo cấu trúc cây. Hiểu đúng mối quan hệ giữa các element giúp việc xây dựng tài liệu, viết CSS và thao tác DOM bằng JavaScript trở nên dễ dàng hơn.
Parent
Parent là element trực tiếp chứa một element khác.
<div>
<p>Một đoạn văn.</p>
</div>
Trong ví dụ này, div là parent của p.
Child
Child là element nằm trực tiếp bên trong một parent.
Trong cấu trúc trên, p là child của div. Nếu một element nằm sâu qua nhiều cấp thì nó có thể là descendant nhưng không nhất thiết là child trực tiếp.
Sibling
Sibling là những element có cùng parent trực tiếp.
<section>
<h2>Tiêu đề</h2>
<p>Đoạn văn thứ nhất.</p>
<p>Đoạn văn thứ hai.</p>
</section>
Trong ví dụ này, h2 và hai element p là sibling vì chúng cùng nằm trực tiếp trong section.
Descendant
Descendant là element nằm bên trong một element khác ở bất kỳ cấp độ nào.
<article>
<div>
<p>Nội dung bài viết.</p>
</div>
</article>
p là descendant của article nhưng không phải child trực tiếp của article vì giữa hai element còn có div.
Nesting
Nesting là việc đặt một element bên trong element khác.
<article>
<h2>Tiêu đề</h2>
<p>Đây là <strong>nội dung quan trọng</strong>.</p>
</article>
Việc nesting phải tuân thủ các quy tắc của HTML. Đóng element sai thứ tự có thể khiến trình duyệt xây dựng cây tài liệu khác với cấu trúc mà người viết dự định.
Cấu trúc tài liệu HTML
DOCTYPE
DOCTYPE là khai báo loại tài liệu được đặt ở đầu tài liệu HTML.
<!DOCTYPE html>
DOCTYPE không phải element HTML. Trong HTML hiện đại, khai báo này giúp trình duyệt sử dụng standards mode thay vì chế độ tương thích cũ.
Root element
Root element là element ở cấp cao nhất của tài liệu. Trong tài liệu HTML thông thường, root element là html.
<html>
...
</html>
Head
Head là khu vực chứa metadata và những thông tin phục vụ quá trình xử lý tài liệu.
Title, thông tin encoding, viewport, stylesheet và nhiều loại metadata khác thường được khai báo trong head. Đây không phải khu vực dành cho phần nội dung chính mà người dùng đọc trực tiếp.
Body
Body là khu vực chứa nội dung chính của tài liệu mà người dùng thường nhìn thấy hoặc tương tác.
Các tiêu đề, đoạn văn, hình ảnh, danh sách, bảng và form thường được đặt trong body.
Void element
Void element
Void element là element không chứa content con và không sử dụng end tag.
Một số void element thường gặp gồm img, br, input, meta và link.
<img src="logo.png" alt="Logo Web Mới">
Không cần thêm end tag cho img.
Self-closing syntax
Trong HTML, void element không cần cú pháp đóng riêng. Cách viết có dấu gạch chéo cuối như một số tài liệu XML hoặc XHTML có thể xuất hiện trong mã HTML, nhưng dấu gạch chéo đó không biến element thành một loại element khác.
Heading và tổ chức nội dung
Heading
Heading là tiêu đề dùng để tổ chức nội dung theo cấp độ. HTML cung cấp sáu cấp heading từ h1 đến h6.
<h1>Tên tài liệu</h1>
<h2>Phần nội dung</h2>
<h3>Nội dung chi tiết</h3>
Heading nên được lựa chọn dựa trên cấu trúc thông tin chứ không phải chỉ dựa vào kích thước chữ. Việc muốn một dòng chữ lớn hơn nên được xử lý bằng CSS thay vì chọn heading sai cấp.
Paragraph
Paragraph là đoạn văn và được biểu diễn bằng element p.
<p>HTML giúp mô tả cấu trúc nội dung trên website.</p>
Mỗi paragraph nên thể hiện một đơn vị nội dung tương đối hoàn chỉnh. Không nên dùng hàng loạt paragraph chỉ để tạo khoảng cách giữa các thành phần.
Strong
strong dùng để thể hiện nội dung có mức độ quan trọng hoặc đáng chú ý.
<p>Đây là <strong>thông tin quan trọng</strong>.</p>
strong mang ý nghĩa về nội dung chứ không chỉ đơn giản là một cách làm chữ đậm.
Emphasis
em dùng để thể hiện sự nhấn mạnh trong ngữ cảnh của câu hoặc đoạn.
<p>Từ này được <em>nhấn mạnh</em> trong câu.</p>
Blockquote
blockquote dùng để đánh dấu một phần nội dung được trích dẫn có phạm vi tương đối lớn.
<blockquote>
<p>Đây là một đoạn nội dung được trích dẫn.</p>
</blockquote>
Việc sử dụng blockquote giúp phân biệt nội dung trích dẫn với phần nội dung do tác giả trang tự viết.
Liên kết và URL
Hyperlink
Hyperlink là liên kết cho phép người dùng điều hướng từ một tài liệu, vị trí hoặc tài nguyên sang một tài nguyên khác.
<a href="/lien-he">Liên hệ</a>
Element a kết hợp với href là cách phổ biến để tạo hyperlink.
URL
URL là viết tắt của Uniform Resource Locator. URL xác định địa chỉ của một tài nguyên hoặc vị trí mà hệ thống có thể truy cập.
<a href="https://example.com/san-pham">Sản phẩm</a>
Absolute URL
Absolute URL chứa đầy đủ thông tin cần thiết để xác định tài nguyên.
<a href="https://example.com/gioi-thieu">Giới thiệu</a>
Relative URL
Relative URL xác định tài nguyên dựa trên ngữ cảnh của tài liệu hiện tại.
<a href="/gioi-thieu">Giới thiệu</a>
Relative URL thường hữu ích khi nhiều tài nguyên cùng thuộc một website.
Fragment identifier
Fragment identifier xác định một vị trí cụ thể trong tài liệu và thường bắt đầu bằng ký tự #.
<a href="#ket-luan">Đến phần kết luận</a>
<h2 id="ket-luan">Kết luận</h2>
Hình ảnh và tài nguyên trực quan
Image
img là element dùng để nhúng hình ảnh vào tài liệu.
<img src="san-pham.jpg" alt="Sản phẩm mẫu">
src xác định tài nguyên hình ảnh còn alt cung cấp nội dung thay thế bằng văn bản.
Alt text
Alt text là văn bản thay thế được khai báo thông qua attribute alt của img.
<img src="web-moi.jpg" alt="Giao diện website Web Mới">
Alt nên mô tả thông tin mà hình ảnh thực sự truyền tải trong ngữ cảnh của trang. Không nên biến alt thành nơi nhồi từ khóa.
Figure
figure dùng để biểu diễn một nội dung độc lập như hình ảnh, sơ đồ, đoạn mã hoặc nội dung minh họa có quan hệ với phần nội dung xung quanh.
Figcaption
figcaption cung cấp phần chú thích cho nội dung được đặt trong figure.
<figure>
<img src="giao-dien.jpg" alt="Giao diện website">
<figcaption>Giao diện trang chủ trên máy tính.</figcaption>
</figure>
Danh sách
Unordered list
ul được sử dụng cho danh sách mà thứ tự giữa các mục không mang ý nghĩa.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Ordered list
ol được sử dụng khi thứ tự các mục có ý nghĩa.
<ol>
<li>Phân tích nội dung</li>
<li>Xây dựng cấu trúc</li>
<li>Kiểm tra HTML</li>
</ol>
List item
li đại diện cho một mục trong danh sách. Nó thường được đặt trực tiếp bên trong ul hoặc ol.
Bảng dữ liệu
Table
table dùng để biểu diễn dữ liệu có quan hệ theo hàng và cột.
<table>
<tr>
<th>Thuật ngữ</th>
<th>Ý nghĩa</th>
</tr>
<tr>
<td>HTML</td>
<td>Ngôn ngữ đánh dấu</td>
</tr>
</table>
Table phù hợp với dữ liệu dạng bảng, không nên được dùng làm công cụ chính để tạo bố cục giao diện.
Table row
tr đại diện cho một hàng trong bảng.
Table header cell
th đại diện cho một ô tiêu đề trong bảng.
Table data cell
td đại diện cho một ô dữ liệu thông thường.
Form và dữ liệu người dùng nhập
Form
form là element dùng để nhóm các trường nhập liệu và xác định cách dữ liệu được gửi.
<form action="/dang-ky" method="post">
<input type="text" name="ho-ten">
<button type="submit">Đăng ký</button>
</form>
Form control
Form control là thành phần cho phép người dùng nhập, chọn hoặc gửi dữ liệu trong form.
Input
input là element hỗ trợ nhiều loại trường nhập liệu. Loại trường được xác định chủ yếu bằng attribute type.
<input type="email" name="email">
Label
label là element cung cấp nhãn cho một form control.
<label for="email">Địa chỉ email</label>
<input id="email" type="email" name="email">
Trong ví dụ này, for của label liên kết với id của input. Mối quan hệ này giúp người dùng và công nghệ hỗ trợ xác định trường nhập liệu rõ ràng hơn.
Name
name là attribute xác định tên của trường dữ liệu khi form được gửi.
<input type="text" name="ho-ten">
Đây là attribute đặc biệt quan trọng khi form giao tiếp với server.
Action
action xác định địa chỉ mà form gửi dữ liệu đến.
<form action="/xu-ly-dang-ky" method="post">
...
</form>
Method
method xác định phương thức HTTP được sử dụng khi gửi form.
Hai giá trị phổ biến là get và post. GET thường phù hợp với truy vấn mà dữ liệu có thể xuất hiện trong URL. POST thường được sử dụng khi gửi dữ liệu trong phần body của request.
Required
required là boolean attribute cho biết một trường dữ liệu bắt buộc phải có giá trị hợp lệ.
<input type="text" name="ho-ten" required>
Kiểm tra ở trình duyệt giúp cải thiện trải nghiệm nhưng không thay thế việc kiểm tra dữ liệu ở server.
Constraint validation
Constraint validation là cơ chế kiểm tra dữ liệu form dựa trên những điều kiện được khai báo trong HTML.
Các attribute như required, minlength, maxlength, min, max và những loại input cụ thể có thể tham gia vào quá trình kiểm tra này.
Semantic HTML
Semantic HTML
Semantic HTML là cách sử dụng element dựa trên ý nghĩa và vai trò thực tế của nội dung thay vì chỉ lựa chọn element theo cách nó hiển thị.
Ví dụ, một khu vực chứa các liên kết điều hướng chính phù hợp với nav hơn một div chung chỉ có tên class là menu.
<nav>
<a href="/">Trang chủ</a>
<a href="/dich-vu">Dịch vụ</a>
<a href="/lien-he">Liên hệ</a>
</nav>
Semantic HTML giúp cấu trúc tài liệu dễ hiểu hơn đối với trình duyệt, công cụ tìm kiếm, công nghệ hỗ trợ và người bảo trì mã nguồn.
Header
header đại diện cho phần giới thiệu hoặc phần mở đầu của một trang hoặc một khu vực nội dung.
Header không nhất thiết chỉ xuất hiện một lần ở đầu toàn bộ website. Một khu vực nội dung độc lập cũng có thể có header riêng khi cấu trúc phù hợp.
Footer
footer đại diện cho phần thông tin kết thúc của một trang hoặc một khu vực nội dung.
Navigation
nav đại diện cho khu vực chứa các liên kết điều hướng quan trọng.
<nav>
<a href="/">Trang chủ</a>
<a href="/san-pham">Sản phẩm</a>
<a href="/lien-he">Liên hệ</a>
</nav>
Không phải mọi nhóm liên kết đều cần nav. Element này nên dành cho những khu vực thực sự có vai trò điều hướng.
Main
main đại diện cho nội dung chính của tài liệu.
Việc xác định khu vực main rõ ràng giúp cấu trúc tài liệu dễ hiểu hơn và hỗ trợ người dùng công nghệ hỗ trợ tiếp cận nội dung chính.
Article
article đại diện cho một nội dung độc lập hoặc có tính hoàn chỉnh tương đối.
Bài viết, tin tức hoặc một nội dung có thể được phân phối độc lập thường phù hợp với article nếu ngữ cảnh thực tế đáp ứng đặc điểm đó.
Section
section đại diện cho một phần nội dung có chủ đề hoặc mục đích tương đối rõ ràng.
<section>
<h2>Thông tin dịch vụ</h2>
<p>Nội dung mô tả dịch vụ.</p>
</section>
Section thường nên có tiêu đề để thể hiện chủ đề của phần nội dung. Không nên dùng section chỉ như một container chung khi không có ý nghĩa ngữ nghĩa phù hợp.
Aside
aside đại diện cho nội dung liên quan nhưng không phải phần nội dung chính của khu vực chứa nó.
Thông tin bổ sung, nội dung liên quan hoặc khu vực phụ trợ có thể phù hợp với aside tùy cấu trúc thực tế.
Container tổng quát
Div
div là container tổng quát không mang ý nghĩa ngữ nghĩa cụ thể.
Div hữu ích khi cần nhóm các thành phần cho mục đích cấu trúc, CSS hoặc JavaScript nhưng không có semantic element phù hợp.
<div class="khung-noi-dung">
<p>Nội dung bên trong.</p>
</div>
Div không phải element xấu. Vấn đề chỉ xuất hiện khi div được dùng thay thế cho một element có ý nghĩa rõ ràng mà không có lý do phù hợp.
Span
span là container tổng quát dạng inline, thường được sử dụng để đánh dấu một phần nhỏ của nội dung.
<p>Giá bán: <span class="gia">6.000.000đ</span></p>
Span phù hợp khi cần áp dụng CSS hoặc xử lý một phần nội dung nhưng không cần tạo ra một thành phần có ý nghĩa ngữ nghĩa riêng.
DOM và cây tài liệu
DOM
DOM là viết tắt của Document Object Model. Đây là mô hình biểu diễn tài liệu dưới dạng các đối tượng có quan hệ với nhau.
JavaScript có thể sử dụng DOM để tìm, đọc, thay đổi, thêm hoặc xóa các thành phần trong tài liệu.
<p id="thong-bao">Nội dung ban đầu</p>
Sau khi tài liệu được trình duyệt phân tích, element p trở thành một phần của mô hình DOM mà JavaScript có thể truy cập.
DOM tree
DOM tree là cách biểu diễn cấu trúc DOM dưới dạng cây.
html
├── head
└── body
├── h1
└── p
Cách nhìn này giúp giải thích rõ các quan hệ parent, child, sibling và descendant.
Parsing và xử lý HTML
HTML parsing
HTML parsing là quá trình trình duyệt phân tích mã HTML để xác định cấu trúc tài liệu.
Trình duyệt không đơn giản đọc từng dòng rồi hiển thị nguyên trạng. Nó phân tích tag, attribute, content và quan hệ giữa các thành phần để xây dựng cấu trúc tài liệu.
Parser error
Parser error là lỗi liên quan đến việc tài liệu không được cấu trúc hoặc viết theo cách mà bộ phân tích HTML mong đợi.
Trình duyệt có cơ chế phục hồi đối với nhiều lỗi HTML. Vì vậy một trang vẫn có thể hiển thị dù mã nguồn chưa chuẩn. Tuy nhiên, việc trình duyệt tự sửa không đồng nghĩa với việc mã HTML đó được viết đúng.
Chế độ xử lý tài liệu
Standards mode
Standards mode là chế độ trình duyệt sử dụng các quy tắc hiện đại để xử lý tài liệu.
DOCTYPE đúng cách giúp tài liệu được xử lý theo standards mode.
Quirks mode
Quirks mode là chế độ tương thích dành cho một số website cũ. Trong chế độ này, trình duyệt có thể mô phỏng một số hành vi lịch sử.
Website mới không nên chủ động dựa vào quirks mode vì sự khác biệt giữa các chế độ có thể dẫn tới kết quả không nhất quán.
Accessibility trong HTML
Accessibility
Accessibility là khả năng website có thể được sử dụng bởi người dùng với nhiều phương thức tương tác và nhu cầu khác nhau.
Trong HTML, accessibility thường bắt đầu từ cấu trúc semantic chính xác, heading rõ ràng, nhãn form phù hợp và nội dung thay thế cho hình ảnh.
Accessible name
Accessible name là tên mà công nghệ hỗ trợ có thể sử dụng để xác định một thành phần giao diện.
Nút, liên kết và form control cần có tên hoặc nhãn có ý nghĩa thay vì chỉ dựa vào hình ảnh hoặc cách trình bày trực quan.
ARIA
ARIA là viết tắt của Accessible Rich Internet Applications. ARIA cung cấp các thuộc tính và vai trò giúp mô tả trạng thái hoặc vai trò của thành phần giao diện cho công nghệ hỗ trợ trong những trường hợp HTML native chưa thể diễn đạt đầy đủ.
ARIA không nên được sử dụng để thay thế một element HTML semantic đã phù hợp. Nếu HTML đã có element đúng với mục đích, ưu tiên sử dụng element đó trước khi bổ sung ARIA.
Metadata
Metadata
Metadata là dữ liệu mô tả hoặc cung cấp thông tin về tài liệu thay vì trực tiếp trở thành phần nội dung chính.
Metadata thường được khai báo trong head và có thể liên quan đến tiêu đề, encoding, viewport, mô tả tài liệu hoặc tài nguyên được sử dụng.
Character encoding
Character encoding là cách ký tự được biểu diễn dưới dạng dữ liệu để máy tính lưu trữ và xử lý.
UTF-8 được sử dụng rộng rãi cho HTML hiện đại và đặc biệt phù hợp với website có nội dung tiếng Việt.
<meta charset="UTF-8">
Viewport
Viewport là vùng hiển thị của trang trong cửa sổ trình duyệt hoặc màn hình thiết bị.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Viewport không tự tạo responsive design. Nó giúp trình duyệt xử lý vùng hiển thị phù hợp hơn với thiết kế dành cho các thiết bị khác nhau.
Tài nguyên bên ngoài và hiệu năng
External resource
External resource là tài nguyên nằm ngoài tài liệu hiện tại nhưng được tài liệu tham chiếu để trình duyệt tải hoặc sử dụng.
<link rel="stylesheet" href="/css/style.css">
Lazy loading
Lazy loading là cơ chế trì hoãn việc tải tài nguyên cho đến khi tài nguyên đó có khả năng cần thiết.
<img src="anh-san-pham.jpg" alt="Hình ảnh sản phẩm" loading="lazy">
Lazy loading có thể giảm lượng tài nguyên phải tải ngay từ đầu. Tuy nhiên, không nên áp dụng máy móc cho những hình ảnh quan trọng nằm trong vùng hiển thị ban đầu.
Preload
Preload cho phép báo cho trình duyệt rằng một tài nguyên có khả năng quan trọng và nên được chuẩn bị sớm.
Preload không nên được sử dụng cho mọi tài nguyên. Việc preload quá nhiều có thể làm tăng cạnh tranh tài nguyên và đi ngược mục tiêu tối ưu hiệu năng.
HTML và HTTP
HTTP request
HTTP request là yêu cầu mà client gửi tới server để lấy tài nguyên hoặc thực hiện một thao tác.
Khi người dùng truy cập một trang, trình duyệt thường gửi request tới server để yêu cầu tài liệu HTML tương ứng.
HTTP response
HTTP response là phản hồi mà server gửi lại sau khi xử lý request.
Response có thể chứa tài liệu HTML, HTTP header, mã trạng thái và dữ liệu cần thiết khác.
Status code
Status code là mã trạng thái HTTP cho biết kết quả hoặc trạng thái của response.
Một số mã thường gặp gồm 200 cho phản hồi thành công, 301 và 302 cho chuyển hướng, 404 khi không tìm thấy tài nguyên và 500 khi có lỗi phía server.
HTML và SEO
Search engine crawler
Search engine crawler là chương trình tự động được công cụ tìm kiếm sử dụng để truy cập và thu thập dữ liệu từ các tài nguyên trên Web.
Cấu trúc HTML là một trong những nguồn thông tin giúp hệ thống hiểu nội dung và mối quan hệ giữa các thành phần trên trang.
Title
title xác định tiêu đề của tài liệu HTML.
<title>Thiết kế website chuyên nghiệp</title>
Title là metadata của tài liệu chứ không phải heading hiển thị trong nội dung chính.
Meta description
Meta description là metadata cung cấp phần mô tả ngắn về nội dung của tài liệu.
<meta name="description" content="Tìm hiểu các thuật ngữ HTML quan trọng từ cơ bản đến nâng cao.">
Meta description không bảo đảm thứ hạng tìm kiếm. Giá trị của nó nằm ở việc cung cấp ngữ cảnh ngắn gọn và phù hợp cho nội dung trang.
Canonical URL
Canonical URL là URL được khai báo để chỉ ra phiên bản URL chính mà website muốn công cụ tìm kiếm xem xét khi nhiều URL có thể đại diện cho nội dung tương tự.
<link rel="canonical" href="https://example.com/html-glossary">
Canonical không phải redirect và không tự động khiến những URL khác biến mất khỏi công cụ tìm kiếm.
HTML entity và ký tự đặc biệt
HTML entity
HTML entity là cách biểu diễn một ký tự hoặc ký hiệu đặc biệt bằng cú pháp mà HTML có thể nhận diện.
Entity đặc biệt hữu ích khi cần hiển thị những ký tự vốn có ý nghĩa trong cú pháp HTML.
<p>Đây là văn bản minh họa cú pháp HTML.</p>
Trong ví dụ trên, ký tự nhỏ hơn và lớn hơn được biểu diễn bằng entity để trình duyệt hiển thị chúng như văn bản thay vì phân tích thành markup.
Escaping
Escaping là quá trình biểu diễn dữ liệu theo cách để những ký tự đặc biệt không bị hiểu sai theo cú pháp của ngôn ngữ hoặc ngữ cảnh đang sử dụng.
Trong HTML, việc escape đúng dữ liệu là vấn đề quan trọng khi hiển thị nội dung do người dùng cung cấp, đặc biệt trong các tình huống liên quan đến bảo mật.
Web Components
Custom element
Custom element là cơ chế cho phép nhà phát triển định nghĩa element riêng trong hệ sinh thái Web Components.
Custom element không có nghĩa là tự đặt một tên tag bất kỳ rồi mặc nhiên xem nó là HTML chuẩn. Custom element phải tuân thủ các quy tắc của nền tảng Web Components và thường sử dụng tên có dấu gạch nối.
Web Components
Web Components là tập hợp các công nghệ Web cho phép xây dựng những thành phần có khả năng tái sử dụng và đóng gói.
Custom elements, shadow DOM và các cơ chế liên quan có thể được kết hợp để xây dựng những component độc lập hơn trong các ứng dụng giao diện phức tạp.
Những thuật ngữ thường bị hiểu sai
HTML có phải ngôn ngữ lập trình?
Không. HTML là ngôn ngữ đánh dấu. Nó mô tả cấu trúc và ý nghĩa nội dung chứ không phải hệ thống xây dựng thuật toán và logic ứng dụng.
Tag và element có giống nhau?
Không hoàn toàn. Tag là cú pháp đánh dấu, còn element là đơn vị cấu trúc được tạo nên từ tag cùng content và những thành phần liên quan.
Div có phải element không tốt?
Không. Div là một element hợp lệ và hữu ích khi không có semantic element phù hợp. Vấn đề nằm ở việc sử dụng div thay cho một element có ý nghĩa rõ ràng mà không có lý do cần thiết.
HTML hợp lệ có đồng nghĩa website tốt?
Không. HTML hợp lệ chỉ là một phần của chất lượng website. Một website tốt còn liên quan đến nội dung, accessibility, hiệu năng, CSS, JavaScript, bảo mật và trải nghiệm người dùng.
Bảng tra cứu nhanh các thuật ngữ quan trọng
| Thuật ngữ | Ý nghĩa |
|---|---|
| HTML | Ngôn ngữ đánh dấu dùng để mô tả cấu trúc nội dung Web. |
| Markup | Phần đánh dấu dùng để mô tả cấu trúc hoặc ý nghĩa nội dung. |
| Tag | Cú pháp đánh dấu mở hoặc kết thúc element. |
| Element | Đơn vị cấu trúc trong tài liệu HTML. |
| Content | Nội dung nằm trong hoặc được đại diện bởi element. |
| Attribute | Thông tin bổ sung được khai báo trong start tag. |
| Boolean attribute | Attribute mà sự hiện diện của nó biểu thị một trạng thái. |
| Parent | Element trực tiếp chứa element khác. |
| Child | Element nằm trực tiếp bên trong parent. |
| Sibling | Các element có cùng parent trực tiếp. |
| Descendant | Element nằm bên trong một element ở bất kỳ cấp độ nào. |
| Nesting | Việc đặt một element bên trong element khác. |
| DOCTYPE | Khai báo loại tài liệu ở đầu tài liệu HTML. |
| Void element | Element không có content con và không có end tag. |
| Semantic HTML | Cách sử dụng element dựa trên ý nghĩa nội dung. |
| URL | Địa chỉ xác định tài nguyên hoặc vị trí. |
| Hyperlink | Liên kết tới tài nguyên hoặc vị trí khác. |
| DOM | Mô hình đối tượng biểu diễn cấu trúc tài liệu. |
| Accessibility | Khả năng tiếp cận và sử dụng website. |
| Metadata | Dữ liệu mô tả hoặc cung cấp thông tin về tài liệu. |
| Lazy loading | Cơ chế trì hoãn tải tài nguyên cho đến khi cần thiết. |
| Constraint validation | Cơ chế kiểm tra dữ liệu form dựa trên các điều kiện. |
| Canonical URL | URL được khai báo là phiên bản chính của một nội dung. |
| HTML entity | Cách biểu diễn ký tự đặc biệt trong HTML. |
| Custom element | Element do nhà phát triển định nghĩa theo cơ chế Web Components. |
Cách sử dụng glossary khi làm website
Một glossary HTML có giá trị nhất khi được sử dụng như công cụ tra cứu trong quá trình xây dựng website. Khi gặp một thuật ngữ trong tài liệu kỹ thuật hoặc mã nguồn, không nên chỉ nhớ nghĩa tiếng Việt mà nên đặt nó vào đúng ngữ cảnh.
Ví dụ, khi phân tích một đoạn mã, có thể bắt đầu bằng việc xác định element chính, sau đó tìm attribute, content và các quan hệ parent, child, sibling. Cách tiếp cận này giúp nhìn thấy cấu trúc của tài liệu thay vì chỉ đọc từng dòng mã riêng lẻ.
Khi xây dựng cấu trúc website, nên bắt đầu từ ý nghĩa của nội dung. Tiêu đề sử dụng heading phù hợp, danh sách sử dụng ul hoặc ol, dữ liệu dạng hàng và cột sử dụng table, điều hướng sử dụng nav, nội dung độc lập có thể sử dụng article và những khu vực có chủ đề rõ ràng có thể sử dụng section.
Div và span vẫn rất quan trọng nhưng nên được xem là những container tổng quát, không phải lựa chọn mặc định cho mọi thành phần. Semantic HTML tốt không có nghĩa là loại bỏ hoàn toàn div mà là biết khi nào div thực sự phù hợp.
Đối với SEO, accessibility và khả năng bảo trì, một tài liệu HTML tốt cần có cấu trúc rõ ràng, nội dung đúng ngữ nghĩa và các mối quan hệ giữa thành phần được thể hiện chính xác. Không cần nhồi hàng loạt attribute hoặc element để tạo cảm giác “tối ưu”. Chất lượng nằm ở việc sử dụng đúng thành phần cho đúng mục đích.
Điều quan trọng nhất khi học thuật ngữ HTML không phải ghi nhớ càng nhiều từ càng tốt. Mục tiêu là hiểu bản chất của từng khái niệm và biết cách áp dụng nó vào một tài liệu thực tế. Khi đã phân biệt rõ tag với element, attribute với value, parent với child, semantic element với container tổng quát và HTML source với DOM, việc đọc cũng như xây dựng mã HTML sẽ trở nên có hệ thống hơn.
Đó cũng là nền tảng để phát triển website chuyên nghiệp: HTML rõ ràng giúp CSS dễ tổ chức hơn, JavaScript dễ thao tác hơn, công cụ tìm kiếm dễ hiểu cấu trúc nội dung hơn và người dùng công nghệ hỗ trợ có cơ hội tiếp cận website tốt hơn.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
