HTML là gì? 03 phút hiểu về HyperText Markup Language

21/09/2023

HTML là gì là thắc mắc chung của nhiều người khi tìm hiểu về công nghệ thông tin, đặc biêt là những người làm lập trình web. Ngôn ngữ HTML được sử dụng để xây dựng và sắp xếp các thành phần có trong website. Cùng tìm hiểu rõ hơn về ngôn ngữ đánh dấu siêu văn bản trong bài viết sau.

HTML là gì

HTML (Hypertext Markup Language) nghĩa là ngôn ngữ đánh dấu siêu văn bản, được dùng để thiết lập và bố cục các thành phần trong trang web, ứng dụng. HTML có tác dụng phân chia các đoạn văn, heading, titles, blockquotoes.
Một tài liệu HTML được hành thành bởi các phần tử HTML, hay còn gọi là HTML Elements được quy định bằng các cặp thẻ tag và attributes. Các cặp thẻ này được khai báo thành một cặp gồm thẻ mở và thẻ đóng, được viết dưới dạng nằm trong dấu ngoặc nhọn. Chẳng hạn, bạn có thể đặt một đoạn văn băng cách đặt văn bản vào cặp tag <p> và </p>.

Ngôn ngữ HTML được sử dụng phổ biến trong lập trình web

Các tag thông dụng của HTML

Bên cạnh việc hiểu HTML là gì, HTML sử dụng các thẻ và phần tử được xác định trước, giúp trình duyệt hiển thị nội dung một cách chính xác. Khi sử dụng ngôn ngữ HTML, cần lưu ý đến các thẻ đóng. Nếu không sử dụng thẻ đong, trình duyệt sẽ áp dụng hiệu ứng của thẻ mở cho đến hết trang. Các tag thông dụng của HTML bao gồm block-level tags và inline tags.

Block-level tags

Mỗi trang HTML có 3 block level tags cần những tag như <html>, <head>, và <body>. Mỗi tag mang ý nghĩa và tác dụng khác nhau:

Tag <html></html> là element cao nhất, được sử dụng để đóng gói mỗi trang HTML.
Tag <head></head> là tag chứa các thông tin meta như là tiêu đề trang và charset.
Tag <body></body> tag dùng để đóng gói tất cả nội dung sẽ hiện trên trang.

Inline tags

Trong HTML, inline tags được sử dụng để định dạng, tạo bố cục cho nội dung bên trong của block-level tags. Chẳng hạn, tag <strong></strong> sẽ định dạng chữ in đậm, trong khi đó tag <em></em> sẽ định dạng chữ in nghiêng.

Hyperlinks cũng là yếu tố element mà cần tag <a></a> và attributes href để xác định link cụ thể: <a href="https://cmccloud.vn//">Click me!</a>

Ảnh cũng là element inline. Bạn có thể thêm ảnh bằng cách sử dụng tag <img> mà không cần tag đóng. Tuy nhiên, bạn cũng cần sử dụng attribute src để xác định nguồn ảnh, ví dụ như: <img src="/images/example.jpg" alt="Example image">

Cấu trúc của HTML

Cấu trúc cơ bản của một trang HTML được trình bài trong ảnh dưới đây, bao gồm các khối xây dựng thiết yếu (building-block elements) giúp tạo dựng trang web. Các buidlidng block bao gồm: khai báo loại tài liệu, HTML, title, phần nội dung.

<!DOCTYPE html> – Về mặt kỹ thuật, đây không được coi là một tag. <!DOCTYPE html> là khai báo loại tài liệu, xác thực một tài liệu là tài liệu HTML. Đặc trưng của loại khai báo này không phân biệt chữ hoa và chữ thường.

<html> – Đây được gọi là phần tử gốc HTML, chứa tất car các yếu tố elements khác.

<head> – Thẻ head chứa các phần tử “hậu trường: cho một trang web. Các elements trong <head> sẽ không hiển thị ở người dùng của trng web. Các phần tử HTML được sử dụng trong <head> bao gồm:

<style> – Thẻ HTML này cho phép bạn chèn kiểu dáng vào trang web, giúp chúng trở nên thu hút hơn khi hiển thị với sự trợ giúp của CSS.
<title> – Title, hay tiêu đều là nội dung được hiển thị trên đầu trình duyệt khi bạn truy cập một trang web.
<base> – Thẻ này chỉ định URL cơ sở cho tất các các URL tương đối trong tài liệu.
<noscript> – Xác định một phần HTML được chèn khi tập lệnh đã bị tắt trong trình duyệt của người dùng.
<script> – Thẻ này được sử dụng để thêm chức năng vào trang web với sự trợ giúp của JavaScript.
<meta> – Thẻ này bao gồm siêu dữ liệu trang web phải được tải mỗi khi website được truy cập. mỗi khi trang web được truy cập. Ví dụ: bộ ký tự siêu dữ liệu cho phép bạn sử dụng mã hóa UTF-8 tiêu chuẩn trong trang web của mình. Điều này cho phép người dùng xem trang web của bạn bằng ngôn ngữ họ chọn. Thẻ này là loại thẻ tự đóng.
<link> – Thẻ link được sử dụng để liên kết HTML, CSS và Java Script với nhau. Thẻ này có khả năng đóng tự động.

