Thẻ phần tử khối

3.1 Phần tử <p>

Phần tử khối trong HTML được sử dụng để tạo cấu trúc và tổ chức nội dung trang web. Chúng giúp chia nhỏ nội dung thành các khối và phân đoạn logic. Các phần tử này bắt đầu ở dòng mới và chiếm toàn bộ chiều rộng có sẵn. Hãy cùng xem chi tiết về ba thẻ được sử dụng thường xuyên: <p>, <div>, và <span>.

Thẻ <p>

Thẻ <p> được sử dụng để tạo các đoạn văn bản. Nó là một phần tử khối: điều này có nghĩa là mỗi đoạn văn bắt đầu từ dòng mới và có khoảng cách trên và dưới.

Ví dụ sử dụng:

    
      <p>
        Đây là đoạn văn bản đầu tiên. Các đoạn văn được sử dụng để chia văn bản thành các khối logic,
        cải thiện khả năng đọc của nó.
      </p>
      <p>Đây là đoạn văn bản thứ hai. Mỗi đoạn văn bắt đầu từ dòng mới.</p>
    
  

Thuộc tính:

• Phần tử khối: Đặt trên dòng mới và chiếm toàn bộ chiều rộng có sẵn.
• Khoảng cách tự động: Thường thì các trình duyệt thêm khoảng cách trước và sau đoạn văn.
• Lồng nhau: Thẻ <p> không thể chứa các phần tử khối khác.

Định dạng với CSS:

    
      p {
        color: #333;
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 15px;
      }
    
  

3.2 Phần tử <div>

Thẻ <div> là một container khối đa dụng, được sử dụng để nhóm các phần tử khác và áp dụng các kiểu dáng cho chúng. Nó không có kiểu dáng tích hợp và được sử dụng hoàn toàn để cấu trúc nội dung.

Ví dụ sử dụng:

    
      <div class="container">
        <h2>Tiêu đề của khối</h2>
        <p>Một số văn bản bên trong khối div.</p>
      </div>
    
  

Thuộc tính:

• Phần tử khối: đặt trên dòng mới và chiếm toàn bộ chiều rộng có sẵn
• Đa dụng: có thể chứa bất kỳ phần tử nào khác, bao gồm cả khối và dòng
• Định dạng và script: thường được sử dụng để áp dụng các kiểu CSS và script JavaScript

Định dạng với CSS:

    
      .container {
        border: 1px solid #ccc;
        padding: 20px;
        background-color: #f9f9f9;
      }
    
  

3.3 Phần tử <span>

Thẻ <span> là một phần tử dòng và được sử dụng để đánh dấu một phần của văn bản hoặc nội dung khác bên trong các phần tử khối. Nó không có kiểu dáng tích hợp và phục vụ việc áp dụng các kiểu CSS và script JavaScript cho các phần cụ thể của văn bản.

Ví dụ sử dụng:

    
      <p>Văn bản này chứa một <span class="highlight"> từ</span> được đánh dấu khác biệt với các văn bản khác.</p>
    
  

Thuộc tính:

• Phần tử dòng: không tạo dòng mới và chỉ chiếm phần chiều rộng cần thiết
• Linh hoạt: được sử dụng để áp dụng các kiểu cho các phần cụ thể của văn bản hoặc các phần tử khác
• Thường được sử dụng kết hợp với CSS và JavaScript: giúp định dạng hoặc thao tác chính xác với các phần của văn bản

Định dạng với CSS:

    
      .highlight {
        color: red;
        font-weight: bold;
      }
    
  

3.4 So sánh <div> và <span>

<div>:

• Phần tử khối
• Bắt đầu từ dòng mới
• Có thể chứa các phần tử khối và dòng khác
• Được sử dụng để nhóm và cấu trúc nội dung

<span>:

• Phần tử dòng
• Không phá vỡ dòng văn bản
• Được sử dụng để định dạng các phần cụ thể của văn bản
• Thường được áp dụng để làm nổi bật và làm việc với JavaScript

Ví dụ kết hợp sử dụng <div> và <span>:

    
      .article {
        border: 1px solid #ddd;
        padding: 10px;
      }

      .keyword {
        color: blue;
        font-style: italic;
      }
    
  

    
      <div class="article">
        <h2>Tiêu đề bài viết</h2>
        <p>
          Đây là đoạn văn bản của bài viết với từ khóa <span class="keyword">từ</span>, được làm nổi bật để thu hút sự chú ý.
        </p>
      </div>
    
  

Thẻ <p>, <div> và <span> là những khối xây dựng cơ bản của HTML, cho phép tạo ra các trang web có cấu trúc, kiểu dáng và tương tác tốt. Hiểu rõ đặc trưng của chúng và sử dụng đúng cách sẽ giúp tạo ra các giao diện tiện lợi và chức năng.