HTML Course

Nền tảng của Web Development

Bài học: Các thẻ HTML quan trọng
Essential HTML Tags

🏷️ Các Thẻ HTML Quan Trọng

Tham khảo chi tiết các thẻ HTML cơ bản với cách sử dụng, attributes, ví dụ thực tế và kết quả hiển thị. Từ text formatting đến semantic elements.

Tham khảo thẻ HTML

<h1-h6>Heading Tags

Thẻ tiêu đề tạo hierarchy cho nội dung, từ quan trọng nhất (h1) đến ít quan trọng nhất (h6)

TEXTBASIC

Mục đích sử dụng

Cấu trúc nội dung, SEO, accessibility

Attributes chính

idclassstyletitle

Ví dụ thực tế

HTML Code:
<h1>Tiêu đề chính - Level 1</h1>
<h2>Tiêu đề phụ - Level 2</h2>
<h3>Tiêu đề cấp 3 - Level 3</h3>
<h4>Tiêu đề cấp 4 - Level 4</h4>
<h5>Tiêu đề cấp 5 - Level 5</h5>
<h6>Tiêu đề cấp 6 - Level 6</h6>
💡 Giải thích:

Mỗi trang chỉ nên có 1 h1, các heading khác theo thứ tự logic không bỏ cấp

HTML Code:
<article>
  <h1>Bài viết chính</h1>
  <section>
    <h2>Phần giới thiệu</h2>
    <h3>Lịch sử</h3>
    <h3>Tầm quan trọng</h3>
  </section>
  <section>
    <h2>Nội dung chi tiết</h2>
    <h3>Phương pháp 1</h3>
    <h3>Phương pháp 2</h3>
  </section>
</article>
💡 Giải thích:

Heading hierarchy giúp tạo table of contents tự động và cải thiện SEO

Bảng tham khảo nhanh

ThẻTênMục đíchCategoryLevel
<h1-h6>Heading TagsCấu trúc nội dung, SEO, accessibilitytextbasic
<p>ParagraphHiển thị văn bản, nội dung chínhtextbasic
<strong>Strong ImportanceNhấn mạnh nội dung quan trọngtextbasic
<em>EmphasisNhấn mạnh ngữ điệu, ý nghĩatextbasic
<ul>Unordered ListLiệt kê items không có thứ tựstructurebasic
<ol>Ordered ListLiệt kê items theo thứ tự, hướng dẫn từng bướcstructurebasic
<a>Anchor/LinkNavigation, liên kết external/internalstructurebasic
<img>ImageHiển thị hình ảnh, graphics, iconsmediabasic
<table>TableHiển thị data có cấu trúc, so sánh thông tinstructureintermediate
<form>FormLogin, registration, surveys, contact formsformintermediate
<input>InputThu thập data từ userformintermediate
<header>HeaderSite header, article header, section headersemanticintermediate
<nav>NavigationMain navigation, breadcrumb, paginationsemanticintermediate
<main>Main ContentWrap nội dung chính, skip link targetsemanticintermediate
<section>SectionChia content thành các phần có chủ đềsemanticintermediate
<article>ArticleBlog posts, news articles, comments, widgetssemanticintermediate
<footer>FooterSite footer, article footer, section footersemanticintermediate

Best Practices

✅ Nên làm
Sử dụng semantic HTML elements có ý nghĩa thay vì div generic
Luôn có alt attribute cho images, aria-label cho interactive elements
Dùng labels với form inputs, fieldset để group related inputs
Chỉ có một h1 trên mỗi trang, heading hierarchy tuần tự
Dùng strong/em thay vì b/i cho semantic meaning
Validate HTML với W3C validator, test với screen readers
❌ Không nên làm
Dùng tables cho layout (chỉ dùng cho tabular data)
Bỏ qua alt attribute cho images hoặc dùng alt="" cho decorative images
Sử dụng inline styles thay vì external CSS
Nested headings không đúng thứ tự (h1 → h3, skip h2)
Quên đóng thẻ HTML hoặc nest incorrectly
Dùng deprecated attributes như bgcolor, align, center

Câu hỏi phỏng vấn về HTML Tags

12 câu hỏi
Level:
Category:
JUNIORTEXT
Sự khác biệt giữa <strong> và <b>, <em> và <i>?
JUNIORSEMANTIC
Khi nào dùng <div> và khi nào dùng semantic elements?
JUNIORMEDIA
Tại sao alt attribute bắt buộc cho images?
MIDFORMS
HTML5 form validation hoạt động như thế nào?
MIDSEMANTIC
Sự khác biệt giữa <section> và <article>?
MIDMEDIA
Responsive images với <picture> và srcset?
MIDSTRUCTURE
Table accessibility best practices?
MIDFORMS
HTML5 input types và progressive enhancement?
SENIORMEDIA
Lazy loading images và performance impact?
SENIORFORMS
Form security considerations trong HTML?
SENIORFORMS
Custom form controls và accessibility compliance?
SENIORSEMANTIC
Microdata vs JSON-LD cho structured data?

📝 Tóm tắt bài học

  • • HTML tags được phân loại theo chức năng: text, structure, media, forms, semantic, meta
  • • Mỗi thẻ có purpose riêng, attributes specific và cách sử dụng best practices
  • • Semantic HTML elements tốt hơn div generic cho SEO, accessibility và maintainability
  • • Alt attribute bắt buộc cho images, labels cần thiết cho form inputs accessibility
  • • HTML5 cung cấp nhiều input types, validation attributes và semantic elements
  • • Luôn validate HTML, test accessibility và follow semantic structure

Mục lục bài học

Tiến độ: 3/8 phần
Không có mục lục