HTML là gì?
Danh mục bài viết
Để tạo các trang web được đánh bóng và hoạt động tốt, bạn sẽ cần CSS và JavaScript. Tuy nhiên, để làm cho chúng hoạt động như dự định, trước tiên bạn cần hiểu HTML là gì. Giống như một ngôi nhà có nền tảng, một trang web có cơ sở bằng HTML.
Câu trả lời cho những gì HTML đại diện cho rất đơn giản: Ngôn ngữ đánh dấu siêu văn bản. Đây là một hệ thống cho phép bạn xác định cấu trúc nội dung trong trang web của mình bằng cách sử dụng các yếu tố được bọc trong các thẻ được hỗ trợ phổ biến.
Từng phiên bản của HTML
HTML 1 được tạo ra bởi một nhà khoa học Cern Tim Berners-Lee. Mục tiêu ban đầu của anh là một hệ thống siêu văn bản dựa trên Internet cho phép chia sẻ và sử dụng các tài liệu trong các máy tính khác nhau. Được giới thiệu vào năm 1991, HTML 1 chỉ có 18 thẻ, hầu hết chúng dựa trên Ngôn ngữ đánh dấu tổng quát hóa tiêu chuẩn (SGML). HTML 2 đã được trình bày vào năm 1995 và có thêm một vài tính năng.
Bản nháp của HTML 3 đã bị hủy do triển khai chậm các thẻ mới được tạo. Do đó, World Wide Web Consortium đặt ra để chuẩn hóa HTML. Năm 1997, HTML 3.2 được phát hành đã trở thành một tiêu chuẩn vào thời điểm đó.
HTML 4 là một bước tiến lớn, vì nó tách biệt kiểu dáng với mã hóa, để lại cái cũ cho CSS. Một phiên bản sửa đổi có tên HTML 4.01 xuất hiện vào năm 1999, sửa các lỗi nhỏ được tìm thấy trong HTML 4.0 và giới thiệu một vài tính năng tiện dụng.
HTML 5 là HTML như chúng ta biết ngày nay.
HTML5 là gì?
HTML5 được phát hành lần đầu tiên vào năm 2008, mặc dù quá trình đặc tả kỹ thuật chưa hoàn thành cho đến năm 2014. Cho đến nay, ngôn ngữ đánh dấu này là nền tảng của mọi trang web mới.
Khi so sánh HTML với HTML5, sự khác biệt lớn đầu tiên là mức độ hỗ trợ. Các trang web được tạo bằng HTML5 cũng có thể được sử dụng trên tất cả các trình duyệt chính và các nền tảng khác nhau. Điều này rất quan trọng trong thế kỷ XXI khi phần lớn người dùng truy cập Web thông qua các thiết bị di động.
Các thẻ ngữ nghĩa được trình bày trong HTML5 giúp ích rất nhiều cho việc tối ưu hóa công cụ tìm kiếm (SEO). Mục đích của họ là cho phép trình duyệt hiểu cấu trúc của trang. Nó cũng cải thiện khả năng truy cập trong các thiết bị di động và đơn giản hóa công việc cho các công nghệ hỗ trợ (ví dụ: trình đọc màn hình).
HTML5 cũng tiện dụng khi bạn cần tạo nội dung động và hấp dẫn, vì nó cho phép bạn bao gồm video và âm thanh mà không cần dựa vào Adobe Flash.
Tài liệu HTML đơn giản
Người mới bắt đầu có thể nghĩ: HTML có phải là ngôn ngữ lập trình không? Nó thực sự không – nhớ rằng, HTML là viết tắt của ngôn ngữ đánh dấu siêu văn bản. Do đó, làm việc với HTML là mã hóa, không phải lập trình.
Tài liệu HTML đơn giản nhất bao gồm một vài dòng mã:
<!DOCTYPE html>
<html>
<head>
<title>Name of the website</title>
</head>
<body>
<h1>Heading for the content below</h1>
<p>Text text text</p>
</body>
</html>Hãy cùng tìm hiểu kĩ hơn ở những phần sau:
Khai báo <!DOCTYPE html>
Khai báo thông báo cho trình duyệt về loại tài liệu để tải trang thành công. Vì HTML5 không phân biệt chữ hoa chữ thường, tất cả các ví dụ được liệt kê bên dưới sẽ hoạt động giống nhau:
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>Những thành phần HTML
Phần tử <html> được sử dụng để xác định tài liệu HTML để trình duyệt web có thể nhận ra và hiển thị nó. Bao gồm tất cả các yếu tố trang khác bên trong nó:
<!DOCTYPE html>
<html>
<head>
<title>Name of the website</title>
</head>
<body>
<h1>Heading for the content below</h1>
<p>Text text text</p>
</body>
</html>Phần tử <head> chứa tất cả thông tin về tài liệu HTML là gì. Bạn có thể thêm tiêu đề cho trang web, một số thông tin meta cần thiết, kiểu dáng và hơn thế nữa:
<head>
<title>Document title</title>
</head>Phần tử <title> mô tả tiêu đề của tài liệu thông báo cho người đọc về nội dung của trang web:
<title>Page Title</title><body> làm cho nội dung hiển thị trên các trang web: không có nó, trang web của bạn sẽ không hoạt động. Mọi yếu tố cần được hiển thị trong một trang web đều thuộc về phần này:
<body>
<h1>Hello World</h1>
<p>This is the main part of your document.</p>
</body>Các phần tử <h1> - <h6> chỉ định các tiêu đề. Một tiêu đề tương tự như một tiêu đề, nhưng nó có tầm quan trọng thấp hơn vì nó đặt tên cho các phần của tài liệu, không phải toàn bộ trang web. Sử dụng chúng để chỉ ra tiêu đề nội dung và tên.
<h1>Heading text - Level 1. Most Important Heading</h1>
<h2>Heading text - Level 2</h2>
<h3>Heading text - Level 3</h3>
<h4>Heading text - Level 4</h4>
<h5>Heading text - Level 5</h5>
<h6>Heading text - Level 6. Least Important Heading</h6>Phần tử <p> xác định một đoạn văn bản. Không sử dụng nó để tạo tiêu đề, tiêu đề hoặc các phần văn bản quan trọng khác:
<p>This is a paragraph.</p>
<p>This is also a paragraph.</p>
<p>This is yet another paragraph.</p><div> được gọi là bộ phận. Đây là một yếu tố cấp khối, được áp dụng để chia một trang thành các phần thân thiện với người dùng hơn:
<div style="background-color: #333; color: white; padding: 10px;">
<h3>This header has same color as a div</h3>
<p>This paragraph should have same color as div</p>
</div>Những cách để viết HTML
- Bạn không cần bất kỳ phần mềm cụ thể nào để viết HTML: mọi trình soạn thảo văn bản sẽ làm. Tuy nhiên, một trình soạn thảo HTML tốt (như Atom hoặc Notepad ++) có thể cung cấp nhiều chức năng hơn và thường thuận tiện hơn khi sử dụng.
- Khi bạn viết mã HTML, luôn luôn nên kiểm tra nó bằng trình xác nhận HTML. World Wide Web Consortium cung cấp miễn phí.
- Để cải thiện trải nghiệm người dùng, hãy cố gắng giữ nội dung trong màn hình đầu tiên (một nội dung mà người dùng nhìn thấy mà không phải cuộn xuống) không có các yếu tố cần tải một chút (ví dụ: hình ảnh có độ phân giải cực cao).
- Hãy thử nghiệm, nhưng đừng quên xóa mã không sử dụng (như định dạng không cần thiết, khoảng trắng, mở rộng, v.v.) sau khi bạn hoàn tất. Mã càng ngắn, trình duyệt càng dễ tải.