tài liệu tham khảo các thẻ html thông dụng nhất

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (764.42 KB, 134 trang )

HTML là gì ?
HTML là chữ viết tắt của Hypertext Markup Language, là ngôn ngữ được sử
dụng rộng rãi nhất để viết các trang Web.
Hypertext là cách mà các trang Web (các tài liệu HTML) được kết nối
với nhau. Và như thế, đường link có trên trang Web được gọi là Hypertext.

Như tên gọi đã gợi ý, HTML là ngôn ngữ đánh dấu bằng thẻ (Markup
Language), nghĩa là bạn sử dụng HTML để đánh dấu một tài liệu text bằng
các thẻ (tag) để nói cho trình duyệt Web cách để cấu trúc nó để hiển thị ra
màn hình.
Lúc đầu, HTML được phát triển với mục đích để xác định cấu trúc của các tài
liệu như các tiêu đề, các đoạn văn, các danh sách… và tạo sự thuận lợi cho
việc chia sẻ thông tin khoa học giữa các nhà nghiên cứu.


Bây giờ, HTML đã được sử dụng rộng rãi để định dạng các trang Web với sự
giúp đỡ của các tag khác nhau có trong ngơn ngữ HTML.

Ví dụ một tài liệu HTML cơ bản
Dưới đây là một ví dụ về một trong các mẫu đơn giản nhất của tài liệu HTML.
<!DOCTYPE html>
<html>
<head>
<title>Day la tieu de</title>
</head>
<body>

Day la dau de

Phan noi dung cua tai lieu ...

</body>
</html>

Bạn có thể sử dụng tùy chọn Try it có trên góc trên bên phải của hộp code
để kiểm tra kết quả của code HTML này, hoặc bạn lưu nó vào trong file
HTML (test.htm), sử dụng bộ biên soạn văn bản mà bạn thích. Cuối cùng,

bạn sử dụng một trình duyệt Web chẳng hạn như Internet Explore, Google
Chrome, hoặc Firefox… để mở nó. Nó sẽ hiển thị kết quả sau:

Các thẻ trong HTML - Tag trong HTML
Như đã trình bày ở trên, HTML là ngơn ngữ đánh dấu bằng thẻ (tag) và sử
dụng các thẻ khác nhau để định dạng nội dung. Những thẻ này được chứa
trong hai dấu ngoặc đơn <tên thẻ>. Trừ một vài thẻ, hầu hết các thẻ đều có
các thẻ đóng tương ứng với nó. Ví dụ, thẻ <html> có thẻ đóng tương ứng
là </html> và thẻ <body> có thẻ đóng tương ứng là </body> ...
Ví dụ trên về tài liệu HTML đã sử dụng các thẻ sau đây:
Tag

Miêu tả

<!DOCTYPE...>

Còn gọi là thẻ khai báo một tài liệu HTML. Thẻ này xác định loại tài liệu
và phiên bản HTML.

<html>

Thẻ này bao phủ các tài liệu HTML đầy đủ. Còn đầu trang tài liệu thì
được biểu diễn bởi các thẻ <head>...</head> và thân tài liệu là các
thẻ <body>...</body> .

<head>

Thẻ này đại diện cho đầu trang tài liệu mà có thể giữ các thẻ HTML
như <title>, <link> ...

<title>

Thẻ <title> được sử dụng trong thẻ <head> chỉ tiêu đề tài liệu.

<body>

Thẻ này đại diện cho thân tài liệu và giữ các thẻ như

, <div>,
...

Thẻ này đại diện cho các tiêu đề trang.

Thẻ này đại diện cho đoạn văn.

Để học HTML, bạn sẽ cần phải học các thẻ khác nhau và hiểu cách chúng
vận hành trong khi định dạng tài liệu thuần văn bản. Học HTML là đơn giản
khi người sử dụng học được cách sử dụng của các thẻ khác nhau để định
dạng văn bản hoặc hình ảnh để tạo các trang Web đẹp.
World Wide Web Consortium (W3C) đề nghị sử dụng các thẻ chữ thường
bắt đầu từ HTML 4.

Cấu trúc tài liệu HTML
Một tài liệu HTML đặc trưng có cấu trúc cơ bản sau:
Thẻ khai báo <!DOCTYPE>
<html>
<head>
Các thẻ liên quan tới đầu đề tài liệu
</head>
<body>
Các thẻ liên quan tới phần thân tài liệu
</body>
</html>

