1. Thẻ trong HTML
HTML là gì?
HTML (HyperText Markup Language) là ngôn ngữ đánh dấu, được sử dụng để tạo và cấu trúc các trang web. Với HTML, chúng ta có thể tổ chức nội dung của trang, sử dụng các thẻ và thuộc tính khác nhau để trình duyệt biết cách hiển thị thông tin. Trong bài học này, chúng ta sẽ xem xét các khái niệm cơ bản về HTML như thẻ, cây thẻ, thuộc tính, các thẻ độc lập và cấu trúc của tài liệu HTML.
Trong HTML, các thẻ là các thành phần chính cho phép
đánh dấu nội dung. Chúng bao quanh văn bản và các thành
phần khác, giúp trình duyệt hiểu cách hiển thị chúng.
Ví dụ, thẻ <h1> và <p>
chỉ ra rằng văn bản trong đó là tiêu đề hoặc đoạn văn.
Các thẻ được viết trong dấu ngoặc nhọn
<>. Hầu hết các thẻ có thẻ mở và thẻ đóng,
tức là bao gồm một thẻ bắt đầu và một thẻ kết thúc.
Ví dụ:
<h1>Đây là tiêu đề</h1>
<p>Đây là đoạn văn bản.</p>
Ở đây <h1> là thẻ bắt đầu,
và </h1> là thẻ kết thúc.
Cây thẻ
Tài liệu HTML có cấu trúc phân cấp, nơi các thẻ được lồng nhau, tạo thành một cấu trúc cây. "Cây thẻ" này xác định cách các phần tử trên trang liên kết với nhau và thứ tự chúng được hiển thị.
Đây là ví dụ về một cây thẻ đơn giản:
<html>
<head>
<title>Ví dụ về trang</title>
</head>
<body>
<h1>Tiêu đề trang</h1>
<p>Đây là văn bản của đoạn.</p>
</body>
</html>
Trong ví dụ này, thẻ <html> là
phần tử gốc, bên trong nó có các thẻ
<head> và <body>.
Bên trong <body> là các thẻ
<h1> và <p>.
Cấu trúc này cho phép tổ chức nội dung trang một cách logic.
Thuộc tính
Thuộc tính trong HTML được sử dụng để thêm thông tin bổ sung vào thẻ. Chúng được đặt trong thẻ bắt đầu và bao gồm tên thuộc tính và giá trị. Ví dụ:
<a href="https://example.com">Liên kết tới trang web</a>
<img src="image.jpg" alt="Mô tả hình ảnh">
hrefchỉ định địa chỉ liên kết.src— đường dẫn tới hình ảnh.-
alt— văn bản thay thế, sẽ hiển thị nếu hình ảnh không được tải.
Thuộc tính cho phép thêm đặc điểm bổ sung vào các phần tử,
chẳng hạn như định danh (id),
lớp (class), kiểu mẫu (style)
và nhiều đặc điểm khác.
Các thẻ độc lập
Một số thẻ HTML không có nội dung bên trong và không yêu cầu
thẻ đóng. Những thẻ này được gọi là thẻ độc lập.
Ví dụ, thẻ <img> được sử dụng để
chèn hình ảnh và cấu trúc của nó trông như sau:
<img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="Mô tả hình ảnh">
<img src="image.jpg" alt="Mô tả hình ảnh">
Các ví dụ khác về thẻ độc lập:
<br>— để xuống dòng.-
<hr>— để thêm một đường ngang.
2. Làm quen với tài liệu HTML
Tài liệu HTML bắt đầu với khai báo
<!DOCTYPE html>, chỉ định rằng tài liệu này
là HTML5. Sau đó là thẻ gốc <html>,
chứa các thẻ <head> và <body>.
Trong <head> có siêu dữ liệu của tài liệu
(tiêu đề, kiểu mẫu, script), còn trong <body>
là nội dung chính của trang.
Ví dụ về tài liệu HTML
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Trang đầu tiên của tôi</title>
</head>
<body>
<h1>Chào mừng!</h1>
<p>Đây là ví dụ về tài liệu HTML.</p>
<a href="https://example.com">Thăm trang web của chúng tôi</a>
</body>
</html>
-
<!DOCTYPE html>thông báo cho trình duyệt, rằng tài liệu này được viết bằng HTML5. -
<html lang="vi">chỉ định ngôn ngữ của tài liệu. -
<meta charset="UTF-8">xác định mã hóa, giúp hiển thị ký tự chính xác. -
<title>đặt tiêu đề trang, sẽ hiển thị trong tiêu đề cửa sổ trình duyệt.
Các thẻ bổ sung trong <head>
Thẻ <head> chứa thông tin không hiển thị
trực tiếp trên trang, nhưng rất quan trọng đối với hoạt động
của trang web. Bên trong <head> có thể thêm
các thẻ sau:
-
<meta name="description" content="Mô tả trang">— mô tả ngắn gọn về trang cho các công cụ tìm kiếm. -
<meta name="viewport" content="width=device-width, initial-scale=1.0">— cho phép trang web tự điều chỉnh cho các thiết bị di động. -
<link rel="stylesheet" href="styles.css">— liên kết tệp CSS chứa kiểu mẫu. -
<script src="script.js"></script>— kết nối tệp JavaScript bên ngoài.
Các thẻ này giúp cải thiện trải nghiệm người dùng, tối ưu hóa trang cho các công cụ tìm kiếm và kết nối các tài nguyên cần thiết.
GO TO FULL VERSION