HTML là gì?
HTML là viết tắt của Hyper Text Markup Language. HTML là ngôn ngữ đánh dấu tiêu chuẩn cho các trang Web. Các phần tử HTML là các khối xây dựng của các trang HTML. Nó cho phép người dùng tạo và cấu trúc các phần, đoạn văn, tiêu đề, liên kết và chuỗi khối cho các trang web và ứng dụng. Các phần tử HTML được biểu thị bằng các thẻ <>.
HTML không phải là ngôn ngữ lập trình, có nghĩa là nó không có khả năng tạo chức năng động. Thay vào đó, nó cho phép tổ chức và định dạng các tài liệu, tương tự như Microsoft Word.
Khi làm việc với HTML, chúng tôi sử dụng các cấu trúc mã đơn giản (thẻ và thuộc tính) để đánh dấu một trang web. Ví dụ: chúng ta có thể tạo một đoạn văn bằng cách đặt văn bản kèm theo trong thẻ bắt đầu <p> và đóng </ p> .
HTML hoạt động như thế nào?
Thông thường, trang web trung bình bao gồm một số trang HTML khác nhau. Ví dụ: trang chủ, về trang, trang liên hệ đều có tài liệu HTML riêng.
Mỗi trang HTML bao gồm một tập hợp các thẻ (còn được gọi là các yếu tố) mà bạn có thể gọi là các khối xây dựng của các trang web. Họ tạo ra một hệ thống phân cấp cấu trúc nội dung thành các phần, đoạn văn, tiêu đề và các khối nội dung khác.
Hầu hết các phần tử HTML có phần mở và phần đóng sử dụng cú pháp <tag> </ tag> .
Dưới đây, bạn có thể thấy một ví dụ mã về cách các thành phần HTML có thể được cấu trúc:
- <div>
- <h1>The Main Heading</h1>
- <h2>A catchy subheading</h2>
- <p>Paragraph one</p>
- <img src=“/” alt=“Image”>
- <p>Paragraph two with a <a href=“https://example.com”>hyperlink</a></p>
- </div>
– Phần tử ngoài cùng là một phân chia đơn giản ( <div> </ div> ) bạn có thể sử dụng để đánh dấu các phần nội dung lớn hơn.
– Nó chứa một tiêu đề ( <h1> </ h1> ), một tiêu đề phụ ( <h2> </ h2> ), hai đoạn văn ( <p> </ p> ) và một hình ảnh ( <img> ).
– Đoạn thứ hai bao gồm một liên kết ( <a> </a> ) với thuộc tính href chứa URL đích.
– Thẻ hình ảnh cũng có hai thuộc tính: src cho đường dẫn hình ảnh và alt cho mô tả hình ảnh.
Tổng quan về các thẻ HTML được sử dụng nhiều nhất
Thẻ HTML có hai loại chính: thẻ cấp khối và thẻ nội tuyến .
Thẻ cấp khối
Ba thẻ cấp độ khối mà mọi tài liệu HTML cần chứa là <html> , <head> và <body> .
– Thẻ <html> </ html> là thành phần cấp cao nhất bao quanh mọi trang HTML.
– Thẻ <head> </ head> chứa thông tin meta như tiêu đề và bảng mã của trang.
Cuối cùng, thẻ <body> </ body> chứa tất cả nội dung xuất hiện trên trang.
- <html>
- <head>
- <!– META INFORMATION –>
- </head>
- <body>
- <!– PAGE CONTENT –>
- </body>
- </html>
– Tiêu đề có 6 cấp độ trong HTML. Chúng nằm trong khoảng từ <h1> </ h1> đến <h6> </ h6>, trong đó h1 là tiêu đề cấp cao nhất và h6 là tiêu đề thấp nhất. Các đoạn được bao quanh bởi <p> </ p> , trong khi các chuỗi khối sử dụng thẻ <blockquote> </ blockquote> .
– Các bộ phận là các phần nội dung lớn hơn thường chứa một số đoạn, hình ảnh, đôi khi là chuỗi khối và các yếu tố nhỏ hơn khác. Chúng tôi có thể đánh dấu chúng bằng cách sử dụng thẻ <div> </ div> . Một phần tử div có thể chứa một thẻ div khác bên trong nó.
– Bạn cũng có thể sử dụng thẻ <ol> </ ol> cho danh sách được sắp xếp và <ul> </ ul> cho những người không có thứ tự. Các mục danh sách riêng lẻ phải được đính kèm bởi thẻ <li> </ li> . Ví dụ: đây là cách một danh sách không có thứ tự cơ bản trông như thế nào trong HTML:
- <ul>
- <li>List item 1</li>
- <li>List item 2</li>
- <li>List item 3</li>
- </ul>
Thẻ nội tuyến
Nhiều thẻ nội tuyến được sử dụng để định dạng văn bản. Ví dụ: thẻ <strong> </ strong> sẽ hiển thị phần tử được in đậm, trong khi thẻ <em> </ em> sẽ hiển thị bằng chữ in nghiêng .
Các siêu liên kết cũng là các thành phần nội tuyến yêu cầu các thẻ <a> </a> và thuộc tính href để chỉ ra đích đến của liên kết:
1. <a href = “https://example.com/”> Click me! </a>
Hình ảnh là yếu tố nội tuyến quá. Bạn có thể thêm một bằng cách sử dụng <img> mà không cần bất kỳ thẻ đóng nào. Nhưng bạn cũng sẽ cần sử dụng thuộc tính src để chỉ định đường dẫn hình ảnh, ví dụ:
1. <img src=“/images/example.jpg” alt=“Example image”>
Ưu và nhược điểm của HTML
Giống như hầu hết mọi thứ, HTML đi kèm với một số điểm mạnh và hạn chế:
Ưu điểm:
- Một ngôn ngữ được sử dụng rộng rãi với nhiều tài nguyên và một cộng đồng lớn hỗ trợ.
- Chạy trong mọi trình duyệt web.
- Cần thời gian học tập.
- Nguồn mở và hoàn toàn miễn phí.
- Đánh dấu nhất quán.
- Các tiêu chuẩn web chính thức được duy trì bởi World Wide Web Consortium (W3C).
- Dễ dàng tích hợp với các ngôn ngữ phụ trợ như PHP và Node.js.
Nhược điểm:
- Chủ yếu được sử dụng cho các trang web tĩnh. Đối với chức năng động, bạn có thể cần sử dụng JavaScript hoặc ngôn ngữ phụ trợ như PHP.
- Nó không cho phép người dùng thực hiện logic. Do đó, tất cả các trang web cần phải được tạo riêng, ngay cả khi chúng sử dụng cùng các yếu tố, ví dụ như tiêu đề và chân trang.
- Một số trình duyệt áp dụng các tính năng mới từ từ.
- Hành vi trình duyệt đôi khi khó dự đoán (ví dụ: các trình duyệt cũ hơn không luôn hiển thị các thẻ mới hơn).