Chúng ta sẽ học về các thẻ <head> và thẻ <body> trong các chương tiếp
theo, bây giờ chúng ta sẽ tìm hiểu về thẻ khai báo trong HTML.

Thẻ khai báo <!DOCTYPE>
Thẻ khai báo <!DOCTYPE> được sử dụng để các trình duyệt Web biết được
phiên bản HTML mà bạn sử dụng. Phiên bản hiện tại của HTML là 5 và sử
dụng thẻ khai báo sau:
<!DOCTYPE html>

Phụ thuộc vào phiên bản của HTML mà có rất nhiều loại thẻ được sử dụng.
Chúng ta sẽ tìm hiểu chi tiết về các thẻ <!DOCTYPE...> này song song với
các thẻ HTML khác.

Các thẻ hiển thị đầu đề (heading) trong HTML
Bất kỳ tài liệu nào cũng đều bắt đầu với một đầu đề. Bạn có thể sử dụng các
kích cỡ khác nhau cho đầu đề của bạn. HTML cũng có 6 cỡ khác nhau cho
đầu đề, sử dụng các thẻ cơ bản là

,

, và

.

Trong khi hiển thị bất cứ một đầu đề nào, các trình duyệt sẽ thêm (để cách)
một dịng trước và một dịng sau đầu đề đó.

Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Day la tieu de - Vi du dau de</title>
</head>
<body>

Day la dau de 1

Day la dau de 2

Day la dau de 3

Day la dau de 4

Day la dau de 5

Day la dau de 6

</body>

Khi chạy, code trên sẽ hiển thị kết quả:

Bạn sẽ thấy rằng độ lớn cũng như mức độ in đậm cho từng đầu đề là khác
nhau tùy cho từng thẻ.

Thẻ biểu diễn đoạn văn trong HTML - Thẻ p trong HTML
Thẻ

, với p là viết tắt của Paragraph, giúp cấu trúc tài liệu HTML của bạn
thành các đoạn văn khác nhau. Mỗi một đoạn văn trong tài liệu HTML sẽ ở
trong một thẻ mở

và một thẻ đóng

như ví dụ bên dưới.

Ví dụ thẻ p trong HTML:
<!DOCTYPE html>
<html>
<head>
<title>Vi du the p trong HTML</title>
</head>
<body>

Day la doan van thu nhat.

Day la doan van thu hai.

Day la doan van thu ba.

</body>
</html>

Chạy đoạn code này sẽ hiển thị kết quả:
Day la doan van thu nhat.
Day la doan van thu hai.
Day la doan van thu ba.

Thẻ ngắt dòng trong HTML - Thẻ br trong HTML
Bất cứ khi nào bạn sử dụng thẻ
thì các đối tượng theo sau nó sẽ bắt
đầu từ dịng tiếp theo. Thẻ này là một ví dụ cho một khoảng trống (empty)
trong tài liệu, tại đó bạn khơng cần các thẻ mở và đóng vì sẽ khơng có gì
trong đó.
Thẻ
có một khoảng trống giữa hai ký từ br và dấu gạch chéo theo sau.
Nếu bạn bỏ sót khoảng trống này, các trình duyệt cũ hơn sẽ gặp vấn đề
trong việc hiển thị sự ngắt dòng, trong khi nếu bạn quên dấu gách chéo theo

sau và chỉ sử dụng
thì sẽ khơng có hiệu lực trong XHTML.

Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>Vi du the br trong HTML</title>
</head>
<body>

Xin chao tat ca cac ban

Cam on ban da hoc HTML tai VietJack.

Chuc cac ban hoc tot!

VietJack Team

</body>

</html>

Chạy đoạn code sẽ hiển thị kết quả sau:
Xin
chao
Cam
on
ban
Chuc
cac
VietJack Team

tat
da

ca
hoc
ban

HTML

cac
tai
hoc

ban
VietJack.
tot!

Căn chỉnh nội dung trung tâm - Thẻ center trong HTML
Bạn có thể sử dụng thẻ để căn chỉnh bất kỳ nội dung vào phần
trung tâm của trang hoặc của bất kỳ ơ nào trong bảng.

Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>Vi du the center trong HTML</title>
</head>
<body>

