1. HTML là gì? HTML hoạt động như thế nào?

HTML là viết tắt của cụm từ Hypertext Markup Language, là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web trên World Wide Web. 

HTML không phải là ngôn ngữ lập trình, chỉ giống như Microsoft Word, dùng để bố cục và định dạng trang web. 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,…

HTML sử dụng cấu trúc đơn giản (tags và attributes) để đánh dấu lên trang web.

Ngôn ngữ HTML là gì?

Để hiểu rõ hơn bạn cần nắm một số ý chính liên quan đến cách thức hoạt động của HTML như thế nào nhé!

Đầu tiên, HTML documents là file kết thúc với đuôi .html hay .htm. Bạn có thể xem chúng bằng cách sử dụng bất kỳ trình duyệt đọc các file HTML này và xuất bản nội dung lên internet sao cho người đọc có thể xem được chúng. 

Trung bình một trang web chứa được nhiều trang web HTML (Ví dụ như trang chủ, trang about us, trang liên hệ).

Mỗi trang HTML chứa một bộ các tag (elements) – đây được xem như cách để bạn xem như là việc xây dựng từng khối của một trang web. Bao gồm section, paragraph, heading và những khối nội dung khác. 

Bạn có thể xem chúng bằng các trình duyệt web như Google Chrome, Firefox, … Hầu hết các HTML element đều có một tag mở và một tag đóng với cấu trúc .

2. Lịch sử hình thành HTML là gì?

HTML được tạo ra bởi Tim Berners-Lee, một nhà vật lý học ở Thuỵ Sĩ. HTML đã trở thành một chuẩn Internet được Tổ chức World Wide Web Consortium vận hàng và phát triển. 

Phiên bản đầu tiên gồm 18 tag HTML 1.0, xuất hiện năm 1991. Sao đó các nhà phát triển đã thay thế HTML bằng XHTML 2.0 vào năm 2000. 

Đến năm 2014, HTML được nâng cấp lên chuẩn HTML5 với nhiều tag được thêm vài markup, nhằm để giúp các nhà phát triển xác định rõ nội dung thuộc loại gì. 

Hiện nay, HTML có khoảng 140 tag tuy nhiên có một số tag đã bị tạm ngưng. 

3. Các thuật ngữ trong HTML

Sau đây là 3 thuật ngữ thường gặp nhất trong HTML bạn không thể bỏ qua!

3.1. Elements

Elements được định nghĩa là các thẻ metadata của HTML. Một phần tử HTML được xác định dựa trên ba thành phần sau: 

• Thẻ mở 
• Nội dung nằm bên trong nội dung của phần tử
• Thẻ đóng

Tuy nhiên, ở một số trường hợp đặc biệt mà chúng chỉ có một thành phần duy nhất là thẻ mở – chúng được gọi là phần tử rỗng. 

Trong một tệp HTML, nếu bạn soạn thảo mã sai quy tắc thì các phần tử sẽ không hiển thị đúng. Nên sau đây là những điều bạn cần lưu ý về elements:

• Đừng bao giờ quên đóng thẻ đóng. Trừ trường hợp đó là phần tử rỗng, vì nếu như thiếu thẻ đóng sẽ làm ảnh hưởng đến các phần tử khác, vô hình các phần tử đó bị xem là nội dung của phần tử thiếu thẻ đóng
• Không được xáo trộn thứ tự giữa các thẻ đóng 
• Không nên trình bày mã lệnh một cách ngẫu hứng mà bạn nên tuân theo một tiêu chuẩn chung để đảm bảo tối ưu hoá việc viết mã lệnh
• Tên thẻ không phân biệt chữ hoa và chữ thường. Tuy nhiên các lập trình viên hầu hết dùng chữ thường để viết.

3.2. Tags

Trong tệp HTML, block-level tags cùng inline tags là các thẻ được dùng chủ yếu nhất. Ở đây chúng ta sẽ tìm hiểu về 2 loại này trước nhé

#1. Block-level tags

Đây là tag cấp cao và chiếm phần lớn không gian trang web, và bắt đầu dòng mới của trang. 

Có 3 loại block-level tags mà bất kỳ trang HTML nào cũng cần là , và .

#2. Inline tags

Tuy chỉ là tag chiếm một phần nhỏ không gian trang web, và không bắt đầu dòng mới của trang. 

Tag này được sử dụng để định dạng, thiết lập bố cục cho nội dung có trong block-level tags.

Có nhiều kiểu inline tags trong HTML. Ví dụ, tag định dạng chữ in đậm, tag định dạng chữ in nghiêng.

Các thẻ cơ bản của HTML 

Thẻ tiêu đề: Bất kỳ tài liệu nào cũng bắt đầu với một tiêu đề. HTML có sáu cấp độ tiêu đề là

,

,

,

,

và

Thẻ đoạn văn: Thẻ

cung cấp cấu trúc văn bản của bạn thành các đoạn khác nhau. Mỗi đoạn văn bản phải ở giữa một thẻ

mở và thẻ đóng

Thẻ ngắt dòng: Khi bạn sử dụng
mọi thứ theo sau sẽ bắt đầu từ dòng tiếp theo. Thẻ này phải có khoảng trắng giữa ký tự br và dấu gạch chéo, nếu không có hiển thị dòng sẽ gặp khó khăn

3.3. Attributes

Nghĩa là thuộc tính phần tử HTML, mỗi thẻ HTML ta có thể xem như một đối tượng. Lúc này đối tượng HTML sẽ có các thuộc tính mô tả cho chúng. 

