HTML là gì? Các thành phần quan trọng của HTML? - Mua theme Wordpress - Thiết Kế Website - Chuẩn Seo

HTML không phải là ngôn ngữ lập trình, đồng nghĩa với việc nó không thể tạo ra các chức năng “động” giống như các ngôn ngữ lập trình khác được. Nó giống như Microsoft Word nhưng dùng để bố cục và định dạng các trang của website. Vậy thì HTML là gì? HTML có những thành phần quan trọng nào? Và cách ứng dụng của nó ra sao? Hãy cùng Hoc11.vn tìm hiểu qua bài viết sau nhé!

Các phần tử của HTML ( HTML Elements )

HTML là chữ viết tắt của Hypertext Markup Language ( Ngôn ngữ đánh dấu siêu văn bản). Nó giúp người dùng tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, links,…. Cùng đi vào tìm hiểu các phần tử của nó nào!

Phần tử HTML hay còn được biết đến với tên Tag hay Entity hay thẻ. HTML là ngôn ngữ đánh dấu (markup-language) do đó có thể hiểu một phần tử HTML chính là một văn bản được đánh dấu để thể hiện theo một cách nào đó.

Một phần tử HTML thường được xác định dựa trên ba thành phần:

Thẻ mở
Nội dung nằm bên trong cặp thẻ (hay còn được gọi là nội dung của phần tử)
Thẻ đóng

Thẻ mở	Nội dung phần tử	Thẻ đóng
&lth1&gt	This is a Heading	&lt/h1&gt
&ltp&gt	This is paragraph.	&lt/p&gt

Các thuộc tính phần tử của HTML ( HTML Attributes)

Thuộc tính phần tử HTML được sử dụng để bổ sung thông tin cho phần tử. Có thể tóm gọn về thuộc tính phần tử HTML đơn giản như sau:

Các phần tử HTML có thể có các thuộc tính
Các thuộc tính cung cấp thêm thông tin về phần tử
Các thuộc tính có các cặp tên / giá trị như charset = “utf-8”

Ví dụ về một trang HTML đơn giản như sau:

 <span class="tagnamecolor"><span class="tagcolor"><</span>!DOCTYPE<span class="attributecolor"> html></span></span><br><span class="tagnamecolor"><span class="tagcolor"><</span>html<span class="attributecolor"> lang<span class="attributevaluecolor">="en"></span></span></span><p><span class="tagnamecolor"><span class="tagcolor"><</span>meta<span class="attributecolor"> charset<span class="attributevaluecolor">="utf-8"></span></span></span><br><span class="tagnamecolor"><span class="tagcolor"><</span>title></span>Page Title<<span class="tagnamecolor">/title></span></p><p><span class="tagnamecolor"><span class="tagcolor"><</span>body></span><br>  <<span class="tagnamecolor">h1></span>This is a Heading<<span class="tagnamecolor">/h1></span><br>  <<span class="tagnamecolor">p></span>This is a paragraph.<<span class="tagnamecolor">/p></span><br>  <<span class="tagnamecolor">p></span>This is another paragraph.<<span class="tagnamecolor">/p></span><br><span class="tagnamecolor"><span class="tagcolor"><</span>/body></span></p><p><span class="tagnamecolor"><span class="tagcolor"><</span>/html></span></p>

&lt!DOCTYPE html&gt &lthtml lang="en"&gt&ltmeta charset="utf-8"&gt &lttitle&gtPage Title&lt/title&gt&ltbody&gt &lth1&gtThis is a Heading&lt/h1&gt &ltp&gtThis is a paragraph.&lt/p&gt &ltp&gtThis is another paragraph.&lt/p&gt &lt/body&gt&lt/html&gt

Giải thích ví dụ trên:

Các phần tử HTML là các khối xây dựng của các trang HTML.

Khai báo &lt!DOCTYPE html&gt định nghĩa trang này là HTML5
Phần tử &lthtml&gt là phần tử gốc của một trang HTML
Thuộc tính lang định nghĩa ngôn ngữ của trang
Phần tử &ltmeta&gt chứa thông tin meta của trang
Thuộc tính charset xác định bộ ký tự sử dụng trong trang
Phần tử &lttitle&gt chỉ định tiêu đề của trang
Phần tử &ltbody&gt chứa nội dung mà trang hiển thị
Phần tử &lth1&gt định nghĩa tiêu đề lớn
Phần tử &ltp&gt định nghĩa đoạn văn