Doan van nay hien thi nhu binh thuong.

Doan van nay duoc can chinh vao giua.

</body>
</html>

Chạy đoạn code sẽ hiển thị kết quả sau:
Doan van nay hien thi nhu binh thuong.
Doan van nay duoc can chinh vao giua.

Hiển thị dòng ngang trong HTML - Thẻ hr trong HTML

Các đường ngang được sử dụng để ngăn cách các khu vực trong tài liệu.
Thẻ <hr> tạo một dòng ngang từ vị trí hiện tại trong tài liệu đến lề phải và do
đó tạo ra một dịng ngắt.
Ví dụ, bạn muốn có một dịng ngang để ngăn cách 2 paragraph:

Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>Vi du hien thi dong ngang trong HTML</title>
</head>
<body>

Doan van thu nhat va nam o ben tren

<hr />

Doan van thu hai va nam o ben duoi

</body>
</html>

Nó sẽ hiển thị kết quả sau khi bạn chạy đoạn code trên:
Doan van thu nhat va nam o ben tren

Doan van thu hai va nam o ben duoi
Thẻ <hr /> là một ví dụ cho một khoảng trống trong tài liệu, tại đó bạn
khơng cần các thẻ đóng và mở bởi vì khơng có đối tượng nào trong đó.
Thẻ <hr /> có một khoảng trống giữa 2 ký tự hr và dấu gạch chéo. Nếu bạn
bỏ quên khoảng trống, các trình duyệt cũ sẽ khó khăn trong việc hiển thị các
đường ngang, trong khi đó, nếu bạn quên ký tự dấu gạch chéo và chỉ sử
dụng <hr> thì sẽ khơng có hiệu lực trong XHTML.

Giữ nguyên định dạng trong HTML - Thẻ pre trong HTML

Đôi khi bạn muốn văn bản của bạn được hiển thị như những gì bạn đã viết.
Trong những trường hợp này, bạn có thể sử dụng thẻ xác định định dạng
trước là

.
Khi đó, bất kỳ văn bản nào xuất hiện trong thẻ mở  và thẻ đóng </pre>
sẽ duy trì cái định dạng trong tài liệu nguồn.

Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>Vi du the pre trong HTML</title>
</head>
<body>

function testFunction( strText ){

alert (strText)
}
</pre>
</body>
</html>

Kết quả hiển thị khi bạn chạy đoạn code trên là:
function testFunction( strText ){
alert (strText)
}

Bạn thử sử dụng code tương tự mà không sử dụng 2 thẻ ...</pre> để
so sánh sự khác nhau trong kết quả hiển thị.

Hiển thị các khoảng trống không ngắt trong HTML
Giả sử bạn muốn sử dụng cụm từ "12 Angry Men." Bạn khơng muốn một
trình duyệt Web chia (ngắt) cụm từ trên thành "12 Angry" và "Men" ở hai
dòng:

 
Sau day la vi du minh hoa cho khoang trong ngat trong HTML. Bo phim co ten goi "12 Angry Men."

Trong tình huống này bạn khơng muốn trình duyệt ngắt văn bản của bạn, bạn
nên sử dụng khoảng trống không ngắt   thay vì sử dụng một khoảng
trống thơng thường. Ví dụ khi gõ code "12 Angry Men" vào một paragraph,
bạn nên dùng đoạn code tương tự như sau:

Ví dụ
<!DOCTYPE html>
<html>

<head>
<title>Vi du khoang trong khong ngat trong HTML</title>
</head>
<body>
Sau day la vi du minh hoa cho khoang trong ngat trong HTML. Bo phim co ten goi
"12 Angry Men."

</body>
</html>

Một phần tử HTML được xác định bằng một thẻ mở. Nếu phần tử này bao
hàm nội dung khác, nó kết thúc với một thẻ đóng. Trong thẻ đóng, tên của
phần tử được đứng trước bởi dấu gạch chéo. Bảng dưới hiển thị một số thẻ:
Thẻ mở

Nội dung

Thẻ đóng



Nội dung đoạn văn





Nội dung tiêu đề




<div>

Nội dung khu vực

</div>




 
Như vậy ở đây ....
 là một phần tử HTML, ...
 là một phần
