Cú pháp của HTML - Siêu ngắn gọn và đơn giản | Series HTML & CSS Căn bản | Bài 2

Chào mừng bạn đã trở lại với Series HTML & CSS căn bản!

Trong bài giảng trước, chúng ta đã tìm hiểu về khái niệm HTML, cũng như vai trò & ứng dụng của nó trong ngành công nghiệp lập trình hiện nay. Trong bài giảng ngày, hoccode.org sẽ đi vào chủ đề tiếp theo: "Cú pháp của HTML".

Tầm quan trọng của việc hiểu rõ cú pháp HTML

Vì sao cần phải nắm rõ cú pháp HTML?

Có nhiều bạn khi mới làm quen với lập trình khi xem qua 1 trang HTML dài mấy ngàn dòng sẽ cảm thấy cú pháp của nó phức tạp và rối rắm. Nhưng đó là một nhận định sai lầm, thực ra cú pháp của HTML không rắc rối như bạn nghĩ mà thậm chí cực kỳ đơn giản.

Cái khó của HTML không nằm ở cú pháp mà nằm ở việc hiểu rõ các thành phần chính trong cú pháp, cũng như cách sử dụng/ứng dụng của từng thành phần đó. Chính vì thế việc nắm rõ được cấu trúc (cú pháp) của HTML sẽ giúp bạn viết các đoạn code HTML một cách dễ dàng hơn, giảm thiểu các sai sót liên quan đến syntax, cũng như tạo một tiền đề vững chắc để bạn có thể dễ dàng nắm vững những kiến thức nâng cao một cách nhanh chóng khi học lập trình HTML.

Các thành phần trong cú pháp HTML

1. Cấu trúc của 1 trang (văn bản) HTML

Phần tử HTML (HTML Element) là gì?

Nếu phân tích cấu tạo của 1 trang (văn bản HTML) theo dạng mô hình thì có thể nói rằng nó được cấu tạo bởi các phần tử HTML (HTML Element) theo mô hình kim tự tháp. Hay nói cách khác, phần tử HTML là thành phần chính cấu tạo nên 1 trang (văn bản) HTML.

Để dễ hình dung hơn, chúng ta hãy cùng xem qua sơ đồ sau đây:

Sơ đồ cấu trúc 1 file (văn bản) HTML đơn giản

Sơ đồ mối liên kết của các phần tử (Element) trong 1 văn bản HTML

Nhìn vào sơ đồ trên, ta có thể thấy được một phần tử HTML có thể chứa một hoặc nhiều phần tử HTML khác. Đây được gọi là quan hệ cha - con, trong đó phần tử chứa các phần tử HTML khác được gọi là phần tử cha (parent element), còn các phần tử được chứa gọi là phần tử con (child elements).

Phần tử HTML bao gồm mấy loại cơ bản?

Trước khi đi vào tìm hiểu các thành phần của một phần tử HTML, ta cần biết rằng, phần tử HTML bao gồm 2 loại cơ bản:

  • Phần tử HTML có thể chứa nội dung (Nested HTML element): Bên trong những phần tử này có thể chứa được nội dung text hoặc các phần tử HTML khác. 
  • Phần tử HTML không thể chứa nội dung (Empty HTML Element): Bên trong những phần tử này không thể chứa được nội dung text hoặc các phần tử HTML khác. 

2. Cấu trúc của một phần tử HTML (HTML Element)

Cấu trúc của một phần tử HTML bao gồm những thành phần chính nào?

Các thành phần của một phần tử HTML bao gồm:

  • Thẻ (Tag): Đây là thành phần bắt buộc, xuất hiện ở 2 dạng là cặp thẻ hoặc thẻ đơn.
  • Nội dung bên trong (Content): Không bắt buộc, có thể là nội dung text (văn bản thuần tuý), một hay nhiều phần tử HTML khác, các đoạn mã CSS hoặc Javascript.
  • Thuộc tính (Attribute): Không bắt buộc, được sử dụng để cung cấp các thông tin bổ trợ cho phần tử HTML đó.


Loại phần tử Mô hình cú pháp (Sơ khai)
Ví dụ

Phần tử có thể chứa nội dung (Nested HTML Element)

<tag attribute="attribute-value">Content...</tag>

<tag> đóng vai trò là thẻ mở (opening tag)
</tag> đóng vai trò là thẻ đóng (closing tag)
attribute="value"  đóng vai trò là thuộc tính

<div></div>
...
<title>Cú pháp HTML</title>
 <a href="https://google.com"> Google.com</a>
...

Phần tử không thể chứa nội dung (Empty HTML Element)

<tag/> hoặc <tag> (viết kiểu nào cũng đúng)

