Khái niệm về thẻ HTML

Thẻ HTML

Các thẻ (tags) dùng để báo cho  trình duyệt cách  thức trình bày văn bản trên màn hình hoặc dùng để chỉ một mối liên kết đến các trang khác, một  đoạn  chương trình khác…

Mỗi  thẻ gồm một  từ khoá hay tên thẻ (tag name) bao bọc bởi hai dấu  bé hơn  (<) và  lớn hơn  (>).  Hầu hết các lệnh thể hiện bằng một cặp hai thẻ: thẻ mở (<TAGNAME>) và thẻ  đóng (</TAGNAME>). Dấu gạch chéo (“/”) kí hiệu thẻ đóng. Lệnh sẽ tác động vào nội dung (văn bản, hình ảnh, v.v.) nằm giữa hai thẻ. Cấu trúc đầy đủ gồm thẻ mở, nội dung và thẻ đóng còn được gọi là phần tử HTML (element). Cú pháp phần tử HTML:


<TAGNAME> Nội dung (hình ảnh, văn bản, v.v.) </TAGNAME>

Một số  thẻ không có cặp (thẻ mở và đóng), chúng được gọi là các  thẻ rỗng hay  thẻ đơn. Chỉ có thẻ mở <KEYWORD> mà thôi. Ví dụ <meta> hay <img> không có </meta> hay </img>.

Chú ý
Cần phân biệt khai niệm thẻ (tag) và phần tử (element):

  •  Khi chỉ viết <tagname> ví dụ <p>, <a>,…thì ta gọi là thẻ.
  • Gọi là phần tử khi chỉ cấu trúc <tagname> Nội dung </tagname>.
  • Để đơn giản người ta hay gọi là thẻ, ví dụ thẻ <p>, thẻ <a>,…

Thuộc tính của thẻ HTML

Nhiều thẻ có kèm các thuộc tính (attributes), cung cấp thêm các tham số chi tiết hơn cho việc thực hiện lệnh. Các thuộc tính được chia làm hai loại: thuộc tính bắt buộc và thuộc tính không bắt buộc hay tuỳ chọn.  Một  thuộc  tính  là bắt buộc nếu như phải  có nó  thì  thẻ  lệnh mới  thực hiện được. Ví dụ, để chèn một hình ảnh vào  trang  tài  liệu  ta dùng  thẻ <IMG>  (Image). Tuy nhiên, cần chỉ rõ ảnh nào  sẽ được hiển thị. Điều này được thiết lập bằng thuộc tính SRC = “địa chỉ  của tệp ảnh”. Thuộc tính SRC là bắt buộc phải có đối với thẻ <IMG>.

Cú pháp trình bày của thẻ HTML

Thẻ có thẻ đóng riêng

Mỗi  thẻ gồm một  từ khoá hay tên thẻ (tag name) bao bọc bởi hai dấu  bé hơn  (<) và  lớn hơn  (>).  Hầu hết các lệnh thể hiện bằng một cặp hai thẻ: thẻ mở (<TAGNAME>) và thẻ  đóng (</TAGNAME>). Dấu gạch chéo (“/”) kí hiệu thẻ đóng. Lệnh sẽ tác động vào nội dung (văn bản, hình ảnh, v.v.) nằm giữa hai thẻ. Cấu trúc đầy đủ gồm thẻ mở, nội dung và thẻ đóng còn được gọi là phần tử HTML (element). Cú pháp phần tử HTML:


<TAGNAME> Nội dung (hình ảnh, văn bản, v.v.) </TAGNAME>

Ví dụ: Xác định thẻ mở, thẻ đóng và nội dung của các phần tử HTML h1 và p sau:


<h1>My first heading</h1>
<p>My first paragrap</p>

Giải pháp:

Thẻ mở Nội dung Thẻ đóng
<h1> My first heading </h1>
<p> My first paragrap </p>

Các phần tử HTML có thể lồng nhau. Ví dụ xét đoạn mã HTML sau và xem sự lồng nhau giữa các phần tử (html chứa body, body chứa h1 và p):


<html>
<body>
<h1>My first heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Thẻ tự đóng

Một số  thẻ không có cặp (thẻ mở và đóng), chúng được gọi là các  thẻ rỗng hay  thẻ đơn. Chỉ có thẻ mở <KEYWORD> mà thôi. Ví dụ <meta> hay <img> không có </meta> hay </img>.

Thuộc tính của thẻ

