Các thẻ HTML cơ bản: tiêu đề, đoạn văn, liên kết, hình ảnh

1. Tiêu đề

HTML cung cấp nhiều thẻ để định dạng và cấu trúc nội dung văn bản, hình ảnh, liên kết và danh sách. Các thẻ HTML cơ bản cho phép bạn tạo trang đọc dễ dàng và có tổ chức hợp lý, trông hấp dẫn và tiện lợi để sử dụng. Hãy cùng xem qua các thẻ cơ bản phổ biến nhất và mục đích của chúng.

Tiêu đề (hoặc header) được sử dụng để đánh dấu các cấp độ tiêu đề khác nhau trên trang. HTML cung cấp sáu cấp độ tiêu đề — từ <h1> đến <h6>, trong đó <h1> là tiêu đề lớn và quan trọng nhất, còn <h6> là tiêu đề nhỏ nhất.

          
            <h1>Tiêu đề chính của trang</h1>
            <h2>Tiêu đề cấp một</h2>
            <h3>Tiêu đề cấp hai</h3>
            ...
            <h6>Tiêu đề nhỏ nhất</h6>
          
        

Sử dụng tiêu đề giúp cấu trúc thông tin văn bản cũng như cải thiện SEO (tối ưu hóa công cụ tìm kiếm), vì các công cụ tìm kiếm xét đến tiêu đề khi phân tích nội dung trang.

2. Định dạng văn bản

Để định dạng văn bản, HTML cung cấp một số thẻ đơn giản nhưng mạnh mẽ.

Đoạn văn

Bây giờ khi chúng ta đã làm quen với tiêu đề, đã đến lúc chú ý đến văn bản. Trong HTML, các đoạn văn được tạo bằng thẻ <p>. Nó giống như trong trình soạn thảo văn bản yêu thích của bạn, nơi bạn nhấn "Enter" để bắt đầu một đoạn mới. Đây là một ví dụ:

<p>Đây là đoạn văn đầu tiên trên trang của chúng ta, nó sẽ kể bạn nghe một chút thêm về chủ đề của chúng ta.</p>
<p>Và đây là đoạn văn thứ hai, vì đôi khi đoạn văn "đầu tiên" không đủ truyền tải hết ý tưởng!</p>

Các khối văn bản

Đừng quên <span> và <div>. <span> là trợ thủ đắc lực của bạn để áp dụng kiểu dáng cho các đoạn văn bản cụ thể trong HTML, còn <div> là nhà vô địch trong việc tạo ra các khối và container.

<div>Khối này có thể chứa nhiều điều thú vị!</div>
<span>Văn bản này có thể được tô màu hoặc thay đổi phông chữ.</span>

Văn bản đậm

Văn bản đậm — <b>: Thẻ <b> làm nổi bật văn bản bằng phông chữ đậm. Thẻ này thường được sử dụng để nhấn mạnh các từ hoặc cụm từ quan trọng.

<p>Đây là <b>văn bản quan trọng</b>, nó thu hút sự chú ý.</p>

Văn bản nghiêng

Nghiêng — <i>: Thẻ <i> làm cho văn bản nghiêng. Nó thích hợp để làm nổi bật các trích dẫn, từ ngữ nước ngoài hoặc các yếu tố cần nhấn mạnh khác.

<p>Đây là văn bản nghiêng: <i>ví dụ văn bản nghiêng</i>.</p>

3. Hình ảnh

Để thêm hình ảnh vào trang, sử dụng thẻ <img>. Thẻ này là thẻ đơn lẻ và cần cung cấp đường dẫn đến hình ảnh thông qua thuộc tính src. Cũng quan trọng để thêm mô tả hình ảnh bằng thuộc tính alt (văn bản thay thế), để người dùng có hạn chế hoặc trong trường hợp không thể tải hình ảnh có thể hiểu nội dung của hình.

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