Các phần tử HTML quan trọng

TL;DR / Tổng quan

Trong HTML, các phần tử được chia thành hai loại là dạng inline và dạng khối (block-level). Điều này ảnh hưởng đến cách chúng hiển thị trên trang và cấu trúc của nội dung. Hiểu được cách hoạt động này giúp bạn xây dựng bố cục sạch, chuẩn ngữ nghĩa trên Nilead — dù sử dụng Trình soạn thảo trực quan hay viết HTML tùy theo ý bạn.

Yêu cầu trước khi bắt đầu

• Hiểu biết cơ bản về cấu trúc HTML

• Có quyền truy cập vào Trình xây dựng Website trực quan của Nilead hoặc trình soạn mã tùy chỉnh

• Quen thuộc với việc chỉnh sửa nội dung và các phần tử bố cục

Hướng dẫn chi tiết

Block vs Inline: Khác biệt ở đâu?

Các phần tử văn bản & nội dung phổ biến

Tiêu đề và đoạn văn

<h1>Trang đầu tiên của tôi</h1> <p>Đây là một đoạn văn.</p>

• <h1> đến <h6> là phần tử dạng khối

• <p> là phần tử dạng khối

• Cách tốt nhất cho SEO: Chỉ nên dùng một <h1> trên mỗi trang

Liên kết

<a href="https://www.google.com">Truy cập Google</a> 
<a href="mailto:[email protected]">Gửi email cho chúng tôi</a> 
<a href="#section">Chuyển đến phần</a>

• <a> là phần tử inline

• Có thể liên kết đến các URL ngoài, email, số điện thoại, hoặc Anchor nội bộ

Danh sách

<ul> 
<li>Cà phê</li> 
<li>Trà 
<ol> 
<li>Đen</li> 
<li>Xanh</li> 
</ol> 
</li> 
</ul>

• <ul> và <ol> là phần tử dạng khối

• <li> là dạng khối

• Có thể lồng nhau và rất hữu ích cho dữ liệu phân cấp

Hình ảnh

<img src="/static/img/code.jpg" width="100">

• <img> là một phần tử inline

• Sử dụng width, height hoặc style để thiết lập kích thước

• Có thể đặt trong đoạn văn hoặc container

Video

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> </video>

• <video> là một phần tử inline

• Hữu ích để nhúng nội dung đa phương tiện

• Không được hỗ trợ đầy đủ trên những trình duyệt rất cũ

Các phần tử bố cục

<div> – Khối chứa

<div class="wrapper">Content goes here</div>

• Dùng để nhóm các phần tử

• Dễ dàng tuỳ chỉnh kiểu hoặc gắn script

• Hành vi mặc định: block

<span> – Bao inline

<p>Đây là một từ <span class="highlight">nổi bật</span>.</p>

• Dùng để định dạng một phần của văn bản

• Inline, không chứa được nội dung block-level

Bảng

<table> <thead> <tr><th colspan="2">Header</th></tr> </thead> <tbody> <tr><td>Dòng 1</td><td>Dữ liệu</td></tr> </tbody> </table>

• <table> và các phần tử con là block-level

• Nên dùng cho dữ liệu dạng bảng, không dùng để bố cục

• Hạn chế lạm dụng bảng để dựng cấu trúc trang

Các phần tử ngữ nghĩa (HTML5)

Những phần tử này giúp xác định mục đích của nội dung:

Sử dụng các phần tử ngữ nghĩa để tăng khả năng truy cập và tối ưu hóa SEO. Nilead hỗ trợ HTML ngữ nghĩa để mang lại cấu trúc tốt hơn.

Câu hỏi thường gặp

1. Tôi có thể lồng các phần tử khối vào trong các phần tử nội tuyến không?
Không. Phần tử nội tuyến không nên chứa phần tử khối — điều này có thể làm hỏng bố cục hoặc làm HTML không hợp lệ.

2. Tôi có thể biến một span thành phần tử khối không?
Có, bằng cách sử dụng CSS: display: block; — nhưng hãy cân nhắc sử dụng <div> nếu đó là mục đích của bạn.

3. Tôi nên dùng phần tử nào: <div> hay <section>?
Sử dụng <div> cho các vùng chứa tổng quát. Dùng <section> khi nội dung có mục đích rõ ràng, hợp lý.

4. <video> và <img> là phần tử khối hay nội tuyến?
Mặc định, chúng là nội tuyến, nhưng có thể được định dạng để hiển thị như phần tử khối.

5. Tôi có thể sử dụng các phần tử này trong Nilead Visual Editor không?
Có. Hầu hết đều có sẵn trực tiếp hoặc có thể thêm qua các khối HTML tùy chỉnh.