tử HTML khác. Bên cạnh đó cịn có các phần tử HTML khác mà khơng cần
đóng, như các phần tử <img.../>, <hr /> và 
 . Nó được biết đến như là
các phần tử trống.
Các tài liệu HTML bao gồm một cây của các phần tử này và nó xác định cách
tài liệu HTML được xây dựng, và loại nội dung nên được đặt trong một phần
của tài liệu HTML.

Thẻ và phần tử HTML
Một yếu tố HTML được xác định bằng một thẻ mở. Nếu phần tử này bao
hàm nội dung khác, nó kết thúc với một thẻ đóng.
Ví dụ, thẻ  là thẻ mở của đoạn văn và thẻ 
 là thẻ đóng của đoạn văn
đó, nhưng Đây là một đoạn văn
 là một phần tử đoạn văn.

Các phần tử HTML được lồng vào nhau
Nó cho phép một phần tử HTML giữ trong một phần tử khác.

Ví dụ
<!DOCTYPE html>

<html>
<head>
<title>Vi du long phan tu</title>
</head>
<body>
Vi du mot dau de co dang <i>in nghieng</i>

Vi du phan van ban <u>bi gach chan</u>

</body>
</html>

Nó sẽ hiển thị kết quả sau khi bạn chạy code trên:

 
Vi du mot dau de co dang in nghieng
Vi du phan van ban bi gach chan
Chúng ta đã tìm hiểu một số thẻ HTML và cách sử dụng của nó như các thẻ
, 
, thẻ đoạn văn  và các thẻ khác. Chúng ta đã sử dụng các thẻ
này chỉ với các tác dụng đơn giản nhất của các thẻ, nhưng hầu hết các thẻ
HTML có thể cũng có các thuộc tính hay các đặc trưng, mà có thể cung cấp
cho chúng ta thêm một số tác dụng hữu ích khác (chẳng hạn như định dạng,
style, ...).
Một thuộc tính được sử dụng để xác định đặc trưng của một phần tử HTML
và được đặt trong một thẻ mở của phần tử đó. Tất cả các thuộc tính được
chia thành 2 phần : tên và một giá trị:
Tên là tên của thuộc tính. Ví dụ, phần tử đoạn văn 
 trong ví dụ dưới
mang một thuộc tính tên có tên là align, và bạn có thể sử dụng thuộc tính này
để căn chỉnh của đoạn văn trong một trang.

Giá trị là những gì mà bạn muốn gán thuộc tính và được đặt trong các
trích dẫn. Ví dụ dưới chỉ 3 giá trị có thể của thuộc tính align: left, center,

và right.
Tên thuộc tính và giá trị thuộc tính là khơng phân biệt chữ hoa và chữ
thường. Tuy nhiên, W3C đề nghị thuộc tính chữ thường và thuộc tính giá trị
trong phiên bản HTML 4 đã giới thiệu. Ví dụ:


Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>Vi du thuoc tinh align trong HTML</title>
</head>
<body>
Doan van nay duoc can chinh trai

Doan van nay duoc can chinh giua

Doan van nay duoc can chinh phai

</body>

 
</html>

Chạy đoạn code sẽ hiển thị kết quả:
Doan van nay duoc can chinh trai
Doan van nay duoc can chinh giua
Doan van nay duoc can chinh phai

Các thuộc tính cốt lõi trong HTML
Có 4 thuộc tính cốt lõi có thể được sử dụng trong phần lớn các phần tử
HTML (mặc dù khơng phải tồn bộ) là:



Thuộc tính id



Thuộc tính title



Thuộc tính class



Thuộc tính style

Thuộc tính id trong HTML
Các thuộc tính id của một thẻ HTML được sử dụng để nhận diện duy nhất
bất kỳ phần tử nào trong một trang HTML. Có 2 lý do chính mà bạn có thể
muốn sử dụng một thuộc tính id trên một phần tử là:


Nếu một phần tử mang thuộc tính id như là một định danh duy nhất, nó
có thể xác định đích danh phần tử đó và nội dung của nó.



Nếu bạn có 2 phần tử cùng tên trong một trang Web, bạn có thể sử
dụng thuộc tính id để phân biệt giữa 2 phần tử mà có cùng tên đó.
Bây giờ, chúng ta sử dụng thuộc tính id để phân biệt giữa 2 phần tử đoạn
văn như ví dụ dưới.

