HTML
HTML là gì?
HTML là viết tắt của cụm từ Hypertext Markup Language (tạm dịch là Ngôn ngữ đánh dấu siêu văn bản). HTML được sử dụng để tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng.
HTML không được coi là ngôn ngữ lập trình, vì nó không thể tạo ra các chức năng “động”, mặc dù nó được coi là một tiêu chuẩn web chính thức.
HTML hoạt động như thế nào?
Tài liệu HTML có đuôi file dạng .html hoặc .htm. Bạn có thể xem chúng bằng cách sử dụng bất kỳ trình duyệt web nào (Google Chrome, Safari, Mozilla Firefox, Microsoft Edge...). Trình duyệt sẽ đọc nội dung file HTML này từ các thẻ bên trong và xuất bản thành nội dung có định dạng sao cho người dùng có thể xem và hiểu được chúng.
Thông thường, một website có thể có nhiều trang (ví dụ như: trang chủ, trang giới thiệu, trang liên hệ...), tất cả các trang đều cần có file HTML tương ứng.
Cấu trúc HTML
Mỗi file HTML được tạo thành bởi các HTML elements được quy định bằng các cặp thẻ (tags).
- Tags: được bao quanh bởi dấu ngoặc nhọn
<>.- Có 2 loại thẻ là thẻ bắt đầu và thẻ kết thúc, ví dụ:
<div>và</div> - Ở giữa thẻ bắt đầu và thẻ kết thúc là nội dung của element.
- Có 2 loại thẻ là thẻ bắt đầu và thẻ kết thúc, ví dụ:
- Elements: HTML elements bao gồm tất cả từ thẻ bắt đầu, nội dung và thẻ kết thúc.
<tagname>Content goes here...</tagname>
- Attributes: cung cấp thông tin bổ sung cho một element
- Attributes có định dạng
attribute="value" - Một số thuộc tính thường dùng là
class,id,src,href…
- Attributes có định dạng
Dưới đây là cấu trúc 1 file HTML đơn giản:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is the first paragraph</p>
<img src="abc.jpg" alt="" />
</body>
</html>
<!DOCTYPE html>: khai báo kiểu dữ liệu hiển thị, xác định rằng tài liệu này là tài liệu HTML5<html>và</html>: cặp thẻ bắt buộc, element cấp cao nhất (root)<head>và</head>: khai báo các thông tin meta của trang web như: tiêu đề trang, charset...<title>và</title>: nằm bên trong thẻ<head>, dùng để khai báo tiêu đề của trang web<body>và</body>: chứa tất cả các nội dung sẽ hiển thị trên trang web<h1>và</h1>: chứa một tiêu đề (heading), có 6 cấp độ heading trong HTML, từ<h1>tới<h6>.<p>và</p>: chứa đoạn văn bản của trang web<img />: chứa hình ảnh của trang web, thẻimgkhông có thẻ đóng
HTML Tags
HTML tags có 2 loại chính: block-level và inline tags.
Block-level tags
- Block-level elements được tạo thành bởi các block-level tags, luôn bắt đầu trên một dòng mới và trình duyệt sẽ tự động thêm một số khoảng trống (margin) trước và sau phần tử.
- Block-level elements luôn chiếm toàn bộ chiều rộng có sẵn
- 3 block-level tags mà mỗi trang HTML cần phải có:
<html>,<head>, và<body> - 2 block-level tags thường dùng nhất:
<div>và<p> - Một số block-level tags mới trong HTML5:
<header>,<footer>,<section>,<article>,<main>,<nav>... - Một số block-level tags khác:
<h1>-><h6>,<ul>,<ol>,<li>,<dl>,<dt>,<dd>,<form>,<table>...
Inline tags
- Inline elements được tạo thành bởi các inline tags, không bắt đầu trên một dòng mới.
- Inline elements chỉ chiếm khoảng chiều rộng cần thiết.
- Inline tags thường dùng nhất:
<span>và<a> - Một số inline tags mới trong HTML5:
<time>,<output>... - Một số inline tags khác:
<b>,<strong>,<small>,<img>,<label>,<input>...
👉 Xem tất cả các Tags HTML
Ưu và nhược điểm của HTML
Ưu điểm
- Nguồn tài nguyên khổng lồ với cộng đồng người dùng lớn.
- Mã nguồn mở và hoàn toàn miễn phí.
- Hỗ trợ tất cả các trình duyệt.
- Dễ học và dễ sử dụng.
- Markup gọn gàng và đồng nhất.
- Được quy định theo một tiêu chuẩn nhất định và được vận hành bởi World Wide Web Consortium (W3C).
- Dễ dàng tích hợp với các ngôn ngữ Backend như PHP, Python…
Nhược điểm
- Chủ yếu được áp dụng cho web tĩnh, nếu muốn tạo tính năng động thì cần sử dụng thêm JavaScript hoặc ngôn ngữ Backend khác.
- Mỗi trang HTML cần được tạo riêng biệt ngay cả khi có nhiều phần tử giống nhau như header và footer.
- Một số trình duyệt còn chậm cập nhật để hỗ trợ tính năng mới của HTML.
- Khó kiểm soát cách trình duyệt đọc và hiển thị file HTML.
- Chỉ áp dụng với cấu trúc nhất định, không có khả năng sáng tạo.
Vai trò của HTML trong trang web
HTML xây dựng các cấu trúc cơ bản trên trang web (bao gồm chia khung sườn, chia bố cục các thành phần trang web). Các phần tử HTML nói cho trình duyệt cách hiển thị nội dung như thế nào, "gắn nhãn" cho các phần nội dung như "đây là tiêu đề", "đây là một đoạn văn", "đây là một liên kết"... và góp phần hỗ trợ khai báo thông tin của các tập tin kỹ thuật số như video, nhạc, hình ảnh...
Dù website được xây dựng trên bất kỳ nền tảng nào, giao tiếp với bất kỳ ngôn ngữ lập trình nào để xử lý dữ liệu thì vẫn phải cần HTML để hiển thị nội dung ra cho người dùng xem.
Mặc dù HTML là một ngôn ngữ mạnh mẽ, nhưng nó vẫn không đủ tính năng để tự mình xây dựng một website chuyên nghiệp và hoàn toàn responsive. Để khắc phục nhược điểm này, HTML phải kết hợp cùng các ngôn ngữ khác để tăng trải nghiệm cho người dùng và tạo ra các chức năng cao cấp hơn:
- CSS: đóng vai trò chính trong việc thiết kế, xây dựng layout, tạo style, màu sắc... và các hiệu ứng cho trang web.
- Javascript: tạo ra các sự kiện tương tác với hành động của người dùng như galleries, sliders, pop-ups…
- Ngôn ngữ lập trình Back-end (như PHP, Java...): xử lý và trao đổi dữ liệu giữa máy chủ và trình duyệt.
Nếu ví website như là một con người thì HTML chính là bộ xương, CSS là quần áo và trang sức, Javascript là hành động và cách ứng xử của người đó.
HTML Semantics
- HTML Semantic Elements mô tả rõ ràng ý nghĩa của HTML Elements cho cả trình duyệt và nhà phát triển (dev).
- Một kỹ năng cần thiết của dev là phải hiểu về ý nghĩa của các html tags và sử dụng chúng cho đúng mục đích.
- Một số semantic tags:
<form>,<table>,<article>,<aside>,<header>,<footer>,<nav>,section... - Một số non-semantic tags:
<div>,<span>...
Ví dụ, tạo một thanh menu:
<!-- Bad -->
<div>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<!-- Good -->
<nav>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</nav>
👉 Tham khảo thêm HTML Semantics: