HTML có thể là một trong những từ khoá đầu tiên mà bất kỳ ai bước chân vào lĩnh vực phát triển web sẽ tiếp xúc. Nhưng đừng để sự đơn giản của từ khoá này đánh lừa bạn. HTML không chỉ là một ngôn ngữ mà nó chính là nền móng của mọi thứ bạn thấy trên internet ngày nay. Từ các trang web đơn giản đến các ứng dụng web phức tạp, tất cả đều bắt đầu từ HTML.
1. HTML là gì?
HTML (HyperText Markup Language) là ngôn ngữ đánh dấu (không phải ngôn ngữ lập trình) được sử dụng để tạo cấu trúc và định dạng nội dung trên trang web. Nó sử dụng các thẻ (tags) để mô tả các phần tử như đoạn văn, tiêu đề, liên kết, hình ảnh, ... giúp trình duyệt hiểu và hiển thị trang web theo cách mà người phát triển mong muốn.
Từ Markup Language trong HTML được hiểu là quá trình bạn dùng một ngôn ngữ nào đó để chú thích tài liệu, giúp máy tính hiểu và hiển thị văn bản đó theo một cách cụ thể. HyperText không chỉ là văn bản thông thường mà còn bao gồm các liên kết (hyper link) cho phép người dùng nhấp vào để chuyển đến các phần khác của cùng trang hoặc các trang web khác.
Ví dụ: Khi bạn vào một trang web và thấy một tiêu đề lớn như "Chào mừng đến với trang của chúng tôi", HTML đã được sử dụng để tạo ra tiêu đề đó.
<h1>Chào mừng đến với trang của chúng tôi</h1>
Thẻ <h1> chỉ dẫn cho trình duyệt rằng dòng văn bản này là một tiêu đề (heading 1) và nó cần được hiển thị với kích thước lớn hơn và nổi bật hơn các văn bản khác.
2. Cấu trúc file HTML
Để tạo file HTML, bạn có thể sử dụng bất kỳ trình soạn thảo văn bản nào như Notepad (trên Windows), TextEdit (trên macOS), hoặc một trình soạn thảo mã nguồn: Visual Studio Code, Sublime Text, hoặc Atom.
Dưới đây là ví dụ về cấu trúc của file HTML cơ bản:
!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first HTML page.</p>
<a href="https://example.com">Visit Example.com</a>
</body>
</html><!DOCTYPE html>: Khai báo loại tài liệu, giúp trình duyệt hiểu rằng bạn đang sử dụng HTML5.<html>: Thẻ mở đầu cho tài liệu HTML, tất cả nội dung trên một trang web đều được viết giữa các thẻ<html>và</html>. Thẻ<html>được sử dụng để thông báo cho trình duyệt biết rằng đây là một tài liệu HTML<head>: Chứa các thẻ con như<meta>,<title>,<link>,<style>, và<script>. Những thẻ này cung cấp thông tin về trang web như mô tả trang, từ khóa cho công cụ tìm kiếm, và tác giả của tài liệu, chèn các mã CSS và JavaScript...<title>: Xác định tiêu đề của trang, hiển thị trên thanh tiêu đề của trình duyệt.<body>: Chứa nội dung thực sự của trang, như văn bản, hình ảnh, liên kết, v.v.<h1>,<p>,<a>: Thẻ tiêu đề (có 6 cấp bật tiêu đề từh1đếnh6), đoạn văn, và liên kết.
Sau khi viết mã HTML, bạn lưu file này với phần mở rộng .html. Ví dụ: myfirstpage.html. Sau khi đã lưu xong, bạn có thể mở nó bằng bất kỳ trình duyệt web nào (Chrome, Firefox, Edge, Safari).
3. Các Phần tử HTML
3.1 Khái niệm
HTML element (phần tử) đại diện cho một phần nội dung hoặc một tính năng cụ thể trên trang web. Một phần tử HTML thường bao gồm ba phần chính:
- Thẻ mở (Opening Tag): Bắt đầu một phần tử và chỉ định loại phần tử, ví dụ như
<p>đại diện cho đoạn văn,<h1>cho tiêu đề chính, hoặc<a>cho liên kết. - Nội dung (Content): Phần thông tin bên trong phần tử, có thể là văn bản, hình ảnh, hoặc các phần tử HTML khác. Ví dụ, trong một phần tử đoạn văn, nội dung có thể là văn bản mà bạn muốn hiển thị.
- Thẻ đóng (Closing Tag): Kết thúc phần tử, có cùng tên với thẻ mở nhưng có thêm dấu gạch chéo
/, chẳng hạn như</p>,</h1>, hoặc</a>.
<div>
<h1>Tiêu đề chính</h1>
<p>Đây là một đoạn văn, <a href="https://example.com">đây là một liên kết</a> trong đoạn văn.</p>
</div>
Có một số phần tử HTML không yêu cầu thẻ đóng và được gọi là self-closing element hay void element. Dưới đây là một vài ví dụ:
- Thẻ
<img>: Sử dụng để chèn hình ảnh vào trang web. - Thẻ
<br>: Sử dụng để ngắt dòng, tạo ra một dòng mới trong văn bản. - Thẻ
<hr>: Sử dụng để chèn một đường kẻ ngang trên trang web. - Thẻ
<input>: Sử dụng để tạo các trường nhập liệu trong biểu mẫu.
3.2 Phân loại Phần tử HTML
Phần tử HTML được chia thành các nhóm chính như: phần tử định dạng văn bản, đa phương tiện, danh sách, biểu mẫu, ngữ nghĩa, ... Mỗi nhóm phục vụ một mục đích cụ thể trong việc xây dựng và tối ưu hóa trang web.
- Text Elements: Bao gồm các thẻ từ
<h1>đến<h6>để tạo tiêu đề,<strong>cho chữ đậm,<em>cho chữ nghiêng, và<small>cho văn bản nhỏ. Những phần tử này giúp định dạng văn bản và cải thiện khả năng truy cập cũng như SEO. - Multimedia Elements: Cho phép nhúng các nội dung media như hình ảnh (
<img>), video (<video>), và âm thanh (<audio>). - List Elements: Giúp tạo các danh sách có thứ tự (
<ol>) và không có thứ tự (<ul>), các phần tử bên trong danh sách được định nghĩa bằng thẻ<li>. - Form Elements: Là thành phần quan trọng của các trang web tương tác, bao gồm các trường văn bản (
<input>), vùng văn bản (<textarea>), nút bấm (<button>), checkboxes , radio buttons, ... Chúng giúp tạo ra các biểu mẫu phức tạp để thu thập dữ liệu từ người dùng. - Semantic Elements (Phần tử ngữ nghĩa): HTML5 giới thiệu các phần tử ngữ nghĩa như
<header>,<footer>,<article>, và<section>, giúp cải thiện tính rõ ràng và hỗ trợ nhiều hơn cho SEO của trang web so với các phần tử không ngữ nghĩa như<div>và<span>. - Meta-Elements and Special Characters: Bao gồm các thẻ như
<head>,<title>, và<link>, không hiển thị trực quan nhưng cung cấp thông tin quan trọng cho trình duyệt và công cụ tìm kiếm. HTML5 hỗ trợ các ký tự đặc biệt thông qua các character entities. Ví dụ: Để hiển thị dấu&, bạn sử dụng&, để hiển thị dấu<, bạn sử dụng<.
4. Đặc điểm nổi bật của HTML5
4.1 Thẻ Ngữ Nghĩa (Semantic Tags)
HTML5 đã thêm vào các thẻ ngữ nghĩa mới, các thẻ này giúp phân chia nội dung của trang web một cách rõ ràng hơn, cả về mặt ngữ nghĩa và cấu trúc.
<header>: Đại diện cho một vùng chứa nội dung giới thiệu hoặc một tập hợp các liên kết điều hướng. Thường nằm ở đầu trang hoặc đầu một phần nội dung.<nav>: Định nghĩa một tập hợp các liên kết điều hướng, thường là các menu hoặc thanh điều hướng chính của trang web.<main>: Xác định nội dung chính của tài liệu, phần này là duy nhất và quan trọng nhất trong toàn bộ trang web.<article>: Đại diện cho một nội dung độc lập có thể được phân phối hoặc sao chép, như một bài viết, blog post, hoặc một mục tin tức.<section>: Biểu thị một phần độc lập của tài liệu, thường có tiêu đề riêng và mang ý nghĩa như một chương hoặc phần của trang.<aside>: Chứa nội dung có liên quan một cách gián tiếp đến nội dung chính, chẳng hạn như sidebar hoặc các ghi chú, quảng cáo.<footer>: Chứa các thông tin về tác giả, bản quyền, liên kết liên quan hoặc điều hướng.
Các công cụ tìm kiếm sử dụng thuật toán để phân tích trang web. Khi trang web sử dụng thẻ ngữ nghĩa, chẳng hạn như <article>, <section>, <header>, <footer>, và <nav>, nó giúp công cụ tìm kiếm hiểu rõ hơn về mục đích của từng phần nội dung. Điều này có thể dẫn đến việc cải thiện thứ hạng trang web trong kết quả tìm kiếm (SEO), vì nội dung được tổ chức tốt thường được coi là có giá trị hơn.
Ví dụ, khi bạn sử dụng thẻ <article> cho một bài viết, công cụ tìm kiếm sẽ nhận biết rằng đây là nội dung chính và có thể ưu tiên hiển thị nó trong kết quả tìm kiếm.
4.2 Hỗ trợ đa phương tiện (Multimedia Elements)
HTML5 cho phép chèn trực tiếp video và âm thanh thông qua các thẻ <video> và <audio> vào trang web, loại bỏ sự phụ thuộc vào các plugin bên ngoài như Adobe Flash.
<video controls>
<source src="video.mp4" type="video/mp4">
Trình duyệt của bạn không hỗ trợ video HTML5.
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Trình duyệt của bạn không hỗ trợ audio HTML5.
</audio>
4.3 Hỗ Trợ Đồ Họa (Graphics Support)
Thẻ <canvas> cho phép vẽ đồ họa 2D và 3D trực tiếp trong trình duyệt, không cần đến các công nghệ bên ngoài như Flash.
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
4.4 Web Storage API
HTML5 giới thiệu Web Storage với hai loại: localStorage và sessionStorage. Chúng cho phép lưu trữ dữ liệu trên máy người dùng một cách bền vững (persistent storage). Ví dụ: Lưu trạng thái của giao diện người dùng (UI), các cài đặt của ứng dụng mà người dùng không cần thiết phải nhập lại mỗi khi truy cập lại trang web.
4.5 API Geolocation
HTML5 tích hợp API Geolocation, cho phép các ứng dụng web xác định vị trí địa lý của người dùng nếu họ cho phép. Một ứng dụng bản đồ có thể sử dụng API này để xác định vị trí hiện tại của người dùng và hiển thị các địa điểm gần đó.
4.6 API Web Workers
Web Workers cho phép thực hiện các tác vụ tính toán phức tạp trong background mà không làm ảnh hưởng đến hiệu suất của giao diện người dùng. Điều này rất hữu ích cho các ứng dụng cần xử lý dữ liệu lớn mà không làm chậm trang.
5. Kết luận
HTML đóng vai trò quan trọng trong việc định nghĩa cấu trúc và trình bày nội dung trên internet. Với sự ra đời của HTML5, ngôn ngữ này đã được cải tiến mạnh mẽ. Những cải tiến này không chỉ giúp xây dựng các trang web tương tác, hiện đại và thân thiện với người dùng hơn, mà còn tối ưu hóa hiệu suất và bảo mật.
Các bài viết liên quan tại Blog 200Lab:
Bài viết liên quan
WebAssembly là gì? Khi nào nên sử dụng WebAssembly
Oct 19, 2024 • 8 min read
Bun là gì? Lựa chọn Javascript Runtime mới cho các Developer
Oct 15, 2024 • 6 min read
Deno là gì? So sánh Deno 2, Bun và Nodejs
Oct 14, 2024 • 9 min read
Storybook là gì? Tìm hiểu công cụ Quản lý UI Component
Oct 12, 2024 • 10 min read
DOM là gì? Kiến thức nền tảng cho Web Developer
Oct 10, 2024 • 5 min read
State Management trong React: Context API, Redux, Recoil, React Query, Zustand
Oct 10, 2024 • 15 min read