Mỗi thuộc tính sẽ được đại diện bởi một từ khoá bằng tiếng anh. Có 4 thuộc tính cốt lõi được sử dụng thường xuyên như: 

• Id: có thể được sử dụng để nhận diện bất kỳ yếu tố trong một trang HTML. 
• Title: là một tiêu đề gợi ý cho phần tử thường được hiển thị dưới dạng một tooltip khi con con trỏ đi qua phần tử 
• Class: được sử dụng để kết hợp với một phần tử với một style sheet, 
• Style: Thuộc tính này cho phép bạn chỉ định quy tắc CSS trong phần tử

Ngoài ra còn có 3 thuộc tính quốc tế hoá có sẵn các phần tử XHTML như:

• Dir: chỉ cho các trình duyệt về hướng trong văn bản.
• Lang: cho phép bạn chỉ ra ngôn ngữ chính được sử dụng trong một tài liệu 
• Xml:lang: là sự thay thế cho thuộc tính lang trong XHTNL. 

4. Cấu trúc một bài HTML cơ bản

Giống như một bài văn thông thường sẽ có cấu trúc 3 phần Mở bài – Thân bài – Kết bài. Viết mã lệnh trong tập tin HTML cũng tương tự như vậy. 

 Cấu trúc cơ bản của HTML gồm 3 phần: 

: Phần khai báo chuẩn của html hay xhtml.

: Phần khai báo ban đầu, khai báo về meta, title, css, javascript…

: Phần chứa nội dung của trang web, nơi hiển thị nội dung.

Nội dung của một tập tin HTML phải được bắt đầu bằng thẻ và kết thúc bởi thẻ /

Bên trong cặp thẻ có 2 phần chính: 

Phần mở đầu: Được bắt đầu bằng và kết thúc bởi thẻ , nơi đây chứa tiêu đề và các thẻ khai báo thông tin cho trang web. 

Phần thân bài viết: Được bắt đầu bằng thẻ và kết thúc bởi thẻ dùng để chứa những nội dung mà chúng ta muốn hiển thị trên website 

Ngôn ngữ lập trình HTML5

Hiện nay HTML5 đang được sử dụng phổ biến, hãy làm quen với bố cục này nhé. Do HTML5 có chứa các thẻ ngữ nghĩa, xây dựng bố cục gồm: 

• Thẻ header: Định nghĩa phần đầu của trang web
• Thẻ nav: thanh điều hướng (menu)
• Thẻ section: định nghĩa một phần web
• Thẻ article: định nghĩa là nội dung bài viết độc lập
• Thẻ aside: phần bên cạnh nội dung
• Thẻ footer: Chân trang 

Bố cục của một HTML cơ bản

5. Ưu điểm và nhược điểm của HTML

5.1. Ưu điểm

• HTML được sử dụng rộng rãi 
• Dễ học và dễ sử dụng 
• Sử dụng trên hầu hết mọi trình duyệt 
• Có mã nguồn mở và hoàn toàn miễn phí 
• Markup gọn gàng và thống nhất, thân thiện với người dùng
• Được vận hành bởi W3C
• Dễ dàng tích hợp với các ngôn ngữ backend khác như PHP hay Node.js.

5.2. Nhược điểm

• Chỉ dùng chủ yếu cho các web tĩnh. Nếu bạn muốn các tính năng động, bạn cần sử dụng JavaScript hoặc ngôn ngữ backend thứ ba như PHP 
• Chỉ thực hiện một số logic nhất đinh cho người dùng. Tuy nhiên, hầu hết các trang đều cần được tạo riêng biệt, kể cả khi sử dụng cùng các yếu tố 
• Một số trình duyệt chậm hỗ trợ tính năng mới 
• Khó kiểm soát quá trình thực hiện của trình duyệt. 

6. HTML, CSS, và JavaScript liên quan với nhau như thế nào? 

Nhìn chung, HTML cung cấp cấu trúc cơ bản cho các trang web, được nâng cao và sửa đổi bởi các công nghệ khác như CSS và JavaScripts. 

Còn CSS được sử dụng để kiểm soát bản trình bày, định dạng và bố cục. Chịu trách nhiệm cho việc thiết kế, tạo backgrounds, màu sắc, phân cách và hiệu ứng.

Và JavaScript được sử dụng để kiểm soát hành vi của các phần tử khác. Giúp bạn tạo ra những chức năng động như: Slider, pop-up và thư viện ảnh.

Bạn hãy thử hình dung tệp HTML chứa cấu trúc của chính trang đó như cấu trúc của tòa nhà. Tệp CSS chứa các kiểu dáng của trang, cho phép bạn thay đổi màu sắc, định vị, giống như thiết kế của tòa nhà. Còn tệp JavaScript xác định các yếu tố động và tương tác trên trang, giống như chức năng của toà nhà.

Tóm lại cả 3 loại HTML, CSS và JavaScript đều có mối liên quan mật thiết với nhau. Mặc dù HTML là một ngôn ngữ mạnh mẽ, nó vẫn không thể đầy đủ tính năng để xây dựng một website chuyên nghiệp. Vì về mặt bản chất, HTML chỉ có thể thêm element dạng văn bản và tạo ra giao diện cấu trúc cho nội dung. 

Tuy nhiên, HTML lại có thể tương thích với 2 ngôn ngữ lập trình CSS và JavaScript. Kết hợp cả 3 để tăng trải nghiệm người dùng và thiết lập chức năng cao cấp khác.

Kết luận

Hy vọng bài viết của chúng tôi sẽ giúp những bạn đã có kiến thức tổng hợp lại nội dung về lập trình web HTML cũng như những bạn đang tìm hiểu và yêu thích công việc lập trình trang web nhé.