HTML là ngôn ngữ đánh dấu siêu văn bản quyết định trang web của bạn sẽ được hiển thị như thế nào trong một trình duyệt. Đây là kiến thức cơ bản mà tất cả những ai học về thiết kế web hoặc lập trình web đều phải biết. Dưới đây là chi tiết các thẻ trong HTML bạn cần biết để để trình duyệt có thể hiểu và hiển thị.
Các thẻ trong HTML từ đơn giản đến phức tạp
Cấu trúc của HTML
Trước khi tìm hiểu về các thẻ trong HTML, một người lập trình hoặc thiết kế web cần nắm được bố cục cơ bản của một tài liệu HTML. Thông thường bố cục sẽ gồm có 3 phần:
- Phần html: Đây là phần bắt buộc để xác định một tài liệu HTML và thường bắt đầu bằng thẻ mở html <html> , kết thúc bằng thẻ đóng html </html>. Thẻ này có công dụng thông báo cho trình duyệt nhận biết tài liệu HTML là phần nội dung giữa 2 thẻ này.
- Phần tiêu đề: Phần tiêu đề bắt đầu bằng thẻ <head> và kết thúc bởi thẻ </head>. Phần này chứa tiêu đề mà được hiển thị trên thanh điều hướng của trang Web. Tiêu đề nằm trong thẻ title, bắt đầu bằng thẻ <title> và kết thúc là thẻ </title>.
Tiêu đề là phần khá quan trọng. Khi người dùng tìm kiếm thông tin, tiêu đề của trang Web cung cấp từ khóa chính yếu cho việc tìm kiếm.
- Phần thân: phần này nằm sau phần tiêu đề. Phầ̀n thân bao gồm văn bản, hình ảnh và các liên kết mà bạn muốn hiển thị trên trang web của mình. Phần thân bắt đầu bằng thẻ <body> và kết thúc bằng thẻ </body>
Cấu trúc của tài liệu HTML
Tổng hợp các thẻ trong HTML
Như ví dụ trên về cấu trúc tài liệu HTML, có thể thấy trong tài liệu xuất hiện thẻ <P>. Đây là thẻ được sử dụng để trình bày một đoạn. Và thông thường trong một tài liệu HTML để việc hiển thị cũng như bố cục website được tối ưu nhất cần kết hợp nhiều thẻ với nhau. Dưới đây là tổng hợp các thẻ trong HTML phổ biến nhất.
Thẻ đoạn
Thông thường tất cả các bài viết đều được chia làm các đoạn khác nhau. Mỗi đoạn sẽ chứa những nội dung tương tự và giúp bố cục bài luận, bài báo logic, dễ đọc, dễ hiểu và dễ nhìn hơn.
Với tài liệu HTML cũng vậy, các phần nội dung sẽ được nhóm thành các đoạn với nhau. Để thực hiện điều này cần sử dụng thẻ <P> để đánh dấu. Như vậy trình duyệt mới có thể hiểu và biết đâu là điểm đánh dấu sự bắt đầu của một đoạn mới.
Các thẻ ngắt
Thẻ ngắt <br> được sử dụng để bổ sung ký tự xuống dòng tại vị trí mà thẻ đó được đặt. Đây là phần tử không thể thiếu để trình duyệt có thể hiểu được việc ngắt dòng trong tài liệu HTML.
Thẻ ngắt - Các thẻ trong HTML phổ biến
Thẻ <br> thuộc các thẻ trong HTML cơ bản nhất. Chúng có thể có 1 hoặc nhiều thuộc tính khác nhau. Nó là những tính chất quyết định việc trình duyệt định dạng và hiển thị. Mỗi thuộc tính và giá trị thuộc tính sẽ được đặt trong dấu “”.
Đặc biệt trong số đó có thuộc tính align. Thuộc tính này có tác dụng xác định lề cho tất cả các phần tử thuộc tài liệu HTML:
- Left: căn lề trái
- Center: căn giữa
- Right: Căn lề phải
- Justify: căn đều hai bên
Thẻ meta
Thẻ meta là thẻ khá quan trọng với tài liệu HTML vì có ảnh hưởng đến search engine. Thẻ này cung cấp metadata cho trang web mặc dù phần này không hiển thị trên trang của bạn.
Thẻ meta có tác động trực tiếp đến search engine của web
Thẻ meta có chứa từ khoá và mô tả tổng quan về nội dung tài liệu. Thẻ này được dùng cho lần sửa chữa cuối cùng và một số thông tin khác. Các dữ liệu metadata chủ yếu phục vụ search engine, từ khóa hoặc các web service khác.
Thẻ Headings
Đây là một trong các thẻ trong HTML quan trọng bởi nó quyết định đến việc hiển thị tiêu đề của bài viết trên website. Phần nội dung này thường được hiển thị to đậm và nổi bật hơn so với các phần còn lại của văn bản.
Thẻ tiêu đề co các loại từ H1 đến H6 hỗ trợ phân tách bố cục tài liệu HTML rõ ràng. Thẻ H1 là thẻ quan trọng nhất dành cho tiêu đề chính của bài và mức quan trọng sẽ giảm dần đến h6
Thẻ khối <span>, <div>
Khi muốn gộp các đoạn nội dung thành các khối thông tin logic, bạn cần sử dụng đến thẻ <span> và thẻ <div>. Hai thẻ này được sử dụng để nhóm nội dung lại với nhau tạo các lớp, bố cục website.
Thẻ <span> dùng để định nghĩa nội dung trong 1 dòng và thẻ <div> dùng để định nghĩa nội dung trong 1 khối xác định. Phần nội dung này thường có liên quan đến nhau.
Ví dụ về cú pháp sử dụng thẻ <<span> và <<div>
Thẻ ảnh
Thẻ ảnh - thẻ IMG thuộc các thẻ trong HTML được sử dụng để chèn hình ảnh. Ảnh sẽ được chèn và hiển thị vào vị trí đặt thẻ. Nội dung của loại thẻ này được xác định bằng thuộc tính SRC <IMG SRC=”URL”>.
Ở cú pháp này, SRC là thuộc tính nguồn, URL là giá trị dùng để chỉ vị trí chính xác của file ảnh.
Bên canh đó, thuộc tính ALIGN cũng được sử dụng để điều chỉnh canh lề ảnh với cú pháp <IMG ALIGN=position SRC=”PICTURE.GIF”>
Cách dùng thẻ IMG trong HTML
Trên đây là thông tin chi tiết về các thẻ trong HTML mà bạn không nên bỏ qua. Trang web của bạn có được hiển thị tốt nhất trong các trình duyệt hay không phụ thuộc rất lớn vào tài liệu HTML. Hy vọng bài viết sẽ giúp bạn có thể hiểu và sử dụng được các thẻ trong HTML tốt hơn.