VÍ DỤ
Vi du 1 ve thuoc tinh id trong HTML


 
Vi du 2 ve thuoc tinh id trong HTML


Thuộc tính title trong HTML
Thuộc tính title cung cấp một tiêu đề cho một phần tử. Cú pháp cho thuộc
tính title tương tự như phần giải thích ở trên của thuộc tính id.
Chế độ xử lý của thuộc tính này phụ thuộc vào phần tử mang nó, mặc dù nó
thường hiển thị một tooltip khi bạn rê chuột qua. Ví dụ:
VÍ DỤ
<!DOCTYPE html>
<html>
<head>
<title>Vi du thuoc tinh title trong HTML</title>
</head>
<body>
Ban re chuot qua day

</body>
</html>

Hiển thị kết quả:

Ban re chuot qua day
Bây giờ bạn hãy thử rê con trỏ chuột qua "Ban re chuot qua day" và bạn sẽ
thấy một tooltip sẽ được phóng to.

Thuộc tính class trong HTML
Thuộc tính class được sử dụng để liên kết một phần tử với một Style Sheet

và xác định kiểu của phần tử. Bạn sẽ được học thêm về cách sử dụng của
thuộc tính này khi bạn học về Cascading Style Sheet (CSC). Vì thế, bây giờ
bạn có thể chưa cần học đến nó.
Giá trị của thuộc tính này có thể là một danh sách tên các class riêng rẽ
được phân biệt nhau bởi khoảng trống. Ví dụ:

 
class="tenClass1 tenClass2 tenClass3"

Thuộc tính style trong HTML
Thuộc tính này cho phép bạn xác định rõ các quy tắc Cascading Style Sheet
(CSC) trong phần tử.
<!DOCTYPE html>
<html>
<head>
<title>Vi du thuoc tinh style trong HTML</title>
</head>
<body>
Hoc HTML tai VietJack...

</body>
</html>

Nó sẽ hiển thị kết quả:
Hoc HTML tai VietJack...
Lúc này bạn chưa học về CSS, vì thế hãy tiếp tục tiến hành mà khơng cần lo
lắng về CSS. Tại đây chúng ta cần hiểu các thuộc tính HTML là gì và cách
chúng sử dụng để định dạng nội dung.

Các thuộc tính Global trong HTML
Có 3 thuộc tính Global có trong hầu hết (khơng phải tất cả) các phần tử

XHTML.


Thuộc tính dir



Thuộc tính lang



Thuộc tính xml:lang

 
Thuộc tính dir trong HTML
Thuộc tính dir cho phép bạn chỉ đạo trình duyệt phương hướng mà văn bản
hiển thị (chẳng hạn từ trái qua phải). Thuộc tính này nhận một trong 2 giá trị,
hiển thị ở bảng dưới:
Giá trị

Ý nghĩa

ltr

Từ trái qua phải (giá trị mặc định)

rtl

Từ phải qua trái (cho các ngôn ngữ như Hebrew, Arabic… mà được đọc từ phải qua trái)


VÍ DỤ
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>Vi du thuoc tinh dir trong HTML</title>
</head>
<body>
Phan van ban nay duoc hien thi tu phai sang trai.
</body>
</html>

Hiển thị kết quả như sau:
Phan van ban nay duoc hien thi tu phai sang trai.

Khi thuộc tính dir được sử dụng trong thẻ <html> , nó quyết định cách mà
văn bản xuất hiện trong toàn bộ tài liệu. Khi sử dụng với thẻ khác, nó điều
khiển hướng của văn bản cho nội dung của thẻ đó.

Thuộc tính lang trong HTML
Thuộc tính lang cho phép bạn chỉ rõ ngơn ngữ chính sử dụng trong một tài
liệu, nhưng thuộc tính này được giữ trong HTML chỉ cho khả năng tương

 
thích ngược với các phiên bản trước của HTML. Thuộc tính này được thay
thế bằng thuộc tính xml:lang trong tài liệu XHTML mới.
Các giá trị của thuộc tính lang là các mã ngôn ngữ hai ký tự tiêu chuẩn ISO639. Bạn có thể kiểm tra danh sách các code này ở chương Mã hóa ngơn
ngữ HTML: ISO 639.
VÍ DỤ
<!DOCTYPE html>
<html lang="vi">

