Tìm hiểu về HTML, cấu trúc HTML của một trang website
HTML là một loại ngôn ngữ đánh dấu siêu văn bản. Nó được dùng để tạo ra các tài liệu hiển thị được trên trình duyệt web.
1. HTML là gì ?
HTML (viết tắt của Hyper Text Markup Language) là một loại ngôn ngữ đánh dấu siêu văn bản. Nó giúp cấu thành các cấu trúc cơ bản của một Website, làm cho trang Web trở thành một hệ thống hoàn chỉnh, nó được dùng để tạo ra các tài liệu hiển thị được trên trình duyệt. HTML sử dụng các THẺ để xác định nội dung của trang.
HTML sử dụng cách đánh dấu để chú thích cho các thành phần như văn bản, hình ảnh ... các phần tử HTML tạo thành trang tài liệu hiển thị được trong các trình duyệt. Có rất nhiều phần tử HTML như <p>, <a>, <img>, <title>, <body> ...
Một phần tử HTML bắt đầu bằng mở thẻ (viết tên thẻ như p, a, img ... giữa < >), đến nội dung phần tử và kết thúc bằng đóng thẻ (viết tên thẻ giữa </ > )
Lưu ý: Một số phần tử HTML không có nội dung (như phần tử <br>). Các phần tử này được gọi là phần tử rỗng. Các phần tử trống không có thẻ kết thúc.
2. Phần tử HTML là gì?
Phần tử HTML được xác định bởi thẻ bắt đầu, một số nội dung và thẻ kết thúc:
< tên thẻ > Nội dung ở đây ... < / tên thẻ>
Phần tử HTML là tất cả mọi thứ từ thẻ bắt đầu đến thẻ kết thúc:
< h1 > Tiêu đề đầu tiên của tôi < / h1 >
< p > Đoạn đầu tiên của tôi. < / p >
Các thành phần chính trong cấu trúc HTML cơ bản:
<!Doctype html>: xác định rằng tài liệu này là một tài liệu HTML5
<html>: là phần tử gốc của trang HTML
<head>: Đây là thẻ cần mở ngay sau mở thẻ <html>, thẻ <head> chứa các phần tử HTML hầu như là không hiển thị tới người dùng, chúng là các điều khiển, thiết lập giúp trang html được hiển thị theo một mục đích cụ thể. Ví dụ: thiết lập bảng mã kỹ tự, nạp CSS, thiết lập các từ khóa (keywords) ...
<title>: Phần tử chỉ định tiêu đề cho trang HTML, được hiển thị trong thanh tiêu đề của trình duyệt hoặc trong tab của trang.
<!Doctype html>
<html>
<head>
<title>Tiêu đề của trang</title>
</head>
...
</html>
Thẻ <meta>: đặt trong thẻ <head> để thêm vào các thông tin mô tả cho trang, nó là thẻ tạo ra phần tử rỗng (chỉ mở thẻ - thiết lập dữ liệu qua các thuộc tính). Có rất nhiều loại dữ liệu thông tin mô tả cho trang có thể thêm vào, chẳng hạn:
Thiết lập bảng mã cho các ký tự: dùng thẻ meta và thuộc tính charset của nó:
<meta charset="utf-8">
Thiết lập mô tả ngắn gọn về trang:
<meta name="description" content="Mô tả về trang">
Thẻ <body>: Xác định phần thân của tài liệu và là vùng chứa tất cả nội dung hiển thị, chẳng hạn như tiêu đề, đoạn văn, hình ảnh, siêu liên kết, bảng, danh sách, v.v.
3. Cấu trúc trang HTML
Dưới đây là hình ảnh trực quan của cấu trúc trang HTML:
<!DOCTYPE html>
<html>
<head>
<title> Tiêu đề trang </title>
</head>
<body>
<h1> Đây là tiêu đề cao nhất</h1>
<h6> Đây là tiêu đề thấp nhất </h6>
<p> Đây là một đoạn văn bản. </p>
<p> Đây là một đoạn văn bản khác. </p>
</body>
</html>
Giải thích:
<!DOCTYPE html>: khai báo kiểu dữ liệu hiển thị, xác định rằng tài liệu này là một tài liệu HTML5.
<html> và </html>: cặp thẻ bắt buộc, là phần tử gốc của trang HTML, yếu tố cấp cao nhất, có nhiệm vụ đóng gói tất cả nội dung của trang HTML.
<head> và </head>: khai báo các thông tin meta của trang web như: tiêu đề trang, bảng chữ cái.
<title> và </title>: cặp thẻ nằm bên trong thẻ
, dùng để khai báo tiêu đề của trang.<body> và </body>: cặp thẻ dùng để đóng gói tất cả các nội dung sẽ hiển thị trên trang.
<h1></h1>, <h6></h6>: định dạng dữ liệu dạng heading. Thông thường có 6 cấp độ” phần mở đầu” trong HTML, trải dài từ <h1> tới <h6>. Trong đó, <h1> là cấp độ ” phần mở đầu” cao nhất và <h6> là cấp độ ” phần mở đầu” thấp nhất.
<p> và </p>: cặp thẻ chứa các đoạn văn bản của trang web.
Lưu ý: Nội dung bên trong phần <body> sẽ được hiển thị trong trình duyệt. Nội dung bên trong phần tử <title> sẽ được hiển thị trên thanh tiêu đề của trình duyệt hoặc trong tab của trang.