Các thẻ trong HTML
Ở chương 1 – Bạn và Myboxst đã tìm hiểu về cấu trúc cơ bản của một website và cách hoạt động của website trên internet!
Và đã biết HTML là một ngôn ngữ đánh dấu siêu văn bản, dùng để mổ tả cách mà thông tin hiển thị trên trang web bằng các thẻ (tags).
Trong chương này hãy cùng Myboxst tìm hiểu về các thẻ trong HTML (tags) và tác dụng của những loại thẻ (tags) trong HTML.
Các thẻ trong HTML (Tags) là gì?
Nói một cách dễ hiểu và ngắn gọn thì Các thẻ trong HTML (tags) là công cụ dùng để mô tả thông tin hiển thị trên trang web.
Ví dụ như:
- Hiển thị hình ảnh bằng thẻ <img />
- Tạo một liên kết bằng thẻ <a>
- Hiển thị một đoạn văn bằng thẻ <p>
Những thẻ cơ bản
Ví dụ:
Đoạn Code HTML
<!DOCTYPE html><html lang="en"><head> <title>Tạo website đơn giản đầu tiên</title></head><body> <h5 class="demo">Chương 1</h5> <p>Welcom To Myboxst!</p></body></html>Kết Quả hiển thị:
Chương 1
Welcom To Myboxst!
Ở ví dụ trên thì gồm những thẻ cơ bản sau:
| Thẻ (tag) | Mô Tả |
| <html></html> | Thẻ chỉ định tại liệu hiển thị dưới dạng trang web |
| <head></head> | Thẻ mô tả thông tin và dữ liệu của các tài liệu web như: tiêu đề,thư viện,… |
| <title></title> | Thẻ hiển thị tiêu đề của trang web |
| <body></body> | Thẻ chứa nội dung trang web |
| <h1></h1> | Thẻ chứa tiêu đề lớn đầu tiên trong 1 trang.Ngoài ra còn có: h2, h3, h4, h5, h6 nhỏ hơn |
| <p></p> | Thẻ chứa một đoạn văn trong trang. |
Myboxst đã đề cập đến trong chương 1 về <!DOCTYPE HTML> ! Myboxst nhắc lại đây là một đoạn định dạng không phải là thẻ html, nó có tác dụng khai báo cho trình duyệt biết được website của bạn đang sử dụng phiên bản ngôn ngữ đánh dấu là html5.
Hai loại thẻ chính trong HTML
Thẻ đôi
Đây là thẻ được bắt đầu bằng thẻ mở và kết thúc bằng thẻ đóng <tên thẻ> Nội dung hiển thị </tên thẻ>
Ví dụ:
- thẻ <b> In đậm </b>
- <i> in nghiên </i>
Thẻ đơn
Thẻ đơn là một thẻ đơn thể có cấu trúc <tên thẻ />
Ví dụ:
- Thẻ <img src=”” />: đây là thẻ dùng để hiển thị hình ảnh trong trang.
- Thẻ <br /> : dùng để ngắt một dòng của đoạn.
Lưu ý: phần sau của thẻ gồm một “khoảng trắng” sau đó mới đến phần kết thúc là ” /> “.
Thẻ lồng nhau trong html
Đây là một loại “Thẻ nằm trong thẻ” thực ra mục đích của việc này chỉ để hiển thị nội dung một cách đa dạng và thân thiện với UI (User Interface: Giao diện người dùng)
Ví dụ:
bạn muốn tạo một đoạn văn có nội dung “Tự học html với Myboxst.com” và in đậm chữ Myboxst.com, đồng thời gạch dưới thì bạn có thể viết như sau:
Đoạn Code HTML
<!DOCTYPE html><html lang="en"><head> <title>Thẻ lồng nhau</title></head><body> <p>Tự học html với <b><u>Myboxst.com</u><b></p></body></html>Kết Quả hiển thị:
Tự học html với Myboxst.com
Tổng hợp tất cả các thẻ trong html
| Thẻ | Công dụng của thẻ |
| <!– –> | Chú thích nội dung, và ý nghĩa của đoạn code |
| <a> | Định nghĩa một siêu liên kết |
| <abbr> | Định nghĩa một từ viết tắt |
| <acronym> | Định nghĩa một từ viết tắt !Không được hỗ trợ trong HTML5. Được thay thế bằng thẻ <abbr> |
| <address> | Xác định thông tin liên hệ cho tác giả / chủ sở hữu của tài liệu |
| <applet> | Dùng để nhúng một Applet !Không được hỗ trợ trong HTML5. Được thay thế bằng thẻ <embed> hoặc <object> |
| <area> | Xác định một vùng cố định trên hình ảnh |
| <article> | Định nghĩa một bài báo, tin tức mới…. |
| <aside> | Định nghĩa nội dung nằm ngoài nội dung của trang |
| <audio> | Định nghĩa nhúng nội dung bằng âm thanh |
| <b> | Định nghĩa in đậm chữ |
| <base> | Chỉ định đường dẫn (URL) cơ sở / đích đến cho tất cả đường dẫn (URL) tương đối trong tài liệu |
| <basefont> | Dùng để mặc định màu sắc, kích thước, font cho tất cả văn bản trong tài liệu !Không được hỗ trợ trong HTML5. Được thay thế bằng CSS |
| <bdi> | Dùng để cô lập một nội dung mà ta chưa thể xác định được hướng của nó. |
| <bdo> | Dùng ghi đè văn bản hiện tại |
| <big> | Định nghĩa kiểu chữ lớn !Không được hỗ trợ trong HTML5. Được thay thế bằng CSS |
| <blockquote> | Xác định một phần được trích dẫn từ một nguồn khác |
| <body> | Xác định nội dung của tài liệu html |
| <br> | Dùng để ngắt dòng |
| <button> | Tạo một nút button có thể click vào |
| <canvas> | Dùng để vẽ đồ họa nhanh chóng bằng cách thông qua một ngôn ngữ script (thông thường là JavaScript) |
| <caption> | Định nghĩa tiêu đề cho 1 bảng |
| <center> | Căn giữa văn bản !Không được hỗ trợ trong HTML5. Được thay thế bằng CSS |
| <cite> | Xác định tiêu đề của một tác phẩm hoặc bài viết như: tên sách,bài báo… |
| <code> | Định nghĩa một đoạn văn bản mang ý nghĩa là các mã máy tính. |
| <col> | Chỉ định thuộc tính cột cho mỗi cột trong một <colgroup> |
| <colgroup> | Chỉ định một nhóm gồm một hoặc nhiều cột trong bảng để định dạng |
| <data> | Thêm bản dịch tự động của một nội dung nhất định |
| <datalist> | Chỉ định một danh sách tuỳ chọn được xác định trước cho phần tử |
| <dd> | Mô tả một keyword/giá trị trong một danh sách được mô tả |
| <del> | Xác định văn bản đã bị xóa khỏi tài liệu |
| <details> | Xác định các chi tiết bổ sung mà người dùng có thể xem hoặc ẩn |
| <dfn> | Chỉ định một thuật ngữ sẽ được định nghĩa trong nội dung |
| <dialog> | Định nghĩa hộp thoại hoặc cửa sổ |
| <dir> | Định nghĩa danh sách thư mục !Không được hỗ trợ trong HTML5. Được thay thế bằng thẻ <ul> |
| <div> | Định nghĩa một phần trong tài liệu |
| <dl> | Định nghĩa danh sách mô tả |
| <dt> | Định nghĩa một từ khoá/tên trong danh sách mô tả |
| <em> | Dùng để nhấn mạnh văn bản |
| <embed> | Xác định vùng chứa (container) cho một ứng dụng bên ngoài |
| <fieldset> | Nhóm các phần tử liên quan trong một form |
| <figcaption> | Tạo chú thích cho thẻ <figure> |
| <figure> | Chỉ định nội dung độc lập |
| <font> | Xác định phông chữ, màu sắc và kích thước cho văn bản !Không được hỗ trợ trong HTML5. Được thay thế bằng CSS |
| <footer> | Xác định chân trang cho tài liệu hoặc vùng chọn |
| <form> | Xác định một biểu mẫu HTML cho phép người người dùng nhập thông tin |
| <frame> | Xác định một cửa sổ (một khung) trong bộ khung !Không được hỗ trợ trong HTML5. |
| <frameset> | Xác định một tập hợp các khung !Không được hỗ trợ trong HTML5. |
| <h1,h2,h3,h4,h5,h6> | Định nghĩa các tiêu để HTML |
| <head> | Thẻ mô tả thông tin và dữ liệu của các tài liệu web như: tiêu đề,thư viện,… |
| <header> | Định nghĩa một tiêu đề cho một tài liệu hoặc vùng chọn |
| <hr> | Sử dụng để tách các phần nội dung trong HTML |
| <html> | Thẻ chỉ định tại liệu hiển thị dưới dạng trang web |
| <i> | In nghiên cho văn bản |
| <iframe> | Tạo một khung nội tuyến để chứa các tài liệu nhúng vào trang hiện tại |
| <img> | Định nghĩa một hình ảnh (chèn hình ảnh vào tài liệu html). |
| <input> | Định nghĩa một khung nhập dữ liệu |
| <ins> | Định nghĩa một văn bản (nhấn mạnh) được chèn vào tài liệu |
| <kdb> | Định nghĩa văn bản mang ý nghĩa là một phím hoặc tổ hợp bàn phím |
| <label> | Định nghĩa nhãn cho một phần tử đầu vào |
| <legend> | Định nghĩa một chú thích cho một phần tử <fieldset> |
| <li> | Định nghĩa một danh sách |
| <link> | Xác định mối liên kết giữa một tài liệu và một nguồn bên ngoài (ví dụ: dùng để liên kết css trong style sheets) |
| <main> | Chỉ định nội dung chính của một tài liệu |
| <map> | Định nghĩa một bản đồ hình ảnh |
| <mark> | Đánh dấu/làm nỗi bật văn bản |
| <meta> | Định nghĩa về dữ liệu của một tài liệu HTML |
| <meter> | Định nghĩa một phép đo lường đã biết trước (định nghĩa dụng cụ đo lường) |
| <nav> | Xác định các liên kết điều hướng |
| <noframes> | Định nghĩa một nội dung thay thế cho người dùng nếu trình duyệt không hỗ trợ khung hiển thị. !Không được hỗ trợ trong HTML5. |
| <noscript> | Định nghĩa hiển thị nội dung thay thế cho duyệt phía client do không hỗ trợ script |
| <object> | Định nghĩa vùng chứa cho tài liệu (tập tin) được nhúng từ bên ngoài vào trang web |
| <ol> | Định nghĩa một danh sách có thứ tự |
| <optgroup> | Xác định một nhóm các tùy chọn liên quan trong danh sách drop-down |
| <option> | Định nghĩa một tùy chọn trong danh sách drop-down |
| <output> | Dùng xác định kết quả của một phép tính |
| <p> | Định nghĩa một đoạn văn bản |
| <pre> | định nghĩa một văn bản có sẵn định dạng |
| <progress> | Hiển thị quá trình xử lý công việc bằng một thanh bar, được kết hợp với code javascript để mô tả trạng thái. |
| <q> | Định nghĩa một trích dẫn ngắn bằng cách bao quanh văn bản bởi dấu nháy kép |
| <s> | Định nghĩa văn bản đó không còn đúng |
| <samp> | Hiển thị kết quả đầu ra của một chương trình máy tính |
| <script> | Định nghĩa một tập lệnh phía máy khách (client) |
| <section> | Xác định một vùng chọn trong một tài liệu |
| <select> | Định nghĩa một danh sách drop-down |
| <small> | Định nghĩa văn bản kiểu chữ nhỏ |
| <source> | Định nghĩa các nguồn tài nguyên cho các phần tử như<video> và <audio> |
| <span> | Định nghĩa một phần trong tài liệu |
| <strike> | Gạch ngang chữ trong văn bản !Không được hỗ trợ trong HTML5. Được thay thế bằng thẻ <del> hoặc <s> |
| <strong> | Dùng nhấn mạnh độ quan trọng của văn bản bằng cách in đậm! |
| <style> | Xác định kiểu thông tin cho một tài liệu |
| <sub> | Định nghĩa văn bản có chỉ số nhỏ nằm phía dưới (giống số log) |
| <summary> | Hiển thị một tiêu đề cho phần tử <details> |
| <sup> | Định nghĩa văn bản có chỉ số nhỏ nằm phía trên (giống số mũ) |
| <svg> | Định nghĩa vùng chứa (container) cho đồ hoạ SVG |
| <table> | Tạo một bảng |
| <tbody> | Nhóm nội dung trong một bảng |
| <td> | Định nghĩa một ô trong bảng |
| <template> | Xác định một vùng chứa cho nội dung bị ẩn khi tải trang |
| <textarea> | Định nghĩa ô dữ liệu đầu vào là văn bản có nhiều dòng |
| <tfoot> | Nhóm nội dung chân trang (footer) vào một bảng |
| <th> | Định nghĩa tiêu đề trong bảng |
| <thead> | Nhóm nội dung tiêu đề trong một bảng |
| <time> | Định nghĩa ngày/giờ |
| <title> | Định nghĩa tiêu đề cho tài liệu |
| <tr> | Định nghĩa một dòng trong bảng |
| <track> | Định nghĩa nội dung môt tả như chú thích, bình luận… cho các phần tử đa phương tiện như <video> hoặc <audio> |
| <tt> | Định văn bản của máy !Không được hỗ trợ trong HTML5. Được thay thế bằng CSS |
| <u> | Tạo gạch chân cho văn bản |
| <ul> | Định nghĩa một danh sách không có thứ tự |
| <var> | Định nghĩa một biến |
| <video> | Định nghĩa một video |
| <wbr> | Định nghĩa một dấu ngắt dòng |
Một số website và công cụ hỗ trợ thực hành và học về html
- Codepen.io
- VS Code
- W3chool
- Nodepad,Nodepad++
- Adobe dreamweaver
Nếu bạn chưa xem bài viết chương 1 và chưa biết để chạy code HTML trên những công cụ trên bạn có thể xem tại đây : Hướng dẫn chạy file .HTML trên VScode và những TextEditor khác.
Lời kết
Qua bài viết này myboxst đã liệt kê đầy đủ những thẻ trong HTML cho bạn!
Đồng thời Myboxst sẽ add link thực hành và ví dụ của từng thẻ hay dùng cho bạn dễ hiểu hơn!
Myboxst khuyến khích các bạn nên thực hành từng thẻ (Tag) để hiểu cách sử dụng chúng trong từng trường hợp cụ thể!
Như vậy, cũng sẽ giúp cho bạn dễ nhớ tên và tác dụng của thẻ lâu hơn!
“Học phải đi đôi với hành”
“Nếu bạn không thử, làm sao biết ko thể?”
Chúc bạn thành công!
▼ Hãy share bài viết nếu bạn thấy bài viết có ích! Hoặc xem lại khi bạn quên!▼
Không có nhận xét nào:
Đăng nhận xét