<body> – Thẻ body được sử dụng để chứa tất cả nội dung hiển thị của trang web. Nói cách khác, nội dung thuộc thẻ body chính là nội dung sẽ hiển thị ở giao diện người dùng khi truy cập web.

Một tài liệu HTML có thể được tạo bằng bất kỳ trình soạn thảo văn bản nào. Tệp văn bản sẽ được lưu bằng .html hoặc .htm. Sau khi được lưu dưới dạng tài liệu HTML, tệp có thể được mở dưới dạng trang web trong trình duyệt.

Lưu ý: Các trình soạn thảo văn bản cơ bản/tích hợp là Notepad trên hệ điều hành Windows và TextEdit trên Mac. Các trình soạn thảo văn bản cơ bản đáp ứng đủ nhu cầu của bạn khi mới bắt đầu. Bên cạnh đó, có nhiều nhiều trình soạn thảo văn bản với tính năng đa dạng, giúp bạn thực hiện các chức năng và tính linh hoạt cao hơn.

Mối quan hệ của HTML, CSS và Javascript

Ngôn ngữ HTML được sử dụng để thêm các thành phần văn bản và tạo cấu trúc nội dung. Tuy nhiên, để xây dựng một trang web chuyên nghiệp và đáp ứng đầy đủ, chỉ sử dụng HTML là chưa đủ. HTML cần sự trợ giúp của Cascading Style Sheets (CSS) và JavaScript để tạo ra phần lớn nội dung trang web.

CSS chịu trách nhiệm về các background, màu sắc, bố cục, khoảng cách giữa các thành phần và các hình động. Mặt khác, JavaScript bổ úng thêm các chức năng chuyển động như thanh trượt, cửa sổ bật lên và thư viện ảnh. Ba ngôn ngữ này được xem là nền tảng phát triển của front-end.

Câu hỏi FAQ về HTML

Ngôn ngữ HTML có dễ học không?

Ngôn ngữ HTML là ngôn ngữ lập trình front-end dễ dàng nhất bạn có thể học. HTML có nhiều tài nguyên và công cụ trực tuyến miễn phí có sẵn, giúp bạn khởi đầu dễ dàng và học nhanh chóng. HTML cũng được đánh giá là ngôn ngữ có thể học khá nhanh ngay cả với người mới.

HTML là loại ngôn ngữ nào?

HTML là loại ngôn ngữ mã hóa đánh dấu. Nó sắp xếp dữ liệu đã được phân loại bằng thẻ HTML, giúp xác định và mô tả mục đích của dữ liệu đó về trang web. Một cách cơ bản, HTML cho biết trình duyệt web biết các phần tử trang khác nhau là gì, chúng nên đi tới đâu khi tải trang.

HTML được sử dụng trong trường hợp nào?

Ngôn ngữ đánh dấu siêu văn bản hay HTML là ngôn ngữ lập trình được sử dụng để mô tả cấu trúc cho các trang web. HTML cho phép tạo các trang tĩnh với văn bản, tiêu đề, bảng, danh sách, hình ảnh, liên kết,...

Cách nâng cao kiến thức về HTML

Tìm hiểu về HTML là gì là bước quan trọng đầu tiên nếu bạn đang quan tâm đến phát triển website. Hiện nay, có rất nhiều khóa học trực tuyến về lập trình, nhưng dưới đây là ba cơ sở sở dữ liệu tốt nhất giúp bạn định hướng và có những hướng dẫn chi tiết về HTML:

W3Schools sở hữu các tài nguyên, ví dụ và bài tập giúp học HTML cơ bản miễn phí. Ngoài ra còn có một hướng dẫn HTML kèm riêng giá 95 USD và cung cấp chứng chỉ chính thức.
Codecademy cung cấp các khóa học miễn phí về HTML cùng các hướng dẫn tương tác. Giao diện Codecademy chia đôi màn hình, tự động hiển thị kết quả mã hóa của bạn trên HTML. Bạn có thể mua nội dung độc quyền của Codecademy với giá 19,99 USD/tháng.
Coursera cung cấp nhiều khóa học khác nhau với kiến thức được giải thích cụ thể, đi kèm các ví dụ thực tế. Giá đăng ký là 49 USD/tháng, tuy nhiên bạn có thể bắt đầu dùng thử miễn phí 7 ngày trước khi mua gói.

Trên đây là những thông tin cơ bản về ngôn ngữ HTML, giải thích HTML là gì cũng như các thành phần có trong ngôn ngữ đánh dấu siêu văn bản. Đây là một trong những ngôn ngữ lập trình phổ biến nhất, dễ học và có tính ứng dụng cao trong lập trình ngày nay.

CMC Cloud - Giải pháp Điện toán đám mây Toàn diện & Linh hoạt nhất. Cho phép tùy biến sử dụng và quản trị 25+ dịch vụ