Tổng quan về HTML là gì?

Chào mừng bạn đã đến với thế giới kỳ diệu của web. Khi nói đến phát triển web, chúng ta sẽ nghĩ ngay đến HTML, CSS, JavaScript, PHP, Ajax…Dù thú vị nhưng cũng rất là mênh mông. Nhưng đi ngàn dặm cũng bắt đầu từ một bước chân. Hôm nay chúng ta cùng tìm hiểu tổng quan về HTML – bộ xương của một trang web. Với một chút kiến thức, một chút thực hành, một chút nỗ lực bạn sẽ có thể tạo cho mình một website hoặc cải thiện một trang web theo sở thích, nhu cầu của mình.

Ngày nay chúng ta không còn lạ lẫm gì khi nghe nói đến các trang web. Các trang web chứa các kiểu nội dung khác nhau văn bản, hình ảnh, audio, video, form, và thậm chí là game có thể tương tác. Khi duyệt web, bạn sẽ thấy nội dung hiển thị theo nhiều cách khác nhau. Mỗi trang web đều khác nhau nhưng tất cả chúng đều có một điểm chung: Ngôn ngữ đánh dấu siêu văn bản (HyperText Markup Language – HTML). Vậy HTML là gì?

HTML là gì?

HTML là từ viết tắt của HyperText Markup Language (Ngôn ngữ đánh dấu siêu văn bản). Đây là ngôn ngữ dùng để tạo ra các trang Web.

  • HTML sử dụng “đánh dấu” để mô tả cấu trúc một trang Web.
  • Các phần tử HTML (HTML Elements) là các khối xây dựng nên các trang web.
  • Các phần tử HTML được thể hiện bằng các thẻ (tags).
  • Các thẻ HTML gắn nhãn các phần nội dung như “heading”, “paragraph”, “table” và nhiều thứ khác.
  • Các trình duyệt web không hiển thị các thẻ HTML những nó căn cứ vào chúng để hiển thị nội dung trang web.

Ví dụ về một tài liệu HTML (HTML Document) đơn giản:

<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề trang web</title>
</head>
<body>
<h1>Tiêu đề đầu tiên của bài viết</h1>
<p>Đoạn văn đầu tiên của tôi</p>
</body>
</html>

Giải thích:

  • <!DOCTYPE html>: Dùng để khai báo định nghĩa tài liệu này HTML5.
  • <html>: Đây là phần tử gốc (Root Element) của một trang web.
  • <header>: Đây là phần tử chứa thông tin meta của tài liệu.
  • <title>: Thẻ này dùng để đặt tên tiêu đề cho tài liệu HTML.
  • <body>: Thẻ này dùng để hiển thị nội dung có thể nhìn thấy của trang web.
  • <h1>: Thẻ tiêu đề lớn nhất.
  • <p>: Phần tử dùng để định nghĩa một đoạn văn bản.

Các thẻ HTML

Các thẻ HTML là tên các phần tử nằm trong cặp dấu ngoặc nhọn (<>).

<tên thẻ> Nội dung….</tên thẻ>

  • Các thẻ HTML thường là một cặp. Ví dụ: <p>, </p>.
  • Thẻ đầu tiên được gọi là thẻ mở, thẻ cuối cùng được gọi là thẻ đóng.
  • Thẻ đóng được viết như thẻ mở nhưng được thêm vào dấu / ngay trước tên thẻ.

Trình duyệt web

Hiện này có nhiều trình duyệt web khác nhau. Một trong các trình duyệt web phổ biến được sử dụng rộng rãi là: Google Chrome, FireFox, IE, Safari. Chức năng của trình duyệt là dùng để đọc các tài liệu HTML và hiển thị chúng.

Trình duyệt web không hiển thị các thẻ HTML, nhưng nó dùng chúng để xác định cách thức hiển thị tài liệu.

html example page

Cấu trúc trang HTML

Bên dưới là cấu trúc trực quan của một trang HTML:

<html>

<head>

<title>Tiêu đề trang web</title>

</head>

<body>

<h1>Đây là tiêu đề bài viết</h1>
<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>

Lưu ý: Chỉ có nội dung trong phần thân trang <body> (khu vực màu trắng ở trên) là được hiển thị trong trình duyệt.

Khai báo <!DOCTYPE>

Khai báo <!DOCTYPE> định nghĩa kiểu tài liệu HTML và giúp cho trình duyệt hiển thị website một cách chính xác.

Nó chỉ được hiển thị một lần ở phía trên của trang. Trước bất kỳ thẻ HTML nào khác. Nó không phân biệt giữa chữ hoa và chữ thường.

Khai báo <!DOCTYPE> sử dụng cho HTML5 là:

<!DOCTYPE html>

Các phiên bản HTML

Chúng ta đã biết được HTML là gì rồi. Vậy lịch sử phát triển của nó như thế nào?

Ngôn ngữ đánh dấu siêu văn bản HTML được phát triển vào cuối những năm 1980 và đầu 1990 để mô tả các trang web. Ngày nay nó là một ngôn ngữ không thể thiếu để phát triển website.

Dưới đây là các phiên bản HTML từ 1980 đến nay:

Phiên bản HTMLNăm phát triển
HTML1991
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML2000
HTML52014

Hy vọng rằng bài viết này sẽ cung cấp cho bạn những kiến thức cơ bản về ngôn ngữ đánh dấu siêu văn bản HTML. Và quan trọng nhất là bạn đã biết được HTML là gì, cấu trúc một trang web, các thẻ tạo nên trang web và lịch sử của HTML.

Trong bài viết tiếp theo chúng ta cùng tìm hiểu cách tạo một tập tin HTML.

Đăng ký nhận bài viết mới nhất

Hãy đăng ký nhận tin để nhận được những nội dung thú vị và tuyệt vời!

Để lại bình luận