Các Thẻ Trong HTML Cơ Bản và Cách Sử Dụng

Phụ lục
cac-the-trong-html-co-ban-va-cach-su-dung

HTML (HyperText Markup Language) là ngôn ngữ cơ bản để tạo ra các trang web. Việc nắm vững các thẻ HTML cơ bản là bước đầu tiên quan trọng cho bất kỳ ai muốn học lập trình web. Bài viết này sẽ giới thiệu các thẻ HTML cơ bản và cách sử dụng chúng một cách chi tiết.

1. Thẻ <!DOCTYPE html>

Thẻ <!DOCTYPE html> là thẻ đầu tiên trong mỗi tài liệu HTML, giúp trình duyệt biết rằng tài liệu này được viết bằng HTML5.

2. Thẻ <html>

Thẻ <html> là thẻ gốc bao bọc toàn bộ nội dung của tài liệu HTML.

html
Copy code
<!DOCTYPE html>
<html>
    <!-- Nội dung của trang web sẽ được đặt ở đây -->
</html>

3. Thẻ <head>

Thẻ <head> chứa các thông tin meta, các liên kết tới tệp CSS, JavaScript và các thẻ quan trọng khác như <title>.

html
Copy code
<head>
    <meta charset="UTF-8">
    <title>Tiêu đề của trang web</title>
</head>

4. Thẻ <title>

Thẻ <title> xác định tiêu đề của trang web và được hiển thị trên thanh tiêu đề của trình duyệt.

html
Copy code
<title>Trang chủ</title>

5. Thẻ <body>

Thẻ <body> chứa toàn bộ nội dung hiển thị của trang web, bao gồm văn bản, hình ảnh, liên kết, bảng biểu, v.v.

html
Copy code
<body>
    <!-- Nội dung chính của trang web -->
</body>

6. Thẻ <h1> đến <h6>

Các thẻ <h1> đến <h6> được sử dụng để tạo các tiêu đề với mức độ quan trọng giảm dần. Thẻ <h1> là tiêu đề quan trọng nhất, và thẻ <h6> là tiêu đề ít quan trọng nhất.

html
Copy code
<h1>Tiêu đề chính</h1>
<h2>Tiêu đề phụ</h2>

7. Thẻ <p>

Thẻ <p> được sử dụng để tạo các đoạn văn bản.

html
Copy code
<p>Đây là một đoạn văn bản.</p>

8. Thẻ <a>

Thẻ <a> được sử dụng để tạo các liên kết đến các trang web khác hoặc các phần khác trong cùng một trang web.

html
Copy code
<a href="https://www.example.com">Liên kết đến Example</a>

9. Thẻ <img>

Thẻ <img> được sử dụng để chèn hình ảnh vào trang web. Thẻ này không có thẻ đóng và phải có thuộc tính src chỉ định đường dẫn đến hình ảnh.

html
Copy code
<img src="image.jpg" alt="Mô tả hình ảnh">

10. Thẻ <ul>, <ol>, và <li>

Các thẻ <ul> (unordered list) và <ol> (ordered list) được sử dụng để tạo danh sách không có thứ tự và có thứ tự. Các mục trong danh sách được định nghĩa bằng thẻ <li> (list item).

html
Copy code
<ul>
    <li>Mục 1</li>
    <li>Mục 2</li>
</ul>

<ol>
    <li>Mục 1</li>
    <li>Mục 2</li>
</ol>

11. Thẻ <div><span>

Thẻ <div><span> là các thẻ dùng để nhóm các phần tử lại với nhau. Thẻ <div> thường được sử dụng để tạo các khối (block), trong khi thẻ <span> được sử dụng để định dạng các phần tử inline.

html
Copy code
<div>
    <p>Đây là một khối văn bản.</p>
</div>

<span>Đây là một phần tử inline.</span>

Việc nắm vững các thẻ HTML cơ bản là nền tảng cho việc xây dựng và phát triển trang web. Bài viết này đã giới thiệu các thẻ quan trọng và cách sử dụng chúng. Hãy tiếp tục thực hành và tìm hiểu thêm để trở thành một lập trình viên web chuyên nghiệp.

Bạn đọc tham khảo thêm: 

Mức lương chung của IT Dev thị trường VIệt Nam hiện nay.

Các Level Trong CNTT. Cách Phân Biệt Và Đánh Giá Năng Lực

Devwork