Nhiều thẻ có kèm các thuộc tính (attributes), cung cấp thêm các tham số chi tiết hơn cho việc thực hiện lệnh. Các thuộc tính được chia làm hai loại: thuộc tính bắt buộc và thuộc tính không bắt buộc hay tuỳ chọn.  Một  thuộc  tính  là bắt buộc nếu như phải  có nó  thì  thẻ  lệnh mới  thực hiện được. Ví dụ, để chèn một hình ảnh vào  trang  tài  liệu  ta dùng  thẻ <IMG>  (Image). Tuy nhiên, cần chỉ rõ ảnh nào  sẽ được hiển thị. Điều này được thiết lập bằng thuộc tính SRC = “địa chỉ  của tệp ảnh”. Thuộc tính SRC là bắt buộc phải có đối với thẻ <IMG>. Cũng trong thẻ <IMG > có chứa các thuộc tính như alt, width, height. Đây là các thuộc tính tuỳ chọn vì không bắt buộc trong khi dùng thẻ <IMG> (ý nghĩa của các thuộc tính này sẽ được tìm hiểu trong bài sau).

Danh mục tra cứu thẻ HTML và thuộc tính của thẻ

Danh sách các thẻ HTML cơ bản (thường gặp) (có thể tham khảo chi tiết hơn tại http://www.w3schools.com/tags/default.asp):

Thẻ Chức năng
<!–…–> Định nghĩa chú thích
<!DOCTYPE> Định nghĩa phiên bản HTML
<a> Định nghĩa một siêu liên kết
<b> Định nghĩa văn bản in đậm
<blockquote> Định nghĩa một phần nội dung được trích từ nguồn khác
<body> Định nghĩa phần thân của tài liệu
<br> Định nghĩa ngắt dòng
<button> Định nghĩa một nút nhấn
<div> Định nghĩa một vùng trong tài liệu
<em> Định nghĩa đoạn văn bản được nhấn mạnh
<fieldset> Định nghĩa nhóm các thành phần liên quan trong một form
<form> Định nghĩa một form nhập dữ liệu
<h1>, <h2>,…, <h6> Định nghĩa tiêu đề
<head> Định nghĩa thông tin về tài liệu như tiêu đề, mã kí tự, v.v.
<hr> Định nghĩa một đường ngang
<html> Định nghĩa một tài liệu HTML
<i> Định nghĩa văn bản in nghiêng
<img> Định nghĩa một ảnh (image)
<input> Định nghĩa một điều khiển nhập
<label> Định nghĩa một nhãn cho một thành phần <input>
<legend> Định nghĩa tiêu đề cho một thành phần <fieldset>
<li> Định nghĩa một mục (item) của danh sách
<link> Định nghĩa một liên kết với một tài nguyên khác (CSS, Script,…)
<meta> Định nghĩa siêu dữ liệu về một tài liệu HTML
<object> Định nghĩa một đối tượng được nhúng vào tài liệu
<ol> Định nghĩa một danh sách được xếp thứ tự
<optgroup> Định nghĩa một nhóm các tuỳ chọn liên quan trong một <select>
<option> Định nghĩa một tuỳ chọn trong một <select>
<p> Định nghĩa một đoạn văn bản
<param> Định nghĩa một tham số cho một đối tượng
<script> Định nghĩa một script (Javascript)
<select> Định nghĩa một danh sách lựa chọn
<span> Định nghĩa một vùng trong một tài liệu
<strong> Định nghĩa văn bản in đậm (nhấn mạnh)
<style> Định nghĩa thông tin style cho một tài liệu
<sub> Định nghĩa văn bản lệch bên dưới (vd: H2)
<sup> Định nghĩa văn bản lệch bên trên (vd: e = mc2)
<table> Định nghĩa một bảng
<tbody> Định nghĩa phần thân nội dung trong một bảng
<td> Định nghĩa một ô trong một bảng
<textarea> Định nghĩa một điều khiển nhập nhiều dòng
<tfoot> Nhóm các nội dung chân (cuối) bảng
<th> Định nghĩa một ô tiêu đề trong một bảng
<thead> Nhóm các thành phần tiêu đề trong một bảng
<title> Định nghĩa tiêu đề cho văn bản HTML
<tr> Định nghĩa một hàng của một bảng
<ul> Định nghĩa một danh sách không thứ tự

Danh sách các thuộc tính cơ bản (thường gặp) của thẻ HTML (tham khảo chi tiết hơn tại http://www.w3schools.com/tags/ref_standardattributes.asp )

Thuộc tính Chức năng
class Xác định một hay nhiều tên lớp cho một phần tử
id Xác định một định danh duy nhất cho một phần tử
lang Xác định ngôn ngữ cho nội dung của phần tử
style Xác định kiểu inline CSS
title Xác định thông tin bổ sung cho một phần tử
src Thường dùng trong thẻ <img>, xác định địa chỉ một image
href Thường dùng trong thẻ <a>, xác định địa chỉ liên kết

Học HTML&CSS >