<head>
<title>Vi du thuoc tinh lang trong HTML</title>
</head>
<body>
Trang VietJack duoc viet bang tieng Viet.
</body>
</html>

Thuộc tính xml:lang trong XHTML
Thuộc tính xml:lang trong XHTML thay cho thuộc tính lang. Giá trị của thuộc
tính xml:lang này có thể là một mã quốc gia trong ISO-639 như đã đề cập ở
trên.

Các thuộc tính chung trong HTML
Bảng dưới miêu tả các thuộc tính khác mà sử dụng dễ dàng với nhiều thẻ
HTML:
Thuộc tính

Giá trị

Chức năng

align

right, left, center

Các thẻ căn chỉnh theo chiều ngang

valign


top, middle, bottom

Các thẻ căn chỉnh theo chiều dọc trong một phần tử
HTML

 
bgcolor

Giá trị số, thập lục phân,
RGB

Đặt màu nền phía sau một phần tử

background

URL

Đặt ảnh nền phía sau một phần tử

id

Người dùng tự định nghĩa

Đặt tên một phần tử để sử dụng với Cascading Style
Sheets

class

Người dùng tự định nghĩa


Phân loại một phần tử để sử dụng với Cascading Style
Sheets

width

Giá trị số

Xác định độ rộng của bảng, hình ảnh hoặc ơ trong
bảng

height

Giá trị số

Xác định chiều cao của bảng, hình ảnh hoặc ô trong
bảng

title

Người dùng tự định nghĩa

"Pop-up" tiêu đề của phần tử

Chúng ta sẽ nghiên cứu các ví dụ liên quan khi chúng ta tiến hành với các
thẻ HTML khác. Để tìm hiểu danh sách đầy đủ của các thể HTML và các
thuộc tính liên quan, bạn truy cập để vào chương
Nếu bạn sử dụng một ứng dụng Word, bạn phải làm quen với các thao tác
để in đậm, in nghiêng, hay gạch chân; đó là 3 trong số 10 tùy chọn có sẵn để
chỉ cách mà văn bản xuất hiện trong HTML và XHTML.


In đậm trong HTML - Thẻ b trong HTML
Bất cứ nội dung gì mà xuất hiện trong phần tử <b>...</b> đều được in đậm.

Ví dụ
<!DOCTYPE html>
<html>
<head>

 
<title>In dam van ban trong HTML</title>
</head>
<body>
Vi du <b>the b trong HTML</b>.

</body>
</html>

Kết quả hiển thị là:
Vi du the b trong HTML.

In nghiêng trong HTML - Thẻ i trong HTML
Bất cứ nội dung gì xuất hiện trong phần tử <i>...</i> đều được in nghiêng:

Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>In nghiêng văn bản trong HTML</title>
</head>
<body>
Vi du <i>the i trong HTML</i>.


</body>
</html>

Kết quả hiển thị:
Vi du the i trong HTML.

Gạch chân trong HTML - Thẻ u trong HTML
Bất cứ nội dung gì xuất hiện trong phần tử <u>...</u> đều được gạch chân:

Ví dụ
<!DOCTYPE html>

 
<html>
<head>
<title>Gạch chân văn bản trong HTML</title>
</head>
<body>
Vi du <u>the u trong HTML</u>.

</body>
</html>

Nó sẽ hiển thị kết quả khi bạn chạy đoạn code trên là:
Vi du the u trong HTML.

Gạch ngang trong HTML - The strike trong HTML
Bất cứ nội dung nào xuất hiện trong phần tử <strike>...</strike> đều được
gạch ngang:

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du the strike trong HTML</title>
</head>
<body>
Vi du <strike>the strike trong HTML</strike>.

</body>
</html>

Kết quả hiển thị là:
Vi du the strike trong HTML.

Font đơn cách trong HTML - The tt trong HTML
Nội dung trong phần tử <tt>...</tt> được viết dưới dạng font đơn cách. Hầu
hết các font chữ đều được biết như là các font rộng bởi vì các ký tự khác

 
nhau có độ rộng khác nhau (ví dụ như ký tự 'm' rộng hơn ký tự 'i'). Tuy nhiên
trong font đơn cách, các ký tự có độ rộng giống nhau.

Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>Vi du the tt trong HTML</title>
</head>
<body>
Vi du <tt>the tt trong HTML</tt>.

