STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • 0
    • Sao chép

    Các Thẻ - Tag Thông Dụng trong HTML

    Liệt kê các loại thẻ (tag) thường dùng trong HTML để trình bày 1 trang web.
    18/08/2015
    02/09/2020
    8 phút đọc
    Các Thẻ - Tag Thông Dụng trong HTML

    Công cụ hỗ trợ

    Sử dụng editor bất kỳ hỗ trợ nhập mã và lưu lại với phần mở rộng .html hoặc .htm.

    Khái niệm cơ bản

    Thẻ (tag)

    HTML là một ngôn ngữ trình bày thuần túy nên khi sử dụng HTML, chỉ có thể định nghĩa những đối tượng hiển thị và cách hiển thị của đối tượng đó trên trang web thông qua các 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 đượ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:

    • 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:red">Nội dung 1</i><br/>
    <i style="background-color:#ffb300">Nội dung 2</i>

    Kết quả

    Nội dung 1
    Nội dung 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ẻ này đượ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 loại thẻ này 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ấu trúc một file html

    Một file html 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. Ví dụ một đoạn HTML sau đây vẫn cho ra kết quả bình thường:

    <body bgcolor="Wheat"></body>

    Nhóm thẻ block

    Gồm các thẻ cơ bản:

    • <h1>, ..., <h6>
    • <p>
    • <div>
    • <dl>, <dt>, <dd>
    • <ul>, <ol>, <li>

    * Các ví dụ đều thể hiện trên trình duyệt được.

    Đị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 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 thứ nhất.</p>
    <p>Đoạn văn thứ hai.</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>
    Mùa xuân hoa nở đẹp tươi.<br />
    Bướm con bướm mẹ ra chơi hoa hồng.
    </p>
    <p>
    Bướm mẹ hút mật đầu bông, bướm con đùa với nụ hồng đỏ hoe. </p>

    Kết quả

    Mùa xuân hoa nở đẹp tươi.
    Bướm con bướm mẹ ra chơi hoa hồng.

    Bướm mẹ hút mật đầu bông, bướm con đùa với nụ hồng đỏ hoe.

    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. Thẻ này 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 nhiên 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 những phần tử trong nó sẽ cấu thành nên một danh sách (list).
    • <dt> (define term) định nghĩa phần tử trong nó là một phần tử (item) 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: Trang Web Đầu Tiên</dt>
    	<dd>Hướng dẫn từng bước đầu tiên tạo trang web với HTML.</dd>
    
    	<dt>HTML - Phần 1: Cơ Bản về HTML</dt>
    	<dd>Các kiến thức cơ bản về HTML trong thiết kế web và tạo trang web đầu tiên với HTML.</dd>
    
    	<dt>Thay Đổi Màu Sắc Trên Tab-bar Trình Duyệt Web</dt>
    	<dd>Hướng dẫn thay đổi màu sắc tab bar trình duyệt web mobile.</dd>
    </dl>

     Kết quả

    HTML - Phần 0: Trang Web Đầu Tiên
    Hướng dẫn từng bước đầu tiên tạo trang web với HTML.
    HTML - Phần 1: Cơ Bản về HTML
    Các kiến thức cơ bản về HTML trong thiết kế web và tạo trang web đầu tiên với HTML.
    Thay Đổi Màu Sắc Trên Tab-bar Trình Duyệt Web
    Hướng dẫn thay đổi màu sắc tab bar trình duyệt web mobile.

    Bộ thẻ định nghĩa danh sách (có thứ tự): <ol> </ol>, <li> </li>

    <ol> (ordered list) là thẻ định nghĩa những đố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>Đạt Hoàng Tiến</li>
    	<li>Cường Trần</li>
    	<li>Tài Dư Phát</li>	
    	<li>Hiếu Nguyễn Minh</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ả

    1. Đạt Hoàng Tiến
    2. Cường Trần
    3. Tài Dư Phát
    4. Hiếu Nguyễn Minh
    5. ...

    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>Tỉnh Long An</li>
    	<li>Tỉnh Tiền Giang</li>
    	<li>Tỉnh Cao Bằng</li>
    	<li>Tỉnh Lạng Sơn</li>
    </ul>

    Kết quả

    • Tỉnh Long An
    • Tỉnh Tiền Giang
    • Tỉnh Cao Bằng
    • Tỉnh Lạng Sơn

    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://training.stdio.vn">STDIO Training</a><br/>
    <a href="mailto:training@stdio.vn">training@stdio.vn</a>

    Kết quả

    STDIO Training
    training@stdio.vn

    * 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ự /.

    Ví dụ

    <img src="https://resources.stdio.vn/content/article/5ef62a28fc765a6e805ebca1/resources/res-1598960736-1598960736130.jpg/statics/phone/images/logo.png" alt="STDIO Training" />

    * Thuộc tính src là nguồn của hình ảnh mà chúng ta cần thể hiện lên trang web, alt là thuộc tính định nghĩa một chuỗi ký tự sẽ thay thế cho hình ảnh nếu hình ảnh không thể hiện được lên trang web.

    Kết quả

    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ự.

    Ví dụ

    <b><i><u>Đậm, nghiêng và gạch dưới.</u></i></b>

    Kết quả

    Đậm, nghiêng và gạch dưới.

    HTML (Hyper Text Markup Languague) là một dạng ngôn ngữ được dùng để tạo nên các trang web. Với HTML không cần lo về việc chương trình dừng đột ngột hoặc đưa ra những Error, Break, Warning như khi làm việc với những ngôn ngữ lập trình, sự quan tâm cần thiết là các thể hiện website có đúng như mong muốn hay không?

    0
    HTML Cheat Sheet

    HTML Cheat Sheet

    STDIO Training - Đào tạo lập trình Front-end.

    Khi bạn nhấn vào liên kết sản phẩm do STDIO đề xuất và mua hàng, STDIO có thể nhận được hoa hồng. Điều này hỗ trợ STDIO tạo thêm nhiều nội dung hữu ích.. Tìm hiểu thêm.

    Đề xuất

    HTML - Phần 8: Thẻ Form trong HTML
    Thẻ <form> - "khung nhập liệu" trong HTML điền thông tin ứng dụng trong ...
    HTML - Phần 6: Các Thẻ Input trong HTML
    Các loại thẻ <input> hỗ trợ nhập liệu chuỗi, số, mật khẩu, ... trong ...

    Khám phá

    Validate Form Bằng Thư Viện Knockout-Validation trong Dự Án Durandaljs
    Bài viết hướng dẫn sử dụng thư viện Knockout-Validation để kiểm tra dữ ...
    HTML - Phần 3: Thẻ Liên Kết trong HTML
    Thẻ liên kết <a href="...">...</a> được xem như là trái tim của 1 trang ...
    HTML - Phần 5: Các Thẻ Hình Ảnh, Video, Audio
    Âm thanh, hình ảnh, video clip làm cho trang web thêm tiện ích, đẹp và ...
    HTML - Phần 1: Cơ Bản Về HTML
    Các kiến thức cơ bản về HTML trong thiết kế web và tạo trang web đầu ...
    HTML - Phần 4: Các Thẻ Định Dạng Danh Sách
    Các thẻ định dạnh danh sách <ul>, <ol>, <li> trong HTML. Các thẻ danh ...
    HTML Entities
    HTML Entities được tạo ra để biểu diễn những ký tự đặc biệt đó dưới dạng ...
    Thẻ Từ và Các Loại Thẻ Từ
    Các loại thẻ từ dùng làm thẻ thang máy, thẻ gửi xe, thẻ nhân viên, thẻ ...
    HTML - Phần 2: Các Thẻ Định Dạng Văn Bản
    Giới thiệu và hướng dẫn sử dụng 1 số thẻ định dạng văn bản HTML.
    STDIO
    Trang chính
    Công ty TNHH STDIO

    30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
    +84 28.36205514 - +84 942.111912
    developer@stdio.vn

    383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
    Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

    ©STDIO, 2013 - 2020