Tất cả các trang HTML phải bắt đầu bằng khai báo: &lt! DOCTYPE html&gt.

Bản thân trang HTML đó cũng phải bắt đầu bằng &lthtml&gt và kết thúc bằng &lt/html&gt.

Phần nội dung hiển thị của trang HTML nằm giữa 2 tag &ltbody&gt và &lt/body&gt.

Cấu trúc của một trang HTML

Hình ảnh dưới đây sẽ cho bạn thấy cấu trúc của một trang HTML là gì? Nó trông ra sao.

Phần màu trắng chính là phần nội dung sẽ hiển thị ra cho người dùng nhìn thấy.

Các phần tử trong một trang HTML được biểu diễn ra sao?

1. Tiêu đề

Các tiêu đề HTML được định nghĩa bằng các thẻ heading từ &lth1&gt cho đến &lth6&gt.

Thẻ &lth1&gt chính là tiêu đề quan trọng nhất. &lth6&gt xác định tiêu đề ít quan trọng nhất:

 <span class="tagnamecolor"><span class="tagcolor"><</span>h1></span>This is heading 1<<span class="tagnamecolor">/h1></span><br><span class="tagnamecolor"><span class="tagcolor"><</span>h2></span>This is heading 2<<span class="tagnamecolor">/h2></span><br><span class="tagnamecolor"><span class="tagcolor"><</span>h3></span>This is heading 3<<span class="tagnamecolor">/h3></span>

&lth1&gtThis is heading 1&lt/h1&gt &lth2&gtThis is heading 2&lt/h2&gt &lth3&gtThis is heading 3&lt/h3&gt

2. Đoạn văn bản

Đoạn văn bản trong HTML được định nghĩa trong thẻ &ltp&gt

 <span class="tagnamecolor"><span class="tagcolor"><p>This is a paragraph.</p><br><p>This is another paragraph.</p></span></span>

1	<span class="tagnamecolor"><span class="tagcolor">&ltp&gtThis is a paragraph.&lt/p&gt<br>&ltp&gtThis is another paragraph.&lt/p&gt</span></span>

3. Liên kết

Các liên kết HTML được định nghĩa trong thẻ &lta&gt

 <span class="tagnamecolor"><span class="tagcolor"><</span>a<span class="attributecolor"> href<span class="attributevaluecolor">="https://www.w3schools.com"></span></span></span>This is a link<<span class="tagnamecolor">/a></span>

1	<span class="tagnamecolor"><span class="tagcolor">&lt</span>a<span class="attributecolor"> href<span class="attributevaluecolor">="https://www.w3schools.com"&gt</span></span></span>This is a link&lt<span class="tagnamecolor">/a&gt</span>

Điểm đến của liên kết đó nằm trong thuộc tính href

4. Hình ảnh

Hình ảnh HTML được định dạng bằng thẻ &ltimg&gt.

Tệp nguồn (src), văn bản thay thế (alt), chiều rộng và chiều cao được cung cấp dưới dạng các thuộc tính:

 <span class="tagcolor"><</span>img<span class="attributecolor"> src<span class="attributevaluecolor">="img_w3schools.jpg"</span> alt<span class="attributevaluecolor">="W3Schools"</span> style<span class="attributevaluecolor">="width:120px;height:150px"></span></span>

1	<span class="tagcolor">&lt</span>img<span class="attributecolor"> src<span class="attributevaluecolor">="img_w3schools.jpg"</span> alt<span class="attributevaluecolor">="W3Schools"</span> style<span class="attributevaluecolor">="width:120px;height:150px"&gt</span></span>

5. Nút click

Các nút click được định nghĩa trong các thẻ &ltbutton&gt

 <span class="tagnamecolor"><span class="tagcolor"><</span>button></span>Click me<<span class="tagnamecolor">/button></span>

1	<span class="tagnamecolor"><span class="tagcolor">&lt</span>button&gt</span>Click me&lt<span class="tagnamecolor">/button&gt</span>

6. Danh sách

