HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản được sử dụng để định dạng và hiển thị nội dung trên các trang web. Các thẻ HTML cơ bản được sử dụng để xác định các thành phần của một trang web, chẳng hạn như tiêu đề, đoạn văn, hình ảnh, bảng, v.v.
Ở bài viết trước, Boomco Blog đã giới thiệu tới các bạn 5 nhóm thẻ cơ bản đầu tiên, vì vậy trong bài viết này, chúng ta sẽ cùng khám phá các thẻ thuộc các nhóm khác như: Thẻ hình ảnh, thẻ lập trình,…
Thẻ HTML Image
Các thẻ hình ảnh cơ bản bao gồm:
<img>: Thẻ này được sử dụng để nhúng hình ảnh vào trang web…<map>: Cho phép tạo hình ảnh bản đồ, nơi bạn có thể định nghĩa các khu vực có liên kết.<area>: Định nghĩa một khu vực trong bản đồ hình ảnh được tạo bởi thẻ<map>.<canvas>: Tạo một khu vực trên trang web mà bạn có thể sử dụng JavaScript để vẽ đồ họa bitmap.<figcaption>: Cung cấp một chú thích cho nội dung của thẻ<figure>.<figure>: Dùng để đánh dấu nội dung tự chứa, thường là một hình ảnh, biểu đồ, hoặc mã nguồn, kèm theo chú thích từ thẻ<figcaption>.<picture>: Cho phép các nhà phát triển định nghĩa một container cho một danh sách các hình ảnh có thể sử dụng cho các kích cỡ và độ phân giải màn hình khác nhau.<svg>: Dùng để định nghĩa đồ họa vector có thể mở rộng.
Thẻ HTML Frame
Các thẻ frame cơ bản bao gồm:
<frameset>: Định nghĩa một bộ khung cho các<frame>. Thẻ này thay thế cho thẻ<body>khi muốn sử dụng các frames.<frame>: Định nghĩa từng khu vực hoặc “khung” riêng biệt trong<frameset>. Mỗi<frame>có thể chứa một trang web khác nhau.<noframes>: Cung cấp một nội dung thay thế cho các trình duyệt không hỗ trợ frames. Nội dung này thường bao gồm liên kết hoặc thông tin cơ bản về trang web.<iframe>: Tạo một khung nội tuyến, cho phép nhúng một trang HTML khác bên trong một trang hiện tại. Khác với<frame>,<iframe>có thể được sử dụng trong<body>và vẫn được hỗ trợ trong HTML5. Chú ý: Không nên sử dụng<frameset>và<frame>trong các trang web hiện đại. Thay vào đó, hãy sử dụng<iframe>nếu bạn cần nhúng một trang hoặc tài liệu bên trong một trang khác.
Thẻ HTML Forms & Input
Các thẻ form và input cơ bản bao gồm:
<form>: Thẻ này được sử dụng để tạo một form HTML cho việc nhập dữ liệu từ người dùng. Forms có thể chứa các phần tử input như text fields, checkboxes, radio-buttons, submit buttons và nhiều hơn nữa.<input>: Là một thẻ rất linh hoạt và có thể được cấu hình để tạo ra nhiều loại fields input khác nhau, như text, password, submit button, radio button, checkbox, v.v.<textarea>: Được sử dụng để tạo một khu vực nhập văn bản đa dòng, cho phép người dùng nhập văn bản tự do.<button>: Tạo một nút bấm. Khác với<input type="button">, thẻ<button>có thể chứa nội dung phong phú như hình ảnh hoặc định dạng text.<select>: Tạo một drop-down list. Thẻ này thường được sử dụng cùng với thẻ<option>để liệt kê các lựa chọn có sẵn.<option>: Định nghĩa một lựa chọn trong một drop-down list được tạo bởi thẻ<select>.<optgroup>: Cho phép nhóm các lựa chọn liên quan đến nhau trong một drop-down list, giúp tổ chức tốt hơn và dễ sử dụng hơn.<label>: Cung cấp một nhãn cho các phần tử input, giúp tăng khả năng truy cập và kết nối nhãn với phần tử input tương ứng.<fieldset>: Dùng để nhóm các phần tử liên quan trong một form và thường kết hợp với thẻ<legend>để cung cấp tiêu đề cho nhóm đó.<legend>: Định nghĩa một tiêu đề cho thẻ<fieldset>.<datalist>: Cho phép tạo một danh sách các lựa chọn mà người dùng có thể chọn từ đó khi nhập vào một<input>.<output>: Định nghĩa một khu vực trong đó có thể hiển thị dữ liệu được tạo ra bởi tính toán từ các phần tử trong form, thường là kết quả của một script.
Thẻ HTML Styles và Semantics
Các thẻ styles và semantics cơ bản bao gồm:
<style>: Thẻ này được sử dụng để định nghĩa thông tin về style cho một tài liệu HTML. Thường được đặt trong phần<head>của tài liệu và chứa các CSS rules.<div>: Đây là thẻ container chung chung được sử dụng để nhóm các phần tử và thường kết hợp với CSS để định dạng layout cho các khối nội dung.<span>: Tương tự như<div>nhưng được sử dụng cho các phần tử nội dung inline và cũng thường kết hợp với CSS để định dạng text hoặc nhóm các phần tử nhỏ.<header>: Định nghĩa phần đầu của một tài liệu hoặc một section, thường chứa tiêu đề và các thông tin khởi đầu.<footer>: Định nghĩa phần cuối của một tài liệu hoặc một section, thường chứa thông tin bản quyền, liên hệ, và các liên kết khác.<article>: Định nghĩa một phần tử độc lập hoặc tự chứa trong nội dung. Mộtarticlenên có khả năng tồn tại độc lập và vẫn có ý nghĩa.<section>: Dùng để nhóm nội dung và typically liên quan đến một chủ đề hoặc chức năng cụ thể.<aside>: Định nghĩa một phần của tài liệu mà chứa nội dung gián tiếp liên quan đến nội dung xung quanh nó. Thường được sử dụng như một sidebar.<main>: Định nghĩa phần chính của tài liệu và nên chứa nội dung duy nhất không lặp lại xuyên suốt các trang khác.
Kết luận
Thẻ HTML là một phần quan trọng của ngôn ngữ HTML. Việc nắm vững các thẻ HTML cơ bản là nền tảng quan trọng để bạn có thể bắt đầu học thiết kế web. Để sử dụng thẻ HTML, bạn cần lưu ý các nguyên tắc sau:
- Tên thẻ phải được viết bằng chữ thường.
- Tên thẻ phải được viết theo chữ cái tiếng Anh.
- Thẻ phải được đóng đúng cách.
- Nội dung bên trong thẻ phải được viết theo cú pháp HTML.
