Các phần tử HTML
Một văn bản HTML được tạo ra từ các phần tử HTML.
Một phần tử HTML nói chung nó được viết bởi các thẻ,
bắt đầu bởi mở thẻ <tên-thẻ>
kết thúc bởi đóng thẻ </tên-thẻ>
và
ở giữa là nội dung phần tử, ví dụ:
<p> Xin chào các bạn (nội dung text và html) <p>
Các phần tử HTML có thể lồng vào nhau,
nghĩa là phần tử này chứa phần tử khác.
Như ví dụ dưới đây <body>
chứa trong nó phần tử <p>
,
đến lượt thẻ <p>
chứa nội dung "Đây là một đoạn văn"
và một thẻ <br>
<html> <head> <title>Phần tử HTML</title> <meta charset="UTF-8"> </head> <body> <p>Đây là một đoạn văn <br /></p> </body> </html>
Có một số thẻ HTML như
<br> <img> <hr> <meta> <input><base>
...
không có phần đóng thẻ, mà chỉ có phần mở thẻ và có thể thiết
lập thuộc tính nếu có.
Thuộc tính HTML
Các thuộc tính nhằm thiết lập thêm thông tin cho các thẻ (phần tử HTML). Hầu hết thuộc tính phần tử HTML thiết lập bằng tên thuộc tính và giá trị đi cùng với nó.
Các thuộc tính của phần tử HTML viết tại tại vị trí mở thẻ, giữa ký hiệu <tên-thẻ và ký hiệu >. Thuộc tính viết theo cặp : tên-thuộc-tính="giá trị"
Ví dụ: Thuộc tính align
gán cho nó giá trị bằng center
thì viết là align="center"
,
đặt thuộc tính này cho thẻ <p>, thì nội dung text sẽ căn giữa
<html> <head> <title>Thuộc tính</title> <meta charset="UTF-8"> </head> <body> <p align="center"> Đoạn văn được căn giữa trang. </p> </body> </html>

Thuộc tính kích thước width
Thuộc tính này thiết lập độ rộng phần tử, nó có tác động trên các phần tử như:
<hr>, <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>
.
Ví dụ sau, tạo đường ngang với kích thước ấn định có độ rộng là 50 pixel
<hr width="50px" />
Ngoài đơn vị px như trên, bạn có thể xác định theo tỷ lệ phần trăm. Ví dụ đường ngang rộng 50% của khối.
<hr width="50%" />
Thuộc tính canh lề align
align
là thuộc tính xác định cách căn lề của phần tử
( <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot> , <th>, <thead>, <tr>)
theo chiều ngang nó có thể nhận các giá trị:
align = "left"
canh tráialign = "right"
canh phảialign = "center"
canh giữaalign = "justify"
canh đều
<html> <head> <title>Attributes</title> </head> <body> <p align="center">This is a text <br /> <hr width="10%" align="right" /> This is also a text. </p> </body> </html>
Thuộc tính toàn cục
Các phần tử HTML khác nhau có thể có các thuộc tính khác nhau (thuộc tính này dùng được cho phần tử này nhưng chưa chắc đã dùng được cho phần tử khác). Do vậy, mỗi phần tử cần xem xét các thuộc tính riêng của nó. Tuy nhiên có một số thuộc tính mà mọi phần tử HTML đều có thể có gọi là các thuộc tính toàn cục. Một số hay dùng đó là:
accesskey
: thiết lập phím tắt kích hoạtclass
: thiết lập lớp (CSS) cho phần tửcontenteditable
: thiết lập lớp (CSS) cho phần tửdata-*
: thiết lập dữ liệu riêng cho phần tử, quy định thống nhất đặt tên với tiền tốdata-
draggable
: cho phép kéo/thảhidden
: ẩn phần tửid
: gán id (tên duy nhất) cho phần tử, để chọn phần tử, để thiết lập CSSspellcheck
: thiết lập kiểm tra ngữ phápstyle
: Định nghĩa CSS trực tiếp trong phần tửtitle
: tiêu đề phần tử (hiện thị khi chuột dừng trên phần tử)
accesskey
Chỉ ra một phím tắt kích hoạt phần tử.
<a href="https://xuanthulab.net" accesskey="x">HTML</a>
class
Chỉ ra một hoặc nhiều tên lớp áp dụng cho phần tử (lớp liên quan CSS)
<a href="https://xuanthulab.net" class="link1 link2">HTML</a>
contenteditable
Cho biết nội dung trong phần tử có thể soạn thảo biên tập lại hay không. Nếu true thì sẽ xuất hiện box soạn thảo cho phần tử
<p contenteditable="true">Nội dung này soạn thảo được</p>
data-*
Thuộc tính thiết lập dữ liệu riêng cho phần tử, ký hiệu *
là một tên tự đặt. data-*
là chuẩn đặt tên thuộc tính dữ liệu dùng cho HTML5
<p data-dulieu="Đây là dữ liệu riêng">Ví dụ</p>
draggable
Chỉ ra phần tử có thể kéo thả (true,false, auto)
<p draggable="true">Ví dụ</p>
hidden
Khi có thuộc tính này phần tử sẽ ẩn
<p hidden>Ví dụ</p>
id
Thiết lập một định danh duy nhất cho phần tử HTML. Định danh này để tìm kiếm trong DOM
<p id="idphantup">Ví dụ</p>
spellcheck
Cho trình duyệt biết có kiểm tra ngữ pháp phần tử này hay không
<p spellcheck="true">Có kiểm tra ngữ pháp</p>
style
Định nghĩa CSS cho phần tử.
<p style="font-size: 18px">Inline style sheet</p>
title
Thông tin thêm về phần tử
<p title="Thông tin thêm">Đây là đoạn văn</p>