Thẻ HTML là kiến thức cơ bản mà bất cứ dân lập trình web nào cũng phải biết. Các lập trình viên thường sử dụng các thẻ HTML cơ bản trong quá trình lập trình của mình. Vậy cụ thể HTML là gì? Cấu trúc thẻ HTML bao gồm các thành phần nào? Có các thẻ HTML thông dụng nào tại sao lại quan trọng đến vậy? Tất cả sẽ được Sala Mediaz giải đáp ngay bài viết dưới đây.
Thẻ HTML là gì?
HTML là viết tắt của từ tiếng Anh Hypertext Markup Language. Dịch theo nghĩa tiếng Việt là “Ngôn ngữ đánh dấu siêu văn bản”. HTML được sử dụng trong lập trình và thiết kế website. Mỗi website bao gồm nhiều trang nội dung khác nhau nên mỗi trang sẽ có một tài liệu HTML riêng.
HTML theo nghĩa tiếng Việt là “Ngôn ngữ đánh dấu siêu văn bản”
Hay hiểu một cách đơn giản khi bạn truy cập vào một trang web. Những nội dung bao gồm hình ảnh, văn bản, video,… Tất cả những gì bạn nhìn thấy lúc này đều được tạo ra bằng ngôn ngữ HTML.
Bên cạnh đó HTML cũng có thể kết hợp với những dạng ngôn ngữ lập trình khác như PHP hoặc Node.js. Sự kết hợp này sẽ tạo ra những website động. Thẻ HTML chính là sự cấu thành từ các trang HTML. Các thẻ này có thể lồng vào nhau gọi là thẻ chứa thẻ.
Các thành phần trên một trang web được xác định thuộc tính và bố cục nhờ vào các thẻ HTML. Một phần tử HTML bao gồm thẻ mở, nội dung bên trong và thẻ đóng. Cụ thể sẽ được tìm hiểu ở nội dung cấu trúc thẻ HTML tiếp theo. Tuy nhiên cũng có những thẻ HTML không có phần nội dung bên trong. Thẻ này được gọi là thẻ rỗng vì vậy không cần đến thẻ đóng.
Cấu trúc thẻ HTML cơ bản
Sau khi tìm hiểu về khái niệm thẻ HTML chúng ta cùng đi sâu vào cấu trúc thẻ HTML. Một thẻ HTML chuẩn sẽ có cấu trúc như sau:
- Phần DOCTYPE: đây là phần khai báo kiểu văn bản cho trình duyệt biết phiên bản HTML bạn đang sử dụng. Nội dung này cực kỳ quan trọng tuy nhiên nhiều tài liệu nhập môn HTML lại bỏ qua.
- Phần tiêu đề: chính là nội dung được bắt đầu bằng cặp thẻ <head> và kết thúc bằng </head>. Trong nội dung phần này sẽ chứa tiêu đều nằm trong cặp thẻ <title> và </title>. Được hiển thị trên thanh điều hướng của trang web. Bên cạnh đó còn có các khai báo và thông tin khác phục vụ SEO.
- Phần thân: bao gồm hình ảnh, âm thanh, liên kết sẽ được hiển thị trên trang Web. Những nội dung này nằm sau tiêu đề và được bắt đầu bằng thẻ <body>, kết thúc bằng </body>.
Cấu trúc thẻ HTML cơ bản
Nằm trong cặp thẻ <html> và </html> là 2 phần tiêu đề và phần thân. Nhờ có thẻ HTML mà trình duyệt biết được một tài liệu HTML bao gồm nội dung 2 thẻ này.
Các thẻ HTML cơ bản
Dưới đây là tổng hợp các thẻ HTML cơ bản mà bất cứ dân lập trình nào dù là nghiệp dư cũng phải nắm được:
- <!DOCTYPE>: như đã chia sẻ trên đây là thẻ khai báo phiên bản HTML. Cấu trúc bắt đầu của các thẻ HTML thông dụng không yêu cầu chữ hoa hay thường
- <html>: tại đây chứa các phần tử của tài liệu HTML ngoại trừ <!DOCTYPE>. Nên còn được ví như thư mục gốc của một tài liệu HTML. Có chức năng khai báo ngôn ngữ cho trang web. Đồng thời giúp công cụ tìm kiếm dễ dàng đọc và hiển thị thông tin. Vì vậy <html> phải có thuộc tính lang.
- <head>: có chức năng chứa siêu dữ liệu để xác định được tiêu đề, ký tự và meta. Nội dung phần <header> nằm giữa cặp thẻ <html> và <body>. Trong thẻ <head> có thể lồng thêm các thẻ như <title>, <style>, <base>, <link>, <meta>, <script> và <noscript>.
- <title>: xác định tiêu đề cho trang HTML. Tiêu đề xuất hiện dạng văn bản và ở thanh tiêu đề trình duyệt web. Đây cũng là thành phần trong cấu trúc thẻ HTML.
- <meta>: chức năng của thẻ này là mô tả nội dung của trang web
- <link>: được sử dụng để nhúng như css tập tin vào trang web
- <script></script>: có chức năng nhúng tập tin javascript, js.
- <style></style>: bao nội dung css.
- <body>: có chức năng xác định phần nội dung. Tại đây chứa tất cả các nội dung như tiêu đề, văn bản, hình ảnh, liên kết, bảng biểu, danh mục, các thẻ HTML thông dụng…Đây cũng là thẻ duy nhất có trong 1 tài liệu HTML
- <h1> – <h6>: có chức năng chỉ ra các tiêu đề có trong HTML. Mỗi trang chỉ có duy nhất 1 <h1> và mức độ quan trọng sẽ giảm từ <h1> xuống <h6>.
- <p>: được sử dụng để xác định một đoạn văn. Trước và sau mỗi thẻ <p> sẽ có dòng trống do trình duyệt tự động thêm
- <br>: tạo dấu ngắt dòng giữa các văn bản mà người dùng không phải nhập thủ công. Thẻ này thuộc thẻ rỗng vì vậy không cần thẻ đóng.
- <hr>: tách nội dung giữa các trang HTML và chuyển chủ đề.
- <!– –>: được sử dụng để thêm các bình luận trong mã nguồn. Với chức năng này thẻ có công dụng cực kỳ hữu ích khi sau này bạn muốn sửa mã nguồn.
- <div></div>: chứa các phần tử được sử dụng để tạo bố cục cho trang web
- <span></span>: chứa nội dung.
- <a></a>: có chức năng tạo link.
- <ul></ul>: liệt kê dạng danh sách.
- <img>: viết tắt của image sử dụng để hiển thị hình ảnh.
- <form>: được dùng để tạo form nhập liệu cho web khi kết hợp với các thẻ input, legend, fieldset, label,…
- <legend>: đây là thẻ tiêu đề của nhóm các ô nhập liệu
- <fieldset>: được sử dụng để nhóm các ô nhập liệu
- <label>: chính là tiêu đề của ô nhập liệu
- <input>: đây là thẻ được sử dụng để nhập liệu cho HTML
- <table></table>: được sử dụng để tạo bảng khi kết hợp với các thẻ khác như tr, th, td
- <tr></tr>: sử dụng để tạo hàng trong bảng
- <th></th>: có chức năng tạo hàng đầu tiên của bảng
- <td></td>: có chức năng tạo cột trong hàng của bảng
- <iframe></iframe>: được sử dụng để nhúng một nội dung nào đó vào trang web hiện tại.
- <strong></strong>: sử dụng để in đậm nhấn mạnh ý nghĩa của văn bản
- <i></i>: có chức năng in nghiêng chữ
- <u></u>: có chức năng gạch dưới chữ
- <s></s>: sử dụng để tạo chữ gạch cắt ngang
- <sub></sub>: có chức năng tạo kiểu chữ
- <blockquote></blockquote>: dùng để mô tả một đoạn trích dẫn.
- <pre></pre>: có chức năng giữ nguyên định dạng nội dung bên trong văn bản.
Các thẻ HTML tạo nên một trang web khoa học, đẹp mắt
Nhờ có các thẻ HTML mà các lập trình viên có thể tạo nên một trang web khoa học, đẹp mắt. Bên cạnh đó các thẻ HTML thông dụng tạo sự thuận tiện cho người dùng khi truy cập vào đọc các nội dung bên trong. Công cụ này còn giúp việc tìm kiếm, thu thập dữ liệu trong web và SEO dễ dàng hơn.
Vì vậy trước khi bắt tay vào xây dựng một trang Web. Việc tìm hiểu các thẻ HTML thông thường để tạo ra các trang HTML là vô cùng cần thiết. Nếu bạn có bất cứ thắc mắc nào cần trợ giúp hãy liên hệ với Sala Mediaz để được giải đáp nhé!
CÔNG TY TNHH SALA MEDIAZ
Website: https://salamediaz.com/
Add: 244/29 Huỳnh Văn Bánh, P.11, Q.Phú Nhuận, Tp.Hồ Chí Minh
Hotline: 0901 93 7899
Email: admin@salamediaz.com