Devwork là Nền tảng TUYỂN DỤNG IT CẤP TỐC với mô hình kết nối Nhà tuyển dụng với mạng lưới hơn 30.000 headhunter tuyển dụng ở khắp mọi nơi.Với hơn 1800 doanh nghiệp IT tin dùng Devwork để :

  • Tối ưu chi phí
  • Tiết kiệm thời gian
  • Tăng tốc tuyển dụng tối đa
  • Đăng ký ngay Devwork trong hôm nay để tuyển dụng những tài năng ưu tú nhất.

    Tag Cloud:

    Tác giả: Lưu Quang Linh

    Link chia sẻ

    Bình luận

    Bài viết liên quan

    Danh sách bài viết liên quan có thể bạn sẽ thích Xem thêm
    tim-hieu-jira-la-gi

    Jira là gì? Hướng dẫn CHI TIẾT cho người mới bắt đầu quản lý dự án Agile

    08:05 06/06/2025

    Nhiều người mới bắt đầu thường nhầm lẫn Jira là một công cụ khó dùng và chỉ dành cho dân kỹ thuật. Sự thật thì Jira có thể tùy chỉnh linh hoạt cho mọi nhu cầu quản lý dự án. Bài viết sẽ giúp bạn hiểu cặn kẽ Jira là gì, hoạt động ra sao và làm thế nào để bắt đầu nhanh chóng....

    Closure là gì? Tìm hiểu cách hoạt động và cách nhận biết Closure

    09:43 05/06/2025

    Trong lậu trình JavaScript, Closure được xem là một trong những khái niệm quan trọng nhưng đồng thời cũng khiến nhiều người bỏ ngỡ. Closure không chỉ là cách JavaScript quản lý phạm vi biến, mà còn là nền tảng để tạo ra những chức năng đặc biệt như biến private, ghi nhớ trạng thái và xây dựng những module linh hoạt. Bài viết này Devwork sẽ giúc bạn hiểu sâu Closure là gì, nó hoạt động ra sao và áp dụng như thế nào trong thực tế.

    closure-la-gi

    Sass là gì? Tìm hiểu cách thức hoạt động và những lợi ích của Sass

    07:33 05/06/2025

    SASS là gì? Bất kỳ ai đang hoạt động trong ngành lập trình đều phải nắm bắt cách dụng SASS. Đây là một công cụ quan trọng giúp bạn khai thác ngôn ngữ tiền xử lý CSS hiệu quả. Vậy SASS là gì? Cách thức hoạt động như thế nào? Toàn bộ thắc mắc kể trên sẽ được Devwork giới thiệu ngay sau đây!

    loi-ich-cua-sass-la-gi

    NPM là gì? Tìm hiểu phương thức hoạt động và ứng dụng của npm

    07:15 05/06/2025

    Bạn đang tìm hiểu npm là gì? Trong thế giới phát triển web hiện đại, đặc biệt là với sự bùng nổ của JavaScript, chắc chắn bạn đã từng nghe đến thuật ngữ npm. Nhưng npm là gì mà lại đóng vai trò quan trọng đến vậy? Bài viết này Devwork sẽ cùng bạn tìm hiểu npm, từ định nghĩa cơ bản, phương thức hoạt động đằng sau, những lưu ý quan trọng khi sử dụng nhé!

    ung-dung-npm-la-gi
    loi-ich-cua-cli-la-gi

    CLI Là Gì? Tìm hiểu lợi ích và cách thức hoạt động của CLI

    06:56 05/06/2025

    Trong thế giới công nghệ thông tin, CLI là một công cụ mạnh mẽ mà nhiều lập trình viên và quản trị viên hệ thống sử dụng. Bài viết này Devwork sẽ đi sâu vào định nghĩa CLI, những lợi ích nổi bật của nó, quy trình hoạt động, sự khác biệt giữa CLI và GUI, và cuối cùng là những ứng dụng thực tiễn của CLI trong công việc hàng ngày.

    design-pattern-la-gi

    Design Pattern là gì? Khi nào Nên sử dụng Design Pattern?

    08:37 04/06/2025

    Trong thế giới lập trình, việc tạo ra các ứng dụng phức tạp và hiệu quả là một thách thức không nhỏ. Design patterns (mô hình thiết kế) chính là những giải pháp đã được chứng minh hiệu quả giúp các lập trình viên giải quyết các vấn đề thường gặp trong quá trình phát triển phần mềm. Bài viết này sẽ giúp bạn hiểu rõ hơn về design patterns là gì, lý do tại sao chúng quan trọng, các loại mô hình thiết kế phổ biến và thời điểm nên áp dụng chúng.