HTML (Hypertext Markup Language) là một ngôn ngữ đánh dấu siêu văn bản được sử dụng để tạo và thiết kế nội dung trang web. Trong HTML, có hàng loạt các thẻ được sử dụng để xác định cấu trúc và hiển thị của trang web. Trong bài viết này, chúng ta sẽ tìm hiểu một số thẻ HTML thông dụng mà bạn thường xuyên gặp khi phát triển trang web.
I. HTML là gì
- HTML là viết tắt của Hyper Text Markup Language.
- HTML là ngôn ngữ đánh dấu tiêu chuẩn để tạo trang web.
- HTML mô tả cấu trúc của một trang web.
- HTML bao gồm một chuỗi các phần tử.
- Các phần tử HTML chỉ cho trình duyệt cách hiển thị nội dung.
- Các phần tử HTML gắn nhãn cho các phần nội dung như "đây là một tiêu đề", "đây là một đoạn văn bản", "đây là một liên kết", v.v.
II. Các thẻ thường sử dụng trong HTML
1. Các thẻ cơ bản
<!DOCTYPE html>
<html lang="vi">
<head>
<title>Tiêu đề trang web</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- Nội dung trang web sẽ được thêm vào đây -->
</body>
</html>
<!DOCTYPE>: Thẻ này xác định phiên bản HTML mà trang web sử dụng.<html>: Thẻ này xác định đây là trang web và bao bọc toàn bộ nội dung của trang.<head>: Thẻ này chứa các thông tin về trang web, chẳng hạn như tiêu đề, meta tag và các liên kết CSS.<title>: Thẻ này xác định tiêu đề của trang web.<body>: Thẻ này chứa nội dung hiển thị trên trang web.
<meta>: được sử dụng để đặt các thông tin mô tả về trang web. Một số thuộc tính phổ biến của thẻ <meta> bao gồm:
- charset: Xác định bảng mã sử dụng cho trang web.
<meta charset="UTF-8" />
- name và content: Được sử dụng để cung cấp các thông tin mô tả khác nhau.
<meta name="description" content="Mô tả trang web của bạn" /> <meta name="keywords" content="từ khóa, một, hai, ba" />
- viewport: Điều chỉnh hiển thị trên các thiết bị di động.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link> được sử dụng để liên kết với các tài nguyên bên ngoài hoặc để đặt các loại liên kết khác nhau.
- Liên kết với CSS stylesheet:
<link rel="stylesheet" type="text/css" href="styles.css" />
- Liên kết với favicon (biểu tượng trang web):
<link rel="icon" href="favicon.ico" type="image/x-icon" />
- Liên kết với tập tin RSS feed:
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/rss.xml" />
- Liên kết với tập tin ảnh hoặc biểu tượng trang web khác:
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
2. Thẻ định dạng văn bản
<p>: Thẻ này xác định một đoạn văn bản.<br>: Thẻ này tạo
một dòng mới.<hr>: Thẻ này tạo
một đường kẻ ngang.<b>: Thẻ này làm cho văn bản in đậm.<i>: Thẻ này làm cho văn bản in nghiêng.<u>: Thẻ này gạch chân văn bản.<s>: Thẻ nàygạch ngang văn bản.
3. Thẻ liên kết
<a>: Thẻ này tạo một liên kết đến một trang web khác hoặc một tài nguyên khác.
4. Thẻ hình ảnh
<img>: Thẻ này chèn một hình ảnh vào trang web.
5. Thẻ danh sách
<ul>: Thẻ này tạo một danh sách không có thứ tự.
- Coffee
- Tea
- Milk
<ol>: Thẻ này tạo một danh sách có thứ tự.
- Coffee
- Tea
- Milk
<li>: Thẻ này xác định một mục trong danh sách.
6. Thẻ bảng
<table>: Thẻ này tạo một bảng.<tr>: Thẻ này tạo một hàng trong bảng.<td>: Thẻ này tạo một ô trong bảng.
| Month | Savings |
|---|---|
| January | $100 |
7. Các thẻ khác
<form>: Thẻ này tạo một biểu mẫu.<input>: Thẻ này tạo một trường đầu vào trong biểu mẫu.<button>: Thẻ này tạo một nút trong biểu mẫu.
Dưới đây là một ví dụ về cách sử dụng các thẻ HTML cơ bản: Ví dụ này tạo ra một trang web đơn giản với một tiêu đề, một đoạn văn bản, và một số văn bản được định dạng.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My first HTML page</title>
</head>
<body>
<h1>This is my first HTML page</h1>
<p>This is a paragraph of text.</p>
<br>
<b>This is some bold text.</b>
<i>This is some italic text.</i>
<u>This is some underlined text.</u>
<s>This is some strikethrough text.</s>
</body>
</html>
III. Kết luận
Các thẻ HTML là công cụ cơ bản để tạo các trang web. Bằng cách hiểu cách sử dụng các thẻ HTML cơ bản, bạn có thể tạo các trang web đơn giản và hiệu quả.