</body>

</html>

Kết quả hiển thị là:
Vi du the

tt trong HTML.

Chỉ số trên trong HTML - Thẻ sup trong HTML
Nội dung trong phần tử <sup>...</sup> được viết dưới dạng chỉ số trên, kích
cỡ của nó bằng kích cỡ của các ký tự quanh nó nhưng độ cao của nó bằng
một nửa các ký tự khác.

Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>Van bang dang chi so tren trong HTML</title>
</head>
<body>
Vi du <sup>the sup trong HTML</sup>.

</body>
</html>

 
Nó sẽ hiển thị kết quả sau khi bạn chạy code trên:
Vi du the sup trong HTML .

Chỉ số dưới trong HTML - The sub trong HTML
Nội dung trong phần tử <sub>...</sub> được viết ở dạng chỉ số dưới, kích
cỡ của nó bằng kích cỡ các ký tự xung quanh nhưng chiều cao bằng một

nửa.

Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>Van ban dang chi so duoi trong HTML</title>
</head>
<body>
Vi du <sub>the sub trong HTML</sub>.

</body>
</html>

Kết quả hiển thị:
Vi du the sub trong HTML.

Chèn văn bản trong HTML - The ins trong HTML
Bất cứ nội dung xuất hiện trong phần tử <ins>...</ins> được hiển thị như ở
dạng văn bản được chèn.

Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>Vi du the ins trong HTML</title>
</head>

 
<body>
Toi thich hoc <del>HTML</del> <ins>CSS</ins>


</body>
</html>

Nó sẽ tạo ra kết quả sau:
Toi thich hoc HTML CSS

Phần văn bản bị xóa trong HTML - Thẻ del trong HTML
Nội dung xuất hiện trong phần tử <del>...</del> được hiển thị dưới dạng bị
xóa.

Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>Vi du the del trong HTML</title>
</head>
<body>
Toi thich hoc <del>HTML</del> <ins>CSS</ins>

</body>
</html>

Kết quả hiển thị khi bạn chạy code:
Toi thich hoc HTML CSS

Cách làm văn bản hiển thị lớn hơn trong HTML - Thẻ big trong HTML
Nội dung trong phần tử <big>...</big> được hiển thị ở một kích cỡ lớn hơn
phần cịn lại xung quanh nó.

Ví dụ
<!DOCTYPE html>


 
<html>
<head>
<title>Vi du the big trong HTML</title>
</head>
<body>
Tu sau day su dung the <big>big </big> trong HTML.

</body>
</html>

Kết quả hiển thị:
Tu sau day su dung the big trong HTML.

Cách làm văn bản hiển thị nhỏ hơn trong HTML - The small trong
HTML
Nội dung xuất hiện trong phần tử <small>...</small> được hiển thị ở một
kích cỡ nhỏ hơn phần cịn lại xung quanh nó.

Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>Vi du the small trong HTML</title>
</head>
<body>
Tu sau day su dung the <small>small</small> trong HTML.

</body>
</html>


Kết quả hiển thị là:
Tu sau day su dung the small trong HTML.

Tạo nhóm nội dung trong HTML - Thẻ div và span trong HTML

 
Phần tử <div> và <span> cho phép bạn tạo các phần tử thành nhóm nội
dung để tạo ra các khu vực hoặc các tiểu khu của một trang.
Ví dụ, bạn muốn đặt tất cả các lời chú thích ở cuối trang và đặt tất cả chúng
trong một phần tử <div> để chỉ rằng tất cả các phần tử trong phần tử <div>
nào đó. Bạn cũng có thể đính kèm một style cho phần tử này.

Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>Vi du the div trong HTML</title>
</head>
<body>
<div id="menu" align="middle" >
<a href="../index.jsp">HOME</a> |
<a href="../lien-he/">CONTACT</a> |
<a href="../index.jsp">ABOUT</a>
</div>

<div id="content" align="left" bgcolor="white">
Vi du the div

Hoc HTML tai VietJack.....

</div>
</body>

</html>

Nó sẽ hiển thị kết quả như sau:
/about/contact_us.jsp
HOME | CONTACT | ABOUT
VI DU THE DIV

Hoc HTML tai VietJack....