Nếu bạn là một người chuyên về thiết kế web chắc hẳn đã từng nghe qua cụm từ ‘HTML’ trong công việc. Việc sử dụng HTML được diễn ra thường xuyên đối với một lập trình viên. Bài viết này sẽ tổng hợp các thẻ html cơ bản, cùng dinhnghia theo dõi nhé!
Nội dung bài viết
Basic
| Tên thẻ | Chức năng |
| !DOCTYPE | Xác định cho trình duyệt biết phiên bản HTML mà người dùng đang sử dụng |
| head | Xác định phần đầu của tài liệu HTML |
| html | Xác định tài liệu HTML |
| title | Xác định tiêu đề của trang web |
| body | Xác định phần thân của tài liệu HTML |
| p | Xác định một đoạn văn bản |
| h1 – h6 | Tạo những đề mục quan trọng trong trang web |
| hr | Tạo một đường kẻ phân cách nằm ngang |
| br | Chèn một ngắt xuống dòng |
| !– — | Xác định một đoạn chú thích |
Formatting
| Tên thẻ | Chức năng |
| abbr | Định nghĩa một từ viết tắt |
| bdo | Điều hướng một đoạn văn bản được chỉ định |
| address | Xác định thông tin liên hệ của tác giả (hoặc người sở hữu) trang web |
| big | Xác định một đoạn văn bản có kích thước chữ to hơn văn bản bình thường |
| b | Xác định đoạn văn bản được in đậm |
| blockquote | Xác định một đoạn trích dẫn từ website khác |
| del | Tạo một đường kẻ ngang lên văn bản |
| i | Xác định một đoạn văn bản được định dạng kiểu chữ in nghiêng |
| kbd | Xác định một từ/cụm từ mang ý nghĩa là một phím hoặc tổ hợp phím |
| em | Xác định một đoạn văn bản được định dạng kiểu chữ in nghiêng |
| meter | Tạo phần tử có ý nghĩa giống như: thước đo, ổ đĩa,… |
| progress | Tạo một thanh tiến trình |
| ins | Tạo một đường gạch chân lên văn bản |
| mark | Đánh dấu màu nền nổi bật cho văn bản |
| pre | Giúp cho nội dung mà bạn muốn hiển thị lên màn hình được giữ nguyên định dạng giống như trong lúc soạn thảo |
| s | Tạo một đường kẻ ngang lên văn bản |
| strong | Xác định đoạn văn bản được in đậm |
| sup | Tạo văn bản có kích thước nhỏ, nằm ở khoảng nửa trên văn bản bình thường |
| u | Tạo một đường gạch chân lên văn bản |
| time | Đánh dấu những phần văn bản là: thời gian, ngày tháng, ngày lễ,… |
| sub | Tạo văn bản có kích thước nhỏ, nằm ở khoảng nửa dưới văn bản bình thường |
| wbr | Ngắt bớt ký tự của một từ xuống dòng. |
| small | Xác định một đoạn văn bản có kích thước chữ nhỏ hơn văn bản bình thường |
| q | Xác định một câu trích dẫn ngắn |
| code | Xác định một đoạn văn bản mang ý nghĩa là các mã lệnh |
Frames
| Tên thẻ | Chức năng |
| noframes | Xác định một nội dung sẽ được hiển thị khi trình duyệt không hỗ trợ thẻ ‘frame’ |
| frame | Xác định một khung trong một bộ khung |
| iframe | Nhúng một trang web khác vào trang web hiện tại |
| frameset | Xác định một bộ khung |
Images
| Tên thẻ | Chức năng |
| map và area | Tạo một bản đồ ảnh |
| figure | Xác định một nội dung cần được tách biệt rõ ràng |
| img | Chèn hình ảnh vào trang web |
| figcaption | Tạo một tiêu đề cho nội dung được đặt bên trong phần tử ‘figure’ |
Audio / Video
| Tên thẻ | Chức năng |
| source | Chỉ định tài nguyên cho trình nghe nhạc hoặc trình xem phim |
| audio | Tạo một “trình phát nhạc” cho trang web |
| video | Tạo một “trình xem phim” cho trang web |
| track | Chèn một bản phụ đề vào video |
Links
| Tên thẻ | Chức năng |
| nav | Xác định một tập hợp các liên kết & thường được sử dụng kết hợp với CSS để tạo một thanh menu |
| a | Tạo một liên kết đến một tài liệu nào đó |
Lists
| Tên thẻ | Chức năng |
| ol | Xác định một danh sách có thứ tự |
| ul | Xác định một danh sách không có thứ tự |
| li | Xác định một “danh mục” trong danh sách |
Tables
| Tên thẻ | Chức năng |
| caption | Tạo tiêu đề cho bảng |
| table | Xác định phần tử là một cái bảng |
| tr | Xác định phần tử là một hàng trong bảng |
| thead | Xác định những dòng nào thuộc “phần đầu” của bảng |
| tfoot | Xác định những dòng nào thuộc “phần chân” của bảng |
| tbody | Xác định những dòng nào thuộc “phần thân” của bảng |
| td | Xác định phần tử là một ô trong hàng |
| th | Xác định phần tử là một ô tiêu đề trong hàng |
Styles and Semantics
| Tên thẻ | Chức năng |
| footer | Xác định phần chân của trang web |
| style | Dùng để làm thùng chứa cho các đoạn mã CSS |
| dialog | Tạo một hộp thoại |
| div | Nhóm các phần tử lại với nhau để tiện cho việc định dạng cũng như thiết kế bố cục của trang web |
| summary và details | Tạo phần tử có dạng: “chỉ hiển thị tiêu đề còn chi tiết bị ẩn, khi bấm vào tiêu đề thì chi tiết mới hiển thị” |
| span | Nhóm các phần tử nội tuyến lại với nhau để tiện cho việc định dạng CSS |
| main | Xác định phần thân của trang web |
| header | Xác định phần đầu của trang web |
Meta Info
| Tên thẻ | Chức năng |
| meta | Cung cấp thêm “thông tin về trang web” cho trình duyệt và các công cụ tìm kiếm |
| base | Xác định “đường dẫn cơ sở” trong trang web và kiểu mở liên kết mặc định |
| head | Xác định phần đầu của tài liệu HTML (chứa các thẻ cung cấp thông tin cho trang web) |
Programming
| Tên thẻ | Chức năng |
| embed | Dùng để nhúng một “tài liệu” nào đó vào trang web |
| script | Dùng để làm thùng chứa cho các câu lệnh JavaScript |
| object | Dùng để nhúng một “tài liệu” nào đó vào trang web |
| noscript | Xác định một nội dung HTML sẽ được hiển thị khi trình duyệt không hỗ trợ JavaScript hoặc đã tắt JavaScript |
Khi sử dụng thẻ bạn thêm dấu “< >” tại mỗi thẻ nhé
Xem thêm:
- Front end là gì? Những điều bạn cần biết để trở thành front end developer
- Ngôn ngữ lập trình là gì? Ngôn ngữ lập trình phổ biến nhất
- Backend là gì? Sự khác biệt giữa front end, back end và full stack
Hy vọng bài viết sẽ giúp ích cho bạn trong quá trình làm việc. Nếu thấy hữu ích, hãy chia sẻ ngay với bạn bè và đừng quên để lại bình luận bên dưới nhé!