Chia sẻ kiến thức lập trình cơ bản

Giới thiệu HTML


HTML là gì?

HTML là ngôn ngữ đánh dấu chuẩn để tạo các trang Web

  • HTML là viết tắt của Hyper Text Markup Language
  • HTML mô tả cấu trúc của các trang Web sử dụng đánh dấu
  • Các phần tử HTML là các khối xây dựng của các trang HTML
  • Các phần tử HTML được đại diện bằng các thẻ (tags)
  • Thẻ HTML (HTML tags) gắn nhãn của nội dung như "tiêu đề (heading)", "đoạn văn (paragraph)", "bảng (table)", ...
  • Trình duyệt (Browsers) không hiển thị thẻ HTML nhưng sử dụng chúng để kết xuất nội dung của trang

Một tài liệu HTML đơn giản

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề trang</title>
</head>
<body>

<h1>Tiêu đề đầu tiên của tôi</h1>
<p>Đoạn văn đầu tiên.</p>

</body>
</html>
Thử ngay »

Giải thích ví dụ

  • <!DOCTYPE html> xác định tài liệu này là HTML5
  • Thẻ <html> là phần tử gốc của trang HTML
  • Thẻ <head> chứa thông tin mô tả về tài liệu
  • Thẻ <title> là phần tử chỉ định tiêu đề trang HTML
  • Thẻ <body> là phần tử chứa nội dung trang hiển thị
  • Thẻ <h1> phần tử xác định một tiêu đề lớn
  • Thẻ <p> phần tử xác định một văn bản

Thẻ HMTL (HTML Tags)

Thẻ HTML là các tên phần tử được bao quanh bởi các dấu ngoặc nhọn:

<tên thẻ>Nội dung ở đây...</tên thẻ>

  • Các thẻ HTML thường theo cặp như <p></p>
  • Thẻ đầu tiên trọng một cặp là thẻ bắt đầu, thẻ thứ hai là thẻ kết thúc
  • Thẻ kết thúc được viết giống với thể mở đầu nhưng có dấu gạch chéo ở trước tên thẻ

Chú ý: Thẻ bắt đầu còn được gọi là thẻ mở, và thẻ kết thúc gọi là thẻ đóng.



Trình duyệt web (Web Browsers)

Mục đích của trình duyệt web (Chrome, IE, Firefox, Safari) là đọc tài liệu HTML và hiển thị chúng.

Trình duyệt không hiển thị các thẻ HTML, nhưng sử dụng chúng để xác định cách hiển thị tài liệu:

View in Browser


HTML Page Structure

Below is a visualization of an HTML page structure:

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

Note: Only the content inside the <body> section (the white area above) is displayed in a browser.


The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

HTML Versions

Since the early days of the web, there have been many versions of HTML:

Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014