Thẻ vùng chứa HTML

Khám phá cách sử dụng thẻ vùng chứa trong HTML và tìm ra cách chọn thẻ

Thẻ vùng chứa

HTML cung cấp một tập hợp các thẻ vùng chứa. Các thẻ đó có thể chứa một tập hợp các thẻ khác không xác định.

Chúng ta có:

article
section
div

và có thể gây nhầm lẫn khi hiểu sự khác biệt giữa chúng.

Hãy xem khi nào thì sử dụng từng cái.

`article`

Thẻ bài viết xác định mộtĐiềucó thể độc lập vớinhiều thứtrong một trang.

Ví dụ danh sách các bài đăng trên blog trong trang chủ.

Hoặc một danh sách các liên kết.

<div>
	<article>
		<h2>A blog post</h2>
		<a ...>Read more</a>
	</article>
	<article>
		<h2>Another blog post</h2>
		<a ...>Read more</a>
	</article>
</div>

Chúng tôi không giới hạn danh sách: một bài báo có thể là thành phần chính trong một trang.

<article>
	<h2>A blog post</h2>
	<p>Here is the content...</p>
</article>

Bên trong mộtarticlethẻ chúng ta nên có một tiêu đề (h1-h6) và

`section`

Đại diện cho một phần của tài liệu. Mỗi phần có một thẻ tiêu đề (h1-h6), sau đó là phầnthân hình.

Thí dụ:

<section>
	<h2>A section of the page</h2>
	<p>...</p>
	<img ... />
</section>

Sẽ rất hữu ích khi chia một bài báo dài thành cácphần.

Không nên được sử dụng làm phần tử vùng chứa chung chung.divđược thực hiện cho điều này.

`div`

divlà phần tử vùng chứa chung:

<div>
	...
</div>

Bạn thường thêm mộtclasshoặc làidthuộc tính này, để cho phép nó được tạo kiểu bằng CSS.

Chúng tôi sử dụngdivở bất kỳ nơi nào mà chúng tôi cần một vùng chứa nhưng các thẻ hiện có không phù hợp.

`nav`

Thẻ này được sử dụng để tạo đánh dấu xác định điều hướng trang. Vào điều này, chúng tôi thường thêm mộtulhoặc làoldanh sách:

<nav>
	<ol>
		<li><a href="/">Home</a></li>
		<li><a href="/blog">Blog</a></li>
	</ol>
</nav>

`aside`

Cácasideđược sử dụng để thêm một phần nội dung có liên quan đến nội dung chính.

Ví dụ: một hộp để thêm trích dẫn. Hoặc một thanh bên.

Thí dụ:

<div>
  <p>some text..</p>
  <aside>
    <p>A quote..</p>
  </aside>
  <p>other text...</p>
</div>

Sử dụngasidelà một tín hiệu cho thấy những thứ mà nó chứa không phải là một phần của dòng chảy đều đặn của phần mà nó sinh sống.

`header`

Cácheaderthẻ đại diện cho một phần của trang là phần giới thiệu. Ví dụ, nó có thể chứa một hoặc nhiều thẻ tiêu đề (h1-h6), dòng giới thiệu cho bài viết, một hình ảnh.

<article>
  <header>
	  <h1>Article title</h1>
  </header>
  ...
</article>

`main`

Cácmainthẻ đại diện cho phần chính của trang:

<body>
  ....
  <main>
    <p>....</p>
  </main>
</body>

`footer`

Cácfooterđược sử dụng để xác định chân trang của bài viết hoặc chân trang của trang:

<article>
 ....
	<footer>
    <p>Footer notes..</p>
  </footer>
</article>

Tải xuống miễn phí của tôiSổ tay HTML

Thẻ vùng chứa HTML

Khám phá cách sử dụng thẻ vùng chứa trong HTML và tìm ra cách chọn thẻ