Các thẻ HTML cơ bản được sử dụng trong thiết kế website

Trong thế giới của HTML có đến 119 loại thẻ khác nhau, nhưng không phải tất cả trong số chúng đều phổ biến. Dưới đây là các thẻ HTML cơ bản được các lập trình viên ứng dụng rộng rãi trong thiết kế trang web hiện nay. 

Các thẻ HTML cơ bản
Các thẻ HTML cơ bản

1. Thẻ HTML là gì?

HTML là ngôn ngữ đánh dấu siêu văn bản được sử dụng trong xây dựng website. Tất cả những nội dung như văn bản, hình ảnh hoặc video mà bạn nhìn thấy khi truy cập vào một trang web bất kỳ đều được xây dựng bằng loại ngôn ngữ này. Ngoài ra, HTML có thể dễ dàng kết hợp với các ngôn ngữ lập trình backend như PHP hoặc Node.js để tạo nên những website động. Cấu thành nên trang HTML chính là các thẻ HTML.   

Thẻ HTML là công cụ xác định thuộc tính và bố cục của các thành phần trên trang web. Một thẻ HTML (hay còn gọi là phần tử HTML) được xác định bởi thẻ mở, nội dung bên trong và thẻ đóng. Tuy nhiên, một số loại thẻ HTML không có phần nội dung (ví dụ như <br>, <embed> hoặc <img>). Chúng được gọi là các thẻ rỗng và cũng không cần thẻ đóng. 

Các thẻ HTML có thể lồng vào nhau (một thẻ có thể chứa thẻ khác). Chúng xuất hiện trong tất cả các tài liệu HTML. Cùng xem một ví dụ dưới đây: 

Ví dụ về các thẻ HTML lồng nhau
Ví dụ về các thẻ HTML lồng nhau

Bạn có thể thấy rõ trong thẻ <html> có một thẻ <body>. Trong thẻ <body> xuất hiện 2 thẻ là <h1> và <p>.

2. Các thẻ HTML cơ bản 

Một tài liệu HTML đơn giản sẽ bao gồm các thẻ HTML cơ bản như sau: 

2.1. <!DOCTYPE>

Đây là thẻ có nhiệm vụ khai báo cho trình duyệt web biết rằng tài liệu đang hiển thị là HTML. Mọi tài liệu HTML đều phải bắt đầu với <!DOCTYPE>. 

Với phiên bản HTML5, bạn dùng khai báo <!DOCTYPE html> Khai báo <!DOCTYPE> không phân biệt chữ thường và chữ hoa. 

2.2. <html>

Thẻ này tượng trưng cho thư mục gốc của một tài liệu HTML, đóng vai trò là khu vực chứa tất cả các phần tử HTML khác (trừ <!DOCTYPE>). Nó luôn phải có thuộc tính lang để khai báo ngôn ngữ cho một phần hoặc cả trang web, giúp công cụ tìm kiếm và trình duyệt dễ dàng đọc và hiển thị được thông tin trong trang.

2.3. <head>

Nằm giữa <html> và <body>, thẻ <head> làm nhiệm vụ chứa các siêu dữ liệu. Đây là những dữ liệu về tài liệu HTML, dùng để xác định tiêu đề, ký tự và các thông tin meta khác. 

Một số thẻ có thể lồng vào thẻ <head> như: <title>, <style>, <base>, <link>, <meta>, <script> và <noscript>. 

2.4. <title>

Thẻ này chỉ ra tiêu đề của trang HTML, xuất hiện dưới dạng văn bản và được hiển thị ở thanh tiêu đề của trình duyệt hoặc ở tab của trang. Đồng thời, nó cũng xác định tiêu đề cho trang khi trang được thêm vào mục yêu thích. 

Đây là một phần tử bắt buộc phải có trong mọi tài liệu HTML. 

2.5. <body>

Đây là thẻ xác định phần nội dung của tài liệu. Nó là vùng chứa cho tất cả các nội dung có thể nhìn thấy được như tiêu đề, đoạn văn, hình ảnh, siêu liên kết, bảng biểu, danh mục,…

Mỗi tài liệu HTML chỉ có duy nhất 1 thẻ <body>. 

2.6. <h1> – <h6>

Danh sách thẻ từ <h1> đến <h6> được sử dụng để chỉ rõ các tiêu đề trong tài liệu HTML. Mức độ quan trọng của tiêu đề giảm dần từ <h1> xuống <h6>. Mỗi trang chỉ dùng 1 <h1>. 

2.7. <p>

Thẻ dùng để xác định một đoạn văn. Các trình duyệt sẽ tự động thêm một dòng trống trước và sau mỗi thẻ <p>.

2.8. <br>

Bạn sẽ cần đến thẻ này để tạo một dấu ngắt dòng giữa văn bản, ví dụ như một bài thơ. Đây là một thẻ rỗng, không có thẻ đóng. Khi dùng thẻ này thì bạn không phải nhập thủ công khoảng cách giữa các đoạn văn nữa.

2.9. <hr>

Thẻ <hr> dùng để chuyển chủ đề, tách riêng các nội dung trong trang HTML.

2.10. <!– –>

Đây là thẻ bình luận được sử dụng để thêm các bình luận trong mã nguồn. Bình luận không được hiển thị trong trình duyệt. Thẻ này sẽ hữu ích khi bạn muốn sửa mã nguồn sau này. 

<!–…–> sẽ giúp bạn ẩn các tập lệnh từ các trình duyệt không được hỗ trợ.

Thẻ HTML được các lập trình viên sử dụng để tạo nên một trang web có giao diện khoa học, đẹp mắt và thuận tiện cho người dùng khi đọc các nội dung trên đó. Ngoài ra, công cụ này còn giúp công cụ tìm kiếm dễ dàng thu thập dữ liệu trong web và SEO web tốt hơn. Chính vì thế, trước khi bắt tay vào thực hiện xây dựng website, bạn nên tìm hiểu kỹ về các thẻ HTML cơ bản và cách dùng chúng để tạo các trang HTML hoàn chỉnh nhé. 

Nếu bạn quan tâm, hãy xem các vị trí đang tuyển dụng của Got It tại: bit.ly/gotit-hanoi và đọc thêm về quy trình tuyển dụng tại đây.

branding
branding
February 07, 2021
0
Share this post to:
Tags:
0 Comments
Inline Feedbacks
View all comments
Các bài viết liên quan
Những code HTML cơ bản nhất

Những code HTML cơ bản nhất

Loại code HTML cơ bản dễ học nhất hiện nay là gì? Những người lập trình viên mới vào nghề thường khá lúng túng không biết nên bắt đầu học từ đâu và học gì dễ hiểu dễ thực hành nhất. Bài viết này sẽ chia sẻ đến bạn những thẻ HTML đơn giản và […]
Ngôn ngữ HTML là gì? Tìm hiểu cấu trúc HTML

Ngôn ngữ HTML là gì? Tìm hiểu cấu trúc HTML

Cấu trúc HTML mạch lạc, khoa học giúp cho website hoạt động ổn định. Hiện nay, mỗi website đều được xây dựng với những cấu trúc khác nhau. Vậy khi phát triển website, lập trình viên nên xây dựng cấu trúc ngôn ngữ web HTML như thế nào? Got It sẽ chia sẻ những thông […]
Giới thiệu về HTML – ngôn ngữ web phổ biến nhất hiện nay

Giới thiệu về HTML – ngôn ngữ web phổ biến nhất hiện nay

Những thông tin giới thiệu về HTML sẽ giúp những người mới học lập trình trau dồi kiến thức cơ bản. Hiện nay có rất nhiều loại ngôn ngữ web mới với những ưu điểm nổi bật, nhưng HTML vẫn là loại ngôn ngữ được nhiều lập trình viên ưu tiên sử dụng. Cùng tìm […]

Thẻ style trong HTML là gì? Các thuộc tính trong thẻ style

Style trong HTML là một thuộc tính đặc biệt dùng để khai báo các định dạng cho thẻ HTML như màu sắc, font chữ, cỡ chữ, màu nền,… Bài viết này sẽ chia sẻ những kiến thức cơ bản về thẻ style và một số thuộc tính của thẻ này.    Mục lục1. Thẻ style trong […]

Stylesheet là gì? Chức năng và lợi ích của Stylesheet

Trước đây, khi mỗi trang web được hiển thị, người ta không thể thay đổi bất cứ thứ gì trên đó. Bài viết này sẽ chia sẻ kiến thức Stylesheet là gì và khả năng hỗ trợ của nó trong HTML động nhằm thực hiện những thay đổi trên trang. Mục lục1. Khái niệm Stylesheet […]
Hướng dẫn cách chèn thẻ video trong HTML

Hướng dẫn cách chèn thẻ video trong HTML

Thẻ video trong HTML là câu lệnh được sử dụng để chèn “trình xem phim” cho một website nào đó. Dòng lệnh này không quá khó để thực hiện. Tuy nhiên, chúng vẫn cần độ chính xác cao nhằm tối ưu hóa website của bạn một cách tốt nhất. Cách chèn thẻ video trong HTML […]