<tag/> đóng vai trò vừa là thẻ đóng, vừa là thẻ mở

<br/> hoặc <br>
<hr style="border-color:red"/>
<meta name="description" content="Tìm hiểu về các thành phần tron cú pháp của HTML"/>
...

Thật đơn giản đúng không nào? Bây giờ, chúng ta sẽ kết hợp "mô hình cú pháp" trên để tạo ra một trang (Văn bản HTML đơn giản) qua ví dụ dưới đây:

<html lang="vi">
<head>
    <title>Cú pháp của HTML</title>
    <meta name="description" content="Tìm hiểu về các thành phần trong cú pháp của HTML"/>
</head>
<body>
    <h1>Cú pháp của HTML</h1>
    <p>Tìm hiểu về các thành phần trong cú pháp của HTML</p>
    <h2>Cấu trúc của 1 trang (văn bản HTML)</h2>
    <p id="paragraph-1">Nếu phân tích cấu tạo của 1 trang (văn bản HTML) theo dạng mô hình thì có thể nói rằng nó được cấu tạo bởi các phần tử HTML (HTML Element) theo mô hình kim tự tháp.</p>
    <p>Tìm hiểu thêm tại <a href="https://hoccode.org">hoccode.org</a></p>
</body>
</html>

Làm thế nào để có thể biết và lựa chọn đúng loại tag hay thuộc tính để áp dụng vào thực tế?

Đây chính là câu hỏi của chính mình khi xưa, và cũng là của hầu hết các lập trình viên khi bắt đầu tiếp xúc với HTML. Việc có thể biết và lựa chọn đúng loại tag hay thuộc tính để áp dụng vào từng tình huống chính là phần khó nhất của HTML, và 90% thời lượng học HTML là để hiểu được cách sử dụng của từng loại tag, thuộc tính.

Theo thống kê của trang W3Schools.com, tính đến đầu năm 2021, có tổng cộng 119 loại tag HTML, trong đó có 107 loại tag được hỗ trợ ở phiên bản HTML5 (có thể sử dụng được ở thời điểm hiện tại). Mỗi loại tag trung bình sẽ có từ 1 - 5 loại thuộc tính có thể sử dụng được.

Thoạt nghe thì có vẻ khá khó khăn đúng không bạn? Thực tế là bạn không cần phải nắm vững 107 tag đó. Là một lập trình viên đã từng tham gia trong hàng trăm dự án website, số lượng HTML tag mình đưa vào sử dụng trung bình trên mỗi dự án chỉ rơi vào khoảng 30 - 40, và số lượng tag mình có thể nhớ được trong đầu cũng chỉ ở khoảng đó. Vậy làm cách nào để mình và những lập trình viên khác có thể nắm được thông tin về cách sử dụng của những loại tag còn lại?

Câu trả lời chính là thông qua việc tra cứu trên Internet.

Có rất nhiều website hiện nay có thể giúp bạn tra cứu cách sử dụng của các tag trong HTML một cách dễ dàng, và mình sẽ liệt kê 5 website nổi tiếng nhất dưới đây, theo thứ tự ưu tiên giảm dần:

  1. w3schools.com - Đây là sự lựa chọn ưu tiên hàng đầu của hầu hết các lập trình viên bởi nội dung của website này được trình bày theo phong cách đơn giản hoá, giúp người đọc có thể dễ dàng hiểu được công dụng của bất kỳ một HTML tag nào. Bên cạnh đó, bên dưới nội dung mô tả & giải thích là các ví dụ cụ thể về cách dùng của loại tag mà bạn muốn tra cứu.
  2. developer.mozilla.org - Ưu điểm của website này là nội dung giải thích khá đầy đủ và chi tiết nhưng lại được trình bày theo phong cách khá "hàn lâm", kém thân thiện đối với những lập trình viên khi mới tìm hiểu về HTML. Bạn có thể dùng nó để tra cứu trong một số trường hợp cần tìm hiểu chuyên sâu về cách dùng một tag HTML nào đó.
  3. htmlreference.io - Một sự lựa chọn thay thế khác của w3schools.com
  4. devdocs.io - Giao diện website trên nền tối, rất hợp với phong cách của các coder
  5. html.com - Các tag được sắp xếp và phân nhóm theo thứ tự Alphabet, rất tiện cho việc tra cứu

Như vậy là chúng ta đã đi qua nội dung cuối cùng của Bài 3: Cú pháp của HTML rồi. Nếu bạn có bất kỳ câu hỏi thắc mắc hay ý kiến đóng góp nào, hãy để lại thông qua bình luận hay đánh giá dưới đây nhé

Đăng ký để nhận được thông báo mỗi khi có bài viết mới!