Trong bài viết này, các bạn sẽ tìm hiểu về các thẻ và các Elemnet của HTML.
Cú pháp phần tử HTML
Nội dung bài viết
Một phần tử HTML (Element HTML) là một thành phần riêng lẻ của một tài liệu HTML. Nó đại diện cho ngữ nghĩa, hoặc ý nghĩa. Ví dụ, thẻ title là phần tử đại diện cho tiêu đề của trang web.
Hầu hết các Elements HTML được viết bằng thẻ bắt đầu (hoặc thẻ mở – Start Tag) và thẻ kết thúc (hoặc thẻ đóng – End Tag), với nội dung ở giữa. Các phần tử cũng có thể chứa các thuộc tính (Attributes) xác định các thuộc tính bổ sung của nó. Ví dụ: một đoạn văn, được đại diện bởi phần tử P, sẽ được viết là:
Chúng ta sẽ tìm hiểu về các thuộc tính (Attributes) HTML trong chương tiếp theo.
Note
Lưu ý: Tất cả các Element không yêu cầu thẻ kết thúc hoặc thẻ đóng phải có mặt. Chúng được gọi là các phần tử rỗng , phần tử tự đóng hoặc phần tử void.
Thẻ HTML Và Element
Về mặt kỹ thuật, một phần tử (Element) HTML là tập hợp của thẻ bắt đầu, thuộc tính của nó, thẻ kết thúc và mọi thứ (bao gồm nội dung) ở giữa. Mặt khác, thẻ HTML (mở hoặc đóng) được sử dụng để đánh dấu điểm bắt đầu hoặc kết thúc của một Element, như bạn có thể thấy trong hình minh họa ở trên.
Tuy nhiên, trong cách sử dụng phổ biến, các thuật ngữ thành phần HTML và thẻ HTML có thể hoán đổi cho nhau, tức là thẻ là một Element và Element là một loại thẻ. Để đơn giản hơn thì các thuật ngữ “thẻ” (Tag) và “phần tử” (Element) được sử dụng để có nghĩa tương tự – vì nó sẽ định nghĩa một cái gì đó trên trang web của bạn.
Phân biệt chữ hoa chữ thường trong các thẻ và thuộc tính HTML
Trong HTML, tên thẻ và thuộc tính không phân biệt chữ hoa chữ thường (nhưng hầu hết các giá trị thuộc tính đều phân biệt chữ hoa chữ thường). Nó có nghĩa là thẻ <p> và thẻ <P> điều tương tự trong HTML là một đoạn văn.
<p>This is a paragraph.</p> <p>This is also a valid paragraph.</p>
Tips
Chúng tôi khuyên bạn nên sử dụng chữ thường cho thẻ và gán tên trong HTML, vì bằng cách này, bạn đã tuân thủ chuẩn HTML và dễ dàng nâng cấp trong tương lai.
Các phần tử HTML rỗng
Các phần tử rỗng (còn được gọi là phần tử tự đóng hoặc phần tử rỗng) không phải là thẻ chứa nội dung – điều đó có nghĩa là, bạn không thể viết <hr> nội dung </hr> hoặc <br> nội dung </br>.
Một ví dụ điển hình về một phần tử rỗng là thẻ <br> – đại diện cho ngắt một dòng. Một số thẻ phổ biến khác cũng có chức năng tương tự như là <img>, <input>, <link>, <meta>, <hr>…
<p>This paragraph contains a line break.</p> <img src="images/sky.jpg" alt="Cloudy Sky"> <input type="text" name="username">
Note
Trong HTML, một phần tử tự đóng được viết đơn giản là <br>. Còn trong XHTML, phần tử tự đóng yêu cầu dấu cách và dấu gạch chéo, chẳng hạn như <br/>.
Các phần tử HTML lồng nhau
Hầu hết các phần tử HTML có thể chứa bất kỳ số lượng phần tử nào khác (ngoại trừ các phần tử trống), lần lượt được tạo thành từ các thẻ, thuộc tính và nội dung hoặc các phần tử khác.
Ví dụ sau đây cho thấy một số phần tử được lồng bên trong thẻ <p>.
<p>Here is some <b>bold</b> text.</p> <p>Here is some <em>emphasized</em> text.</p> <p>Here is some <mark>highlighted</mark> text.</p>
Note
Các thẻ HTML phải được lồng theo đúng thứ tự. Chúng phải được đóng theo thứ tự từ trong ra ngoài, điều đó có nghĩa là thẻ cuối cùng được mở phải được đóng trước.
<p><strong>Thẻ này được lòng bên trong.</strong></p> <p><strong>Thẻ này không được lòng vào bên trong</strong></p>
Phần ghi chú trong HTML
Phần ghi chú thường được thêm vào với mục đích làm cho mã nguồn dễ hiểu hơn. Nó có thể giúp nhà phát triển khác (hoặc bạn trong tương lai khi bạn chỉnh sửa mã nguồn) để hiểu những gì bạn đang cố gắng thực hiện với HTML. Phần ghi chú không được hiển thị trong trình duyệt.
Một nhận xét HTML bắt đầu bằng <!– và kết thúc bằng –>, như trong ví dụ dưới đây:
<!-- This is an HTML comment --> <!-- This is a multi-line HTML comment that spans across more than one line --> <p>This is a normal piece of text.</p>
Bạn cũng có thể ghi chú comment lại một code HTML của mình để không hiển thị ra ngoài màn hình, như ví dụ dưới đây:
<!-- Hiding this image for testing <p>Hello Thegioiphp</p> -->
