BÀI 2: CÁC THẺ VĂN BẢN VÀ CẤU TRÚC NỘI DUNG

Tháng mười hai 29, 2025
 |  Không có bình luận

2.1. Các thẻ Tiêu đề (Headings)

  • Thẻ: <h1> đến <h6>

  • Chức năng: Xác định các đề mục lớn/nhỏ trong trang web.

  • Giải thích chi tiết:

    • <h1>: Tiêu đề quan trọng nhất (Thường là tên bài báo, tên sản phẩm). Quy tắc SEO: Mỗi trang chỉ nên có duy nhất 1 thẻ <h1>.

    • <h2>: Tiêu đề cấp 2 (Các mục lớn trong bài).

    • <h3>…<h6>: Các mục con nhỏ hơn.

  • Ví dụ minh họa:

    HTML
     
    <h1>Báo Dân Trí</h1>               <h2>Tin tức trong ngày</h2>        <h3>Giá vàng tăng kỷ lục</h3>      ```

  • Ý nghĩa: Giúp Google hiểu cấu trúc bài viết và giúp người khiếm thị dùng trình đọc màn hình lướt qua các mục lục dễ dàng.

2.2. Đoạn văn và Ngắt dòng

2.2.1. Thẻ Đoạn văn (<p>)

  • Cú pháp: <p>Nội dung đoạn văn</p>

  • Chức năng: Gom nhóm một khối văn bản.

  • Giải thích: Trình duyệt sẽ tự động thêm một khoảng trắng (margin) ở trên và dưới thẻ <p> để tách biệt với các đoạn khác.

  • Lưu ý: Trong HTML, bạn gõ phím Enter xuống dòng 10 lần thì trình duyệt vẫn hiển thị trên 1 dòng. Muốn tách đoạn phải dùng <p>.

2.2.2. Thẻ Xuống dòng (<br>)

  • Cú pháp: <br> (Thẻ đơn, không có thẻ đóng).

  • Chức năng: Ngắt dòng ngay lập tức trong cùng một đoạn văn.

  • Ví dụ: Dùng khi viết thơ hoặc địa chỉ nhà.

    HTML
     
    <p>
    Thân em vừa trắng lại vừa tròn <br>
    Bảy nổi ba chìm với nước non
</p>

2.2.3. Thẻ Đường kẻ ngang (<hr>)

  • Cú pháp: <hr> (Thẻ đơn).

  • Chức năng: Vẽ một đường kẻ ngang màn hình.

  • Ý nghĩa: Dùng để ngăn cách các nội dung hoặc kết thúc một chủ đề.

2.3. Định dạng văn bản: Hiển thị vs Ngữ nghĩa

HTML5 phân biệt rõ giữa việc “làm cho đẹp” và “nhấn mạnh ý nghĩa”.

Kiểu hiển thịThẻ cũ (Chỉ hiển thị)Thẻ mới HTML5 (Ngữ nghĩa)Giải thích & Ý nghĩa
In đậm<b> (Bold)<strong>

<b>: Chỉ làm chữ đậm lên.


<strong>: Báo cho Google biết từ này RẤT QUAN TRỌNG.

In nghiêng<i> (Italic)<em> (Emphasis)

<i>: Chỉ làm chữ nghiêng (dùng cho tên riêng, thuật ngữ).


<em>: Nhấn mạnh ngữ điệu khi đọc (Ví dụ: “Tôi thật sự xin lỗi”).

gạch chân<u>ins (Ít dùng)<u>: Dễ gây nhầm lẫn với đường link (hyperlink) nên hạn chế dùng.

  • Ví dụ:

    HTML
    <p>Giá sản phẩm: <b>50.000đ</b></p>
<p>Cảnh báo: <strong>Không được sờ vào hiện vật!</strong></p>

2.4. Tạo Danh sách (Lists)

Rất quan trọng để làm Menu, danh sách sản phẩm.

2.4.1. Danh sách không thứ tự (<ul> – Unordered List)

  • Đặc điểm: Các mục có dấu chấm tròn (bullet) ở đầu.

  • Cú pháp:

    HTML
     
    <ul>
    <li>Cơm tấm</li>
    <li>Phở bò</li>
</ul>

  • Giải thích: <ul> là bao bên ngoài (cái rổ), <li> (List Item) là từng món bên trong.

  • Ứng dụng: Thường dùng làm Menu website.

2.4.2. Danh sách có thứ tự (<ol> – Ordered List)

  • Đặc điểm: Các mục đánh số 1, 2, 3… hoặc A, B, C…

  • Cú pháp:

    HTML
     
    <ol>
    <li>Bước 1: Mở nắp</li>
    <li>Bước 2: Chế nước sôi</li>
</ol>

  • Ứng dụng: Dùng cho hướng dẫn quy trình, bảng xếp hạng.

2.5. Cấu trúc ngữ nghĩa (Semantic Tags) – Quan trọng

Thay vì dùng thẻ vô nghĩa <div> cho mọi thứ, HTML5 cung cấp các thẻ có tên gọi rõ ràng để mô tả bộ phận trang web.

  • <header>: Phần đầu trang (Chứa Logo, Menu).

  • <nav>: Khu vực điều hướng (Chứa menu link).

  • <main>: Phần nội dung chính (Độc nhất trong trang).

  • <section>: Một phân đoạn nội dung (Ví dụ: Phần “Tin mới”, Phần “Sản phẩm bán chạy”).

  • <article>: Một bài viết độc lập (Ví dụ: Một bài báo, một bài blog).

  • <footer>: Chân trang (Chứa bản quyền, thông tin liên hệ).

  • Ví dụ minh họa cấu trúc:

    HTML
     
    <body>
    <header>
        <h1>LOGO CÔNG TY</h1>
        <nav>
            <ul><li>Trang chủ</li><li>Liên hệ</li></ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>Giới thiệu công ty</h2>
            <p>Chúng tôi là...</p>
        </section>
    </main>

    <footer>
        <p>Bản quyền 2025.</p>
    </footer>
</body>

Bài tập 2.1: Tạo CV cá nhân (Sơ yếu lý lịch)

  • Yêu cầu: Sử dụng các thẻ đã học để trình bày một trang CV đơn giản.

  • Hướng dẫn từng bước:

    1. Tạo file cv-cua-toi.html.

    2. Dùng <h1> cho Họ và tên.

    3. Dùng <img> chèn ảnh chân dung (đã học bài 1).

    4. Dùng <h2> cho các mục: “Thông tin liên hệ”, “Kỹ năng”, “Học vấn”.

    5. Trong mục “Kỹ năng”, dùng thẻ <ul> để liệt kê (Ví dụ: HTML, Word, Excel).

    6. Dùng thẻ <strong> để in đậm các từ khóa quan trọng (Ví dụ: Thành thạo tin học văn phòng).

    7. Dùng thẻ <hr> để ngăn cách giữa các phần.

Bài tập 2.2: Soạn thảo một bài báo tin tức

  • Yêu cầu: Lên mạng copy một bài báo ngắn và trình bày lại bằng HTML.

  • Mục tiêu: Thực hành chia đoạn <p> và dùng thẻ tiêu đề đúng cấp độ.

  • Code mẫu gợi ý:

    HTML
     
    <article>
    <h1>U23 Việt Nam giành chiến thắng</h1>
    <p><i>Theo phóng viên tại sân vận động...</i></p>
    <p>Chiều nay, đội tuyển <strong>Việt Nam</strong> đã thi đấu xuất sắc...</p>
    <h2>Diễn biến hiệp 1</h2>
    <p>Phút thứ 10, cầu thủ A sút vào lưới...</p>
</article>

4. Câu hỏi ôn tập

  1. Câu hỏi: Tại sao không nên dùng thẻ <h1> cho tất cả các dòng chữ to trên trang web?

    • Trả lời: Vì <h1> là tiêu đề quan trọng nhất, Google dùng nó để hiểu nội dung chính. Dùng bừa bãi sẽ làm giảm thứ hạng tìm kiếm (SEO) và làm rối cấu trúc trang.

  2. Câu hỏi: Sự khác nhau giữa ấn phím Enter trong code và dùng thẻ <br>?

    • Trả lời: Ấn Enter trong code chỉ giúp code dễ nhìn, trình duyệt sẽ bỏ qua và gộp thành 1 dòng. Thẻ <br> là lệnh bắt buộc trình duyệt phải xuống dòng khi hiển thị.

  3. Câu hỏi: Khi nào nên dùng <ul> và khi nào dùng <ol>?

    • Trả lời: Dùng <ul> (dấu chấm) khi thứ tự không quan trọng (Ví dụ: Nguyên liệu nấu ăn). Dùng <ol> (số 1,2,3) khi thứ tự là bắt buộc (Ví dụ: Các bước thực hiện).

  4. Câu hỏi: Thẻ <strong> và thẻ <b> hiển thị giống hệt nhau (đều in đậm), vậy tại sao nên dùng <strong>?

    • Trả lời: Vì <strong> mang ý nghĩa ngữ nghĩa (Semantic), giúp các công cụ tìm kiếm và thiết bị hỗ trợ người khuyết tật hiểu rằng nội dung đó quan trọng, chứ không chỉ là trang trí.