Tin tức
Danh sách các thẻ HTML thông dụng bạn cần biết
Khi tìm hiểu về HTML, các thẻ HTML thông dụng là kiến thức cần thiết và là hữu dụng nó sẽ là một sổ tay hữu dụng để bạn tra cứu các thẻ trong HTML và cách sử dụng nó. Mẫu Website 24h sẽ liệt kê các thẻ HTML thông dụng, hãy theo dõi đến cuối bài viết nhé.
Khái niệm cơ bản
Thẻ (tag)
HTML là ngôn ngữ lập trình trình bày thuần túy, vậy nên khi sử dụng HTML, chỉ có thể định nghĩa các đối tượng hiển thị và cách hiển của các đối tượng đó trên trên web thông qua các tag (thẻ)
Mẫu thẻ:
<(tagname)> (nội dung hiển thị) </(tagname)>
Ví dụ:
<b>Chữ in đậm.</b>
Kết quả: Chữ in đậm.
Thuộc tính (properties)
Thuộc tính (properties) được đưa vào 1 số thẻ để định dạng hiển thị cho đối tượng của thẻ, 1 thẻ có thể kèm một hoặc nhiều thuộc tính. Thuộc tính gồm nhiều loại khác nhau:
- Thuộc tính
class. - Thuộc tính
id. - Thuộc tính
title. - Thuộc tính
style.
Mẫu thẻ có thuộc tính:
<(tagname) (từ khóa)="(giá trị)"> (nội dung) </(tagname)>
Ví dụ
<i style="color:blue">Nội dung mẫu</i><br/> <i style="background-color:#00BFFF">Nội dung mẫu 2</i>
Kết quả
Nội dung mẫu
Nội dung mẫu 2
Lưu ý:
Một thẻ có thể chứa một hoặc nhiều thuộc tính, những thuộc tính phân biệt nhau bởi: dấu cách (space).
Các nhóm thẻ trong HTML
- Block: định nghĩa bố cục cho trang web (phân đoạn, tiêu đề, danh sách, phân nhóm, …).
- Đặc điểm của thẻ block được thấy rõ khi sử dụng là sau đó các phần tử như thẻ khác, chữ, hình ảnh sẽ rơi xuống dòng khác.
- Inline: định nghĩa các phần tử chi tiết của trang web (hiển thị hình ảnh, ngắt dòng văn bản, tạo hyperlink, …).
- Đặc điểm của inline khi sử dụng thì các phần tử có tính chất inline sẽ chung 1 dòng, như sau thẻ
<a>thì các chữ khác vẫn liền kề sau đó.
- Đặc điểm của inline khi sử dụng thì các phần tử có tính chất inline sẽ chung 1 dòng, như sau thẻ
Cấu trúc một file html
Một file html bao gồm 3 phần cơ bản được bao trong thẻ <html>.
- Header:
<head> - Body:
<body> - Footer:
<footer>
<html>
<head>
Header Objects
</head>
<body>
Body Objects
</body>
<footer>
Footer Objects
</footer>
</html>
Không nhất thiết phải đưa tất cả thẻ vào thẻ <html> để chạy một trang web, không như ngôn ngữ lập trình, HTML không khắt khe về vấn đề cấu trúc. Những thẻ độc lập vẫn thể hiện được một trang web bình thường.
Nhóm thẻ block
Gồm các thẻ cơ bản như sau:
<h1>, …,<h6><p><div><dl>,<dt>,<dd><ul>,<ol>,<li>
Định dạng phân mục: <h1> </h1>, …, <h6> </h6>
Trong HTML có 6 thẻ dành cho việc phân mục từ lớn tới nhỏ, từ <h1> (header) đến <h6> tương tự như các mục (A, II, 3, d…) trong sách giáo khoa.
Ví dụ:
<h1>Header 1</h1> <h2>Header 2</h2> <h3>Header 3</h3> <h4>Header 4</h4> <h5>Header 5</h5> <h6>Header 6</h6>
Định đạng đoạn văn bản – <p> </p>
Thẻ <p> (paragraph) định nghĩa cho các phần tử trong nó là đoạn văn bản. <p> có thể chứa trong nó những chuỗi ký tự hay các thẻ thuộc. Nhóm inline – gồm image, link, button…
* Thẻ <p> không chứa các thẻ thuộc nhóm Block.
Mỗi thẻ <p> chỉ được chứa trong nó một nội dung văn bản (tức một đoạn văn / một hình ảnh / một link…), nếu có 2 đoạn văn bản, nên đặt chúng trong 2 thẻ <p> riêng biệt.
Ví dụ
<p>Đoạn văn 1.</p> <p>Đoạn văn 2.</p>
Đoạn văn bản trong HTML không nhận ký tự Enter như một ký tự xuống dòng, trường hợp đoạn văn quá dài, ta có thể đặt thẻ <br /> tại nơi muốn xuống dòng đoạn văn đó. Thẻ này thuộc nhóm inline và không được sử dụng để thay thế cho <p> trong trường hợp 2 đoạn văn bản.
Ví dụ
<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> <p> Rắn nát mặc dù tay kẻ nặn,<br/> Mà em vẫn giữ tấm lòng son. </p>
Kết quả
Thân em vừa trắng, lại vừa tròn,
Bảy nổi ba chìm với nước non.
Rắn nát mặc dù tay kẻ nặn,
Mà em vẫn giữ tấm lòng son.
Phân nhóm các đối tượng trên trang – <div> </div>
<div> (division) là thẻ phân nhóm các đối tượng. Những đối tượng nằm trong cùng một thẻ <div> sẽ có vị trí tương quan cố định với nhau. Division hỗ trợ để trình duyệt hiểu đúng bố cục trang web, khá giống với chức năng “group” các “Shape” trong Word.
Tuy vậy, không nên lạm dụng <div> cho những chi tiết quá nhỏ như những đoạn văn bản riêng lẻ, một hình ảnh, một đường link, …
Ví dụ
<p>Đoạn văn thứ nhất.</p> <div> <p>1. Đoạn văn trong thẻ p trong div 1.</p> <p>2. Đoạn văn trong thẻ p trong div 2.</p> <p>3. Đoạn văn trong thẻ p trong div 3.</p> </div>
Bộ thẻ định nghĩa danh sách: <dl> </dl>, <dt> </dt>, <dd> </dd>
<dl>(define list) định nghĩa các phần tử trong nó sẽ cấu thành nên một list (danh sách).<dt>(define term) định nghĩa phần tử trong nó là một item (phần tử) của danh sách.<dd>(define description) định nghĩa phần tử trong nó là một lời giải thích cho item phía trên.
Ví dụ
<dl> <dt>HTML - Phần 0: Giới thiệu HTML</dt> <dd>Giải thích khái niệm và các kiến thức cơ bản của HTML.</dd> <dt>HTML - Phần 1: Các thẻ HTML thông dụng</dt> <dd>Danh sách các thẻ HTML thông dụng cần biết.</dd> </dl>
Kết quả
- HTML – Phần 0: Giới thiệu HTML
- Giải thích khái niệm và các kiến thức cơ bản của HTML
- HTML – Phần 1: Các thẻ HTML thông dụng
- Danh sách các thẻ HTML thông dụng cần biết
Bộ thẻ định nghĩa danh sách (có thứ tự): <ol> </ol>, <li> </li>
<ol> (ordered list) là thẻ định nghĩa các đối tượng trong nó là những phần tử của một danh sách có thứ tự. Những kí tự đứng trước mỗi đối tượng có thể là một số hoặc một ký tự, một chữ cái.
<li> định nghĩa phần tử trong nó là một đối tượng của danh sách.
Ví dụ
<ol> <li>Thơ tự tình – Hồ Xuân Hương</li> <li>Lấy chồng chung – Hồ Xuân Hương</li> <li>Đánh đu – Hồ Xuân Hương</li> <li>Bánh trôi nước – Hồ Xuân Hương</li> <li>...</li> </ol>
* Thuộc tính type được dùng trong thẻ <ol> để định nghĩa kiểu kí tự liệt kê của danh sách, type có các giá trị: 1, a, A, i, I.
Kết quả
- Thơ tự tình – Hồ Xuân Hương
- Lấy chồng chung – Hồ Xuân Hương
- Đánh đu – Hồ Xuân Hương
- Bánh trôi nước – Hồ Xuân Hương
- …
Bộ thẻ định nghĩa danh sách (không có thứ tự): <ul> </ul>, <li> </li>
<ul> (unordered list) là thẻ định nghĩa các phần tử trong nó là những phần tử của một danh sách liệt kê nhưng không có thứ tự. Bộ thẻ này khá tương tự như <dl> nhưng không có chú thích, và có dấu ký hiệu đầu cho mỗi phần tử. Bộ thẻ này sử dụng <li> tương tự như <ol>.
Ví dụ
<ul> <li>Thơ tự tình – Hồ Xuân Hương</li> <li>Lấy chồng chung – Hồ Xuân Hương</li> <li>Đánh đu – Hồ Xuân Hương</li> <li>Bánh trôi nước – Hồ Xuân Hương</li> </ul>
Kết quả
- Thơ tự tình – Hồ Xuân Hương
- Lấy chồng chung – Hồ Xuân Hương
- Đánh đu – Hồ Xuân Hương
- Bánh trôi nước – Hồ Xuân Hương
Nhóm thẻ Inline
Gồm các thẻ cơ bản:
<a> </a><img /><br /><strong> </strong>/<b> </b><em> </em>/<i> </i><u> </u>
Định nghĩa một đường dẫn: <a> </a>
<a> là thẻ tạo 1 liên kết đến một trang web / một email / một file / số điện thoại, …
Ví dụ
<a href="https://mauwebsite24h.com">Mẫu website 24h</a><br/> <a href="mailto:www.mauwebsite24h.com">www.mauwebsite24h.com</a>
Kết quả
Mẫu website 24h
www.mauwebsite24h.com
* Thuộc tính href cho phép ta gắn địa chỉ cụ thể mà liên kết sẽ dẫn tới.
Thể hiện hình ảnh: <img />
<img /> (image) là thẻ chèn hình ảnh vào trang web. Cấu trúc của <img /> không sử dụng thẻ đóng như những thẻ khác mà sử dụng ký tự /.
3 định dạng ký tự cơ bản cho chuỗi ký tự: <b> </b>, <i> </i>, <u> </u>
<b> (Bold) là thẻ cho phép ta in đậm chuỗi ký tự đặt giữa nó. Tương tự, <i> (Italic) là in nghiêng và <u> (Underline) là gạch chân chuỗi ký tự.
Danh sách tất cả các thẻ trong HTML
<html>: Thẻ mở đầu của trang HTML – none<head> </head>: Thẻ chứa các thẻ trong phần đầu của trang HTML – none<title> </title>: Tiêu đề trang web – none<meta>: Mô tả tổng quát về nội dung trang web – none<link>: Dùng để nhúng một tập tin nào đó vào trang web – none<script> </script>: Dùng để nhúng các tập tin javascript – none<style> </style>: Dùng để bao bọc một nội dung về css – none<body> </body>: Thẻ chứa nội dung chính của website – block level<h1></h1>: Thẻ để hiện tiêu đề của một vấn đề nào đó – block level<div> </div>: Thẻ này thường dùng để chứa nội dung – block level<span> </span>: Thẻ chứa nội dung – inline<p> </p>: Thẻ chứa nội dung (đoạn văn) – block level<center> </center>: Thẻ canh giữa các đối tượng nằm bên trong – block level<a> </a>: Thẻ tạo link – inline<ul> </ul>: Kết hợp với thẻ<li>để mô tả liệt kê theo dạng danh sách – block level<img>: Thẻ dùng để hiển thị một hình ảnh nào đó – inline<form> <input>: Thẻ hiển thị những phần tử trong form nhập liệu – block level<br>: Thẻ xuống hàng – block level<hr>: Thẻ tạo đường kẻ ngang – block level<table> </table>: Tạo bảng – block level<iframe> </iframe>: Tạo frame – block level<b> </b>: Tạo chữ đậm – inline<i> </i>: Tạo chữ nghiêng – inline<u> </u>: Tạo chữ gạch dưới – inline<s> </s>: Tạo chữ gạch cắt ngang – inline<sub> </sub> <sup> </sup>: Tạo kiểu chứ – inline<blockquote>: Mộ tả một phần của trích dẫn – block level<tt> </tt> <code> </code>: Tạo kiểu chữ cho phần mô tả mã nguồn – block level<pre>: Định dạng nội dung – block level
Lời kết
Trên đây là các thẻ HTML thông dụng mà các bạn cần biết, Mẫu Website 24h hi vọng các bạn có thể giải đáp được các thắc mắc cũng như biết cách sử dụng các thẻ một cách phù hợp. Chúc các bạn thành công. Mọi thắc mắc hãy liên hệ với chúng tôi – Dịch vụ thiết kế web hàng đầu Việt Nam.