Danh sách trong HTML được xác định bằng các thẻ &ltul&gt (danh sách không có thứ tự / dấu đầu dòng) hoặc thẻ &ltol&gt (danh sách được sắp xếp / đánh số), theo sau là thẻ &ltli&gt (danh sách các mục):

 <span class="tagnamecolor"><span class="tagcolor"><</span>ul></span><br> <<span class="tagnamecolor">li></span>Coffee<<span class="tagnamecolor">/li></span><br> <<span class="tagnamecolor">li></span>Tea<<span class="tagnamecolor">/li></span><br> <<span class="tagnamecolor">li></span>Milk<<span class="tagnamecolor">/li></span><br><span class="tagnamecolor"><span class="tagcolor"><</span>/ul></span>

&ltul&gt &ltli&gtCoffee&lt/li&gt &ltli&gtTea&lt/li&gt &ltli&gtMilk&lt/li&gt &lt/ul&gt

7. Bảng

Các bảng trong HTML được xác định bằng thẻ &lttable&gt.

Các hàng của bảng được xác định bằng thẻ &lttr&gt.

Tiêu đề bảng được xác định bằng thẻ &ltth&gt. (in đậm mặc định).

Các ô của bảng (dữ liệu) được xác định bằng thẻ &lttd&gt.

 <span class="tagnamecolor"><span class="tagcolor"><</span>table></span><br> <<span class="tagnamecolor">tr></span><br>   <<span class="tagnamecolor">th></span>Firstname<<span class="tagnamecolor">/th></span><br>   <<span class="tagnamecolor">th></span>Lastname<<span class="tagnamecolor">/th></span><br>   <<span class="tagnamecolor">th></span>Age<<span class="tagnamecolor">/th></span><br> <<span class="tagnamecolor">/tr></span><br> <<span class="tagnamecolor">tr></span><br>  <<span class="tagnamecolor">td></span>Jill<<span class="tagnamecolor">/td></span><br>   <<span class="tagnamecolor">td></span>Smith<<span class="tagnamecolor">/td></span><br>   <<span class="tagnamecolor">td></span>50<<span class="tagnamecolor">/td></span><br> <<span class="tagnamecolor">/tr></span><br> <<span class="tagnamecolor">tr></span><br>   <<span class="tagnamecolor">td></span>Eve<<span class="tagnamecolor">/td></span><br>   <<span class="tagnamecolor">td></span>Jackson<<span class="tagnamecolor">/td></span><br>   <<span class="tagnamecolor">td></span>94<<span class="tagnamecolor">/td></span><br> <<span class="tagnamecolor">/tr></span><br><span class="tagnamecolor"><span class="tagcolor"><</span>/table></span>

&lttable&gt &lttr&gt &ltth&gtFirstname&lt/th&gt &ltth&gtLastname&lt/th&gt &ltth&gtAge&lt/th&gt &lt/tr&gt &lttr&gt &lttd&gtJill&lt/td&gt &lttd&gtSmith&lt/td&gt &lttd&gt50&lt/td&gt &lt/tr&gt &lttr&gt &lttd&gtEve&lt/td&gt &lttd&gtJackson&lt/td&gt &lttd&gt94&lt/td&gt &lt/tr&gt &lt/table&gt

Lập trình HTML

Mọi phần tử của HTML đều có thể có các thuộc tính.

Trong lập trình web, các thuộc tính quan trọng nhất là id và class.

Thuộc tính	Ví dụ
id	&lttable id=”table01″&gt
class	&ltp class=”normal”&gt
style	&ltp style=”font-size:16px”&gt
data-	&ltdiv data-id=”500″&gt
onclick	&ltinput onclick=”myFunction()”&gt
onmouseover	&lta onmouseover=”this.setAttribute(‘style’,’color:red’)”&gt

Qua bài viết trên hy vọng bạn đã có thể trả lời cho mình được những câu hỏi đơn giản như HTML là gì? HTML có những thành phần nào? Và cách sử dụng của chúng ra sao? Cùng theo dõi các bài viết khác của Hoc11.vn để bổ sung thêm nhiều kiến thức hữu ích khác nữa nhé!

Nguồn: w3schools.com

Nguồn: https://www.toponseek.com/html-la-gi-cac-thanh-phan-quan-trong-cua-html/

Xem thêm: