Bài 2 Các thẻ HTML cơ bản (HTML Tag)

Bài 2 Các thẻ HTML cơ bản (HTML Tag)
Các thẻ HTML cơ bản (HTML Tag)

Các thẻ hiển thị đầu đề (heading) trong HTML

Tài liệu nào cũng đều bắt đầu với một đầu đề. Bạn có thể sử dụng các kích cỡ khác nhau cho đầu đề của bạn. HTML cũng có 6 cỡ khác nhau cho đầu đề, sử dụng các thẻ cơ bản là <h1>, <h2>, <h3>, <h4>, <h5>, và <h6>. Trong khi hiển thị bất cứ một đầu đề nào, các trình duyệt sẽ thêm (để cách) một dòng trước và một dòng sau đầu đề đó.

Ví dụ:

 

<!DOCTYPE html>
<html>
<head>
<title>Day la tieu de - Vi du dau de</title>
</head>
<body>
<h1>Day la dau de 1</h1>
<h2>Day la dau de 2</h2>
<h3>Day la dau de 3</h3>
<h4>Day la dau de 4</h4>
<h5>Day la dau de 5</h5>
<h6>Day la dau de 6</h6>
</body>
</html>

Khi chạy, code trên sẽ hiển thị kết quả:

Ví dụ thẻ head trong HTML

Bạn sẽ thấy rằng độ lớn cũng như mức độ in đậm cho từng đầu đề là khác nhau tùy cho từng thẻ.

Tag biểu diễn đoạn văn trong HTML - Tag p trong HTML

Thẻ <p>, với p là viết tắt của Paragraph, giúp cấu trúc tài liệu HTML của bạn thành các đoạn văn khác nhau. Mỗi một đoạn văn trong tài liệu HTML sẽ ở trong một thẻ mở <p> và một thẻ đóng </p> như ví dụ bên dưới.

Ví dụ thẻ p trong HTML:

 

<!DOCTYPE html>
<html>
<head>
<title>Vi du the p trong HTML</title>
</head>
<body>
<p>Day la doan van thu nhat.</p>
<p>Day la doan van thu hai.</p>
<p>Day la doan van thu ba.</p>
</body>
</html>

Xem thêm : https://www.w3schools.com/tags/tag_html.asp

Thẻ phân chia khu vực

Định nghĩa và cách dùng

  • Thẻ <div></div> viết tắt của từ "division" có nghĩa là phân chia, ta có thể hiểu đây là sự phân chia khu vực hay vùng, sự phân chia này sẽ giúp cho trình duyệt hiểu rõ những vùng được bố cục trên trang web.
  • Có thể chứa hầu hết các thẻ trong HTML/XHTML.
  • Một số thẻ không được chứa bên trong <div></div>: <html></html><meta></meta><body></body><title></title><link></link>.
  • Một số thẻ không nên chứa bên trong <div></div>: <style></style><script></script>.
  • Một số khu vực khuyên sử dụng thẻ <div></div>:

    • Header, global navigation, page body, content, sidebar, footer (Xem lại cấu trúc cơ bản của trang web)
    • Một số khu vực lớn, cấu trúc có nhiều thẻ bên trong thì cũng nên nhóm lại bằng thẻ <div></div> để tiện cho việc điều khiển.

Xem ví dụ để hiểu rõ hơn về thẻ <div></div>, đoạn code bên dưới có sử dụng thuộc tính id, chúng ta có thể xem ở phần tham khảo thuộc tính id.

HTML viết

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tiêu đề trang web</title>
</head>

<body>
<div id="header">Viết nội dung phần header ở đây</div>

<div id="gNav">Viết nội dung phần global navigation ở đây</div>

<div id="pageBody">
<div id="content">Viết nội dung phần content ở đây</div>
<div id="sidebar">Viết nội dung phần sidebar ở đây</div>
</div>

<div id="footer">Viết nội dung phần footer ở đây</div>
</body>
</html>

Hiển thị trình duyệt:

Viết nội dung phần header ở đây

Viết nội dung phần global navigation ở đây

Viết nội dung phần content ở đây

Viết nội dung phần sidebar ở đây

Viết nội dung phần footer ở đây

Không nên sử dụng

Không nên sử dụng thẻ <div></div> trực tiếp cho những chi tiết nhỏ như: một đoạn text, một image, một liên kết, một button,... nói tóm lại không nên sử dụng thẻ <div></div> trực tiếp cho nhóm inline. Tuy trình duyệt sẽ hiển thị đúng ý đồ của tác giả, nhưng code như vậy sẽ không đúng với ý nghĩa của thẻ <div></div>, khiến trình duyệt khó xác định được đâu là nội dung lớn đâu là nội dung nhỏ.

<body>
<div>Đây là đoạn văn</div>
<div><img src="images/img_planet.gif" alt="Space" /></div>
<div>Trong đoạn văn này có chứa <a href="tut_html_layout.php">liên kết</a></div>
</body>