search

Cấu trúc các the trong html

Ngày đăng: 02/10/2022
Trả lời: 0
Lượt xem: 124

  • Trang chủ
  • Hướng dẫn học
  • Hướng dẫn học HTML/HTML5
  • Cấu trúc cơ bản của trang HTML

Show

Cấu trúc cơ bản của trang HTML

Cấu trúc cơ bản của trang HTML có dạng như sau, thường gồm 3 phần:

  • : Phần khai báo chuẩn của html hay xhtml.
  • : Phần khai báo ban đầu, khai báo về meta, title, css, javascript…
  • : Phần chứa nội dung của trang web, nơi hiển thị nội dung.

Cấu trúc cơ bản




Tiêu đề trang web


...Phần thân viết ở đây...

Cấu trúc cơ bản của trang web

Mỗi trang web đều có cách thể hiện cấu trúc khác nhau, có trang 1 cột, có trang 2 và cũng có trang chứa nhiều cột, bên dưới đây chúng ta tham khảo một trang đơn giản sử dụng 2 cột để layout.

  • Phần đầu: header, có thể chứa logo, câu slogan, các liên kết, các banner liên kết, các button, đoạn flash, hoặc các form ngắn như form tìm kiếm,...
  • Phần liên kết toàn cục: global navigation, dùng để chứa các liên kết đến những trang quan trọng trong toàn bộ trang, trong phần này có thể chứa thêm các liên kết con (sub navigation).
  • Phần thân của trang: page body, phần này chứa phần nội dung chính (content) và phần nội dung phụ (sidebar).
  • Phần nội dung chính: content, phần này chứa nội dung chính cần thể hiện cho người dùng xem.
  • Phần nội dung phụ: sidebar, phần này có thể chứa liên kết phụ của từng trang (local navigation), hoặc các banner chứa liên kết liên quan, hoặc có thể dùng để chứa các liên kết quảng cáo,...
  • Phần cuối trang web: footer, phần này thường chứa phần liên hệ như: tên công ty, địa chỉ, số điện thoại, mail liên hệ,... và đặc biệt là copyright, hoặc có thể chứa các liên kết toàn trang, các banner liên kết,...

Cấu trúc các the trong html

Bài viết được sự cho phép của tác giả Kien Dang Chung

Quá trình học lập trình thường khá dài và hầu hết mọi người đều muốn nhanh chóng bước vào các bài lý thuyết lập trình và thực hành các ví dụ thực tế. Những bài viết đầu tiên một khóa học lập trình web chủ yếu giới thiệu các thông tin xoay quanh ngôn ngữ, các thuật ngữ liên quan tuy nhiên cũng rất quan trọng bởi khi bạn đã nắm được HTML5 là gì? thì việc học các cấu trúc, các thẻ html chỉ là công cụ để xây dựng website mà thôi. Có rất nhiều bạn đã vào nghề lập trình web rất lâu nhưng không hiểu rõ bản chất HTML là gì hay còn mơ hồ về siêu văn bản, tại sao lại phải sử dụng HTML?… mà chỉ nhăm nhăm muốn code ngay. Những kiến thức cơ bản là nền tảng để phát triển tư duy công việc sau này, bạn không chỉ là một người lập trình (coder) mà biết đâu bạn có thể trở thành một người nghiên cứu, một người phát triển những ngôn ngữ, những công nghệ mới? Dài dòng một chút những chia sẻ về nghề và giờ là lúc chúng ta cùng đi vào tìm hiểu kiến thức HTML cơ bản. Theo truyền thống, một ví dụ HTML đầu tiên – Chào mừng đến với khóa học HTML cơ bản, một ví dụ đơn giản cho cái nhìn đầu tiên về HTML.

1. Ví dụ HTML đầu tiên – Chào mừng đến với khóa học HTML cơ bản

Trong suốt khóa học HTML cơ bản chúng ta sẽ sử dụng hai công cụ để tiện demo và show code cho các bạn là Sublime Text và JsFiddle. Ok, bạn hãy mở Sublime Text tạo một file hello-world.html với nội dung sau:

Cấu trúc các the trong html


<html>
  <head>
    <meta charset=utf-8>
    <title>Ví dụ HTML đầu tiên - Chào mừng đến với Khóa học HTML cơ bảntitle>
  head>
  <body>
    <h2 class="text-success">Khóa học HTML cơ bảnh2>
    <p>Chào mừng bạn đến với khóa học HTML cơ bản từ website allaravel.com, chúng ta sẽ cùng nhau tìm hiểu từ những vấn đề cơ bản nhất của HTML và những gì mới nhất trong phiên bản HTML5.p>
  body>
html>

Kết quả khi chạy file hello-world.html chúng ta được như sau:

[jsfiddle url=”https://jsfiddle.net/allaravel/808ahvjg/” height=”200px” include=”result,html,js” font-color=”39464E” menu-background-color=”FFFFFF” code-background-color=”f3f5f6″ accent-color=”1C90F3″]

Chú ý, phần kết quả thay vì chụp lại nội dung hiển thị trên trình duyệt thì chúng ta sẽ mặc định dùng JsFiddle để xem được nhanh chóng và trực quan.

Cấu trúc các the trong html

Trong ví dụ HTML đầu tiên này, chúng ta tạm coi như đã biết code HTML, các phần tiếp theo sẽ diễn giải những gì đã sử dụng. Mã HTML ở trên khá nhiều nhưng khi xem trên trình duyệt, nội dung lại rất ít, còn toàn văn bản vì HTML là ngôn ngữ đánh dấu siêu văn bản, nó cho trình duyệt biết chỗ nào phải hiển thị như là tiêu đề (thẻ 

) và chỗ nào là đoạn văn mô tả (thẻ 

).

2. Các khái niệm HTML cơ bản

Trong ví dụ HTML đầu tiên nếu bạn mới bắt đầu học HTML cơ bản, bạn sẽ thấy hơi hoa mắt chút nhưng đảm bảo rằng sau khi được giới thiệu các khái niệm HTML cơ bản, bạn sẽ làm chủ được đoạn code này dễ dàng.

Cấu trúc các the trong html

2.1 HTML element vs thẻ HTML

Để ý trong ví dụ HTML đầu tiên, có rất nhiều các chuỗi ký tự được mở đầu bằng < hoặc  và kết thúc bằng >. Mỗi chuỗi ký tự đó được gọi là thẻ HTML, ví dụ </code>, <code><h2></code>… chúng ta gọi đây là thẻ title hoặc thẻ h2. HTML element là các thành phần của HTML, ví dụ <code><h2>Khóa học HTML cơ bản</h2></code> là thành phần h2 của HTML, nó được bắt đầu bằng thẻ mở <code><h2></code> và kết thúc bằng thẻ đóng <code></h2></code>. Vậy mỗi thành phần HTML sẽ bao gồm:</p><div style="width:100%; margin:20px auto; display:block"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4987931798153631" data-ad-slot="8587332220"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></p><ul><li>Thẻ mở bắt đầu bằng <code><</code> và kết thúc bằng <code>></code>, ví dụ <code><h2></code>, <code><p></code>.</li><li>Thẻ đóng bắt đầu bằng <code></</code> và kết thúc bằng <code>></code>, ví dụ <code></h2></code>, <code></p></code>.</li></ul><p>Nội dung giữa thẻ mở và thẻ đóng của một HTML element sẽ là nội dung được hiển thị trên trình duyệt, thẻ mở và thẻ đóng sẽ “đánh dấu” (markup) để trình duyệt hiểu được cụm từ “Khóa học HTML cơ bản” là tiêu đề loại lớn nhất (h2 – Heading 1).</p><p>Trong thực tế, chúng ta cũng không cần quá phân biệt HTML element với HTML tag (thẻ HTML) mà có thể gọi chung là thẻ h2, thẻ p, thẻ body… chúng ta thống nhất trong suốt Khóa học HTML cơ bản, khi nói đến thẻ HTML chúng ta coi đó là HTML element.</p><p>Như vậy trong ví dụ trên chúng ta có các thẻ HTML là html, head, title, meta, body, h2, p.</p><h3 id="2-2-thuoc-tinh-cua-the-html">2.2 Thuộc tính của thẻ html</h3><p>Trong thẻ <code><h2 class=”text-success”>Khóa học HTML cơ bản</h2></code>, chuỗi class=”text-success” là thuộc tính của thẻ HTML, nó cung cấp thông tin thêm cho thẻ HTML. Ở đây có thể có nhiều các thẻ h2 và chúng ta phân biệt các thẻ này bằng thuộc tính class, tức là các thẻ h2 có thuộc tính class là text-success sẽ được nhóm chung vào một nhóm để có thể tô màu, tăng giảm kích thước chữ, chọn font chữ sau này.</p><p>Thuộc tính của một thẻ HTML có những tính chất như sau:</p><ul><li>Tất cả các thẻ HTML đều có có thể các thuộc tính.</li><li>Các thuộc tính cung cấp thêm các thông tin cho thẻ HTML.</li><li>Các thuộc tính luôn được đưa vào thẻ mở trong thẻ HTML.</li><li>Thuộc tính luôn đi theo cặp tên thuộc tính/giá trị thuộc tính, ví dụ class=”text-success”.</li></ul><p>Thuộc tính class của thẻ h2 trong ví dụ trên chưa thực sự rõ ý nghĩa sử dụng do chúng ta chưa sử dụng đến thẻ này, chúng ta cùng xem một số ví dụ tiếp theo bạn sẽ hiểu rõ hơn thuộc tính trong HTML sử dụng làm gì?</p><p>Ví dụ 1: thuộc tính src của thẻ  giúp chỉ rõ đường dẫn đến ảnh cần hiển thị</p><pre><code><div class="imgBox"><img alt="Cấu trúc các the trong html" data-orgimg="https://sg.cdnki.com/cau-truc-cac-the-trong-html---cHVibGljL25ld3MvYW5oLWRlcC5qcGc=.webp" ></img></div></pre><p>Ví dụ 2: thuộc tính style giúp “trang điểm” cho thẻ HTML, ví dụ này chúng ta sẽ tô màu đỏ cho thẻ h2</p> <pre><code><span><span><</span>h2<span><span> style</span><span>="</span><span><span>color</span><span>:</span>red</span><span>"</span></span><span>></span></span>Khóa học HTML căn bản<span><span></</span>h2<span>></span></span></code></pre><p>Như vậy bạn đã nắm được một số khái niệm căn bản trong HTML và giờ là lúc xem lại code của ví dụ HTML đầu tiên, nó đã bớt phức tạp hơn. Trong đầu bạn hiện lại có những câu hỏi tiếp theo, các thẻ h2, p thì rõ ý nghĩa của nó rồi, còn lại một đống thẻ HTML khác để làm gì? Khoan đi vào chi tiết, bạn chỉ cần nhớ rằng, đây là cấu trúc chung của một trang HTML.</p><pre><code><span><!DOCTYPE html></span> <span><span><</span>html<span>></span></span> <span><span><</span>head<span>></span></span> <span><span><</span>meta <span>charset</span><span><span>=</span>utf-8</span><span>></span></span> <span><span><</span>title<span>></span></span>Tiêu đề của trang<span><span></</span>title<span>></span></span> <span><span></</span>head<span>></span></span> <span><span><</span>body<span>></span></span> <span><span></</span>body<span>></span></span> <span><span></</span>html<span>></span></span></code></pre><p>Đầu tiên, trước khi khai báo các thẻ khác trong HTML chúng ta cần khai báo dạng tài liệu bằng thẻ <code><!DOCTYPE></code>, cách khai báo này là khác nhau cho các phiên bản HTML.</p><p>Trong HTML4 chúng ta khai báo nội dung tiếp theo viết theo tiêu chuẩn HTML4 bằng cách đưa cú pháp sau vào dòng đầu tiên của mã nguồn:</p><pre><code><span><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></span></code></pre><p>Với HTML5, cách khai báo đơn giản hơn do HTML5 không còn dựa trên SGML nên không phải khai báo DTD:</p><pre><code><span><!DOCTYPE html></span></code></pre><p>Tiếp theo, toàn bộ nội dung trong thẻ <code><htm></code> chính là nội dung siêu văn bản. Trong nội dung này chúng ta nhìn bố cục sẽ có hai phần:</p><ul><li>Phần đầu được khai báo bằng thẻ <code><head></code>. Trong phần này, chúng ta có thể khai báo một số vấn đề như: <ul><li>Tiêu đề của văn bản</li><li>Văn bản sử dụng bảng mã ký tự nào</li><li>Các thông tin thêm cho văn bản chính (metadata) như thông tin tác giả, mô tả bài viết, từ khóa bài viết…</li><li>Các file css, javascript có thể chèn vào tại đây.</li></ul></li><li>Phần nội dung được khai báo bằng thẻ <code><body></code>, đây là phần sẽ hiển thị trên trình duyệt.</li></ul><p>Về bố cục một trang HTML bạn có thể nắm được như vậy, khi viết một trang HTML mới, bạn có thể sao chép cấu trúc trang HTML cơ bản này. Tiếp theo chúng ta cùng tìm hiểu cụ thể một số thẻ HTML có trong bố cục.</p><p><strong>Thẻ title</strong></p><p>Xác định tiêu đề của văn bản, tiêu đề này sẽ được hiển thị trong phần tab của trình duyệt giúp chúng ta nhanh chóng biết được siêu văn bản (trang web) nào đang được mở khi một trình duyệt mở nhiều trang một lúc.</p><p><div class="imgBox"><img alt="Cấu trúc các the trong html" data-orgimg="https://sg.cdnki.com/cau-truc-cac-the-trong-html---aHR0cHM6Ly9hbGxhcmF2ZWwuY29tL3N0b3JhZ2UvYXBwL21lZGlhL3VwbG9hZHMvMjAxOC8wNS90aGUtdGl0bGUtaHRtbC5qcGc=.webp" ></img></div></p><p><strong>Thẻ meta</strong></p><p>Định nghĩa các thông tin thêm (metadata) cho tài liệu, các thông tin này bao gồm thông tin về tác giả, thông tin mô tả nội dung, thông tin từ khóa… có thể nói rằng thẻ meta mô tả thông tin của thông tin. Các thông tin của thẻ meta không hiển thị trên trình duyệt nhưng các bộ máy khác có thể sử dụng chúng, ví dụ bộ máy tìm kiếm Google, Bing, Facebook sẽ sử dụng các thông tin từ thẻ meta để phân loại nội dung trang web. Có duy nhất thẻ meta nhưng lại khai báo được nhiều các thông tin về metadata là do chúng ta có thể sử dụng các thuộc tính khác nhau:</p><pre><code> <span><span><</span>meta <span>charset</span><span><span>=</span><span>"</span>UTF-8<span>"</span></span><span>></span></span> <span><span><</span>meta <span>name</span><span><span>=</span><span>"</span>description<span>"</span></span> <span>content</span><span><span>=</span><span>"</span>HTML5 là phiên bản mới nhất của ngôn ngữ HTML, những bài viết trong khóa học HTML5 cơ bản giúp bạn xây dựng website nhanh chóng.<span>"</span></span><span>></span></span> <span><span><</span>meta <span>name</span><span><span>=</span><span>"</span>keywords<span>"</span></span> <span>content</span><span><span>=</span><span>"</span>HTML5,khóa học HTML,HTML cơ bản<span>"</span></span><span>></span></span> <span><span><</span>meta <span>name</span><span><span>=</span><span>"</span>author<span>"</span></span> <span>content</span><span><span>=</span><span>"</span>FirebirD[Kiên Đặng]<span>"</span></span><span>></span></span> <span><span><</span>meta <span>name</span><span><span>=</span><span>"</span>viewport<span>"</span></span> <span>content</span><span><span>=</span><span>"</span>width<span>=</span>device-width, initial-scale<span>=</span>1.0<span>"</span></span><span>></span></span></code></pre><p>Thẻ meta đầu tiên thiết lập bảng mã sử dụng, UTF-8 (8-bit Unicode Transformation Format – Định dạng chuyển đổi Unicode 8-bit) là bộ mã hóa ký tự dành cho Unicode, nó có thể tương thích ngược với bảng mã ASCII. UTF-8 là bộ mã phổ biến và thông dụng cho các nội dung điện tử như các file tài liệu, thư điện tử, trang web và các phần mềm xử lý văn bản. Với phiên bản HTML4 trở xuống, để thiết lập bảng mã ký tự phải sử dụng thuộc tính http-equiv kết hợp với content.</p><pre><code><span><span><</span>meta <span>http-equiv</span><span><span>=</span><span>"</span>content-type<span>"</span></span> <span>content</span><span><span>=</span><span>"</span>text/html; charset<span>=</span>UTF-8<span>"</span></span><span>></span></span></code></pre><p>Ba thẻ meta tiếp theo mô tả thông tin về trang web, nó giúp các bộ máy tìm kiếm như Google, Bing phân loại nội dung, các thẻ này tuy không hiển thị nhưng cực kỳ quan trọng khi bạn muốn website của mình có thứ hạng cao trong kết quả tìm kiếm của Google.</p><p>Thẻ meta cuối cùng cho phép các nhà thiết kế điều khiển được khung hiển thị, tính năng này chỉ có ở HTML5. Khung hiển thị là vùng có thể nhìn thấy của người dùng trên một trang web, nó phụ thuộc vào kích thước màn hình các thiết bị khác nhau, ví dụ các thiết bị di động thông minh hiện rất phổ biến nhưng màn hình nó khá nhỏ nên cần trình bày lại sao cho đọc được nội dung dễ dàng.</p><h2 id="4-thanh-phan-the-html-co-ngu-nghia">4. Thành phần thẻ HTML có ngữ nghĩa</h2> <p>Các thẻ HTML được chia ra thành hai loại:</p><ul><li>Semantic element là các thẻ có ngữ nghĩa, ví dụ thẻ <code><form></code>, <code><table></code>, <code><div class="imgBox"><img alt="Cấu trúc các the trong html" data-orgimg="https://sg.cdnki.com/cau-truc-cac-the-trong-html---aHR0cHM6Ly9hbGxhcmF2ZWwuY29tL3N0b3JhZ2UvYXBwL21lZGlhL3VwbG9hZHMvMjAxOC8wNS9jYXUtdHJ1Yy10cmFuZy1odG1sLXN1LWR1bmctZGl2LmpwZw==.webp" ></img></div></p><pre><code><span><span><</span>div <span>id</span><span><span>=</span><span>"</span>header<span>"</span></span><span>></span></span> <span><span><</span>h2<span>></span></span>Khóa học HTML5 cơ bản<span><span></</span>h2<span>></span></span> <span><span></</span>div<span>></span></span> <span><span><</span>div <span>id</span><span><span>=</span><span>"</span>sidebar<span>"</span></span><span>></span></span> <span><span><</span>h2<span>></span></span>Menu<span><span></</span>h2<span>></span></span> <span><span><</span>ul<span>></span></span> <span><span><</span>li<span>></span></span><span><span><</span>a <span>href</span><span><span>=</span><span>"</span>html5-introduction.html<span>"</span></span><span>></span></span>Chương I: Giới thiệu HTML5<span><span></</span>a<span>></span></span><span><span></</span>li<span>></span></span> <span><span><</span>li<span>></span></span><span><span><</span>a <span>href</span><span><span>=</span><span>"</span>html5-contruction.html<span>"</span></span><span>></span></span>Chương II: Cấu trúc trang HTML<span><span></</span>a<span>></span></span><span><span></</span>li<span>></span></span> <span><span><</span>li<span>></span></span><span><span><</span>a <span>href</span><span><span>=</span><span>"</span>html5-form.html<span>"</span></span><span>></span></span>Chương III: Xây dựng form nhập liệu<span><span></</span>a<span>></span></span><span><span></</span>li<span>></span></span> <span><span></</span>ul<span>></span></span> <span><span></</span>div<span>></span></span> <span><span><</span>div <span>class</span><span><span>=</span><span>"</span>post<span>"</span></span><span>></span></span> <span><span><</span>h2<span>></span></span>HTML5 là gì?<span><span></</span>h2<span>></span></span> <span><span><</span>p<span>></span></span>Ngôn ngữ HTML5 giúp tạo ra các trang web một cách nhanh chóng đáp ứng được các nhu cầu thực tế.<span><span></</span>p<span>></span></span> <span><span></</span>div<span>></span></span> <span><span><</span>div <span>class</span><span><span>=</span><span>"</span>post<span>"</span></span><span>></span></span> <span><span><</span>h2<span>></span></span>Cấu trúc trang HTML cơ bản<span><span></</span>h2<span>></span></span> <span><span><</span>p<span>></span></span>HTML5 đã có những cải tiến thay đổi cách cấu trúc trang HTML bằng semantic element.<span><span></</span>p<span>></span></span> <span><span></</span>div<span>></span></span> <span><span><</span>div <span>id</span><span><span>=</span><span>"</span>footer<span>"</span></span><span>></span></span> <span><span><</span>p<span>></span></span><span><span><</span>small<span>></span></span> Bản quyền thuộc về Allaravel.com. 2018<span><span></</span>small<span>></span></span><span><span></</span>p<span>></span></span> <span><span></</span>div<span>></span></span></code></pre><p>Với việc thêm vào các thẻ HTML có ngữ nghĩa mới trong HTML5, cấu trúc trang HTML đã thay đổi đáng kể:</p><p><div class="imgBox"><img alt="Cấu trúc các the trong html" data-orgimg="https://sg.cdnki.com/cau-truc-cac-the-trong-html---aHR0cHM6Ly9hbGxhcmF2ZWwuY29tL3N0b3JhZ2UvYXBwL21lZGlhL3VwbG9hZHMvMjAxOC8wNS9jYXUtdHJ1Yy10cmFuZy1odG1sLXN1LWR1bmctdGhlLWh0bWw1LWNvLW5ndS1uZ2hpYS1tb2kuanBn.webp" ></img></div></p><p>Mã HTML cũng có những thay đổi</p><pre><code><span><span><</span>header<span>></span></span> <span><span><</span>h2<span>></span></span>Khóa học HTML5 cơ bản<span><span></</span>h2<span>></span></span> <span><span></</span>header<span>></span></span> <span><span><</span>nav<span>></span></span> <span><span><</span>h2<span>></span></span>Menu<span><span></</span>h2<span>></span></span> <span><span><</span>ul<span>></span></span> <span><span><</span>li<span>></span></span><span><span><</span>a <span>href</span><span><span>=</span><span>"</span>html5-introduction.html<span>"</span></span><span>></span></span>Chương I: Giới thiệu HTML5<span><span></</span>a<span>></span></span><span><span></</span>li<span>></span></span> <span><span><</span>li<span>></span></span><span><span><</span>a <span>href</span><span><span>=</span><span>"</span>html5-contruction.html<span>"</span></span><span>></span></span>Chương II: Cấu trúc trang HTML<span><span></</span>a<span>></span></span><span><span></</span>li<span>></span></span> <span><span><</span>li<span>></span></span><span><span><</span>a <span>href</span><span><span>=</span><span>"</span>html5-form.html<span>"</span></span><span>></span></span>Chương III: Xây dựng form nhập liệu<span><span></</span>a<span>></span></span><span><span></</span>li<span>></span></span> <span><span></</span>ul<span>></span></span> <span><span></</span>nav<span>></span></span> <span><span><</span>article<span>></span></span> <span><span><</span>h2<span>></span></span>HTML5 là gì?<span><span></</span>h2<span>></span></span> <span><span><</span>p<span>></span></span>Ngôn ngữ HTML5 giúp tạo ra các trang web một cách nhanh chóng đáp ứng được các nhu cầu thực tế.<span><span></</span>p<span>></span></span> <span><span></</span>article<span>></span></span> <span><span><</span>article<span>></span></span> <span><span><</span>h2<span>></span></span>Cấu trúc trang HTML cơ bản<span><span></</span>h2<span>></span></span> <span><span><</span>p<span>></span></span>HTML5 đã có những cải tiến thay đổi cách cấu trúc trang HTML bằng semantic element.<span><span></</span>p<span>></span></span> <span><span></</span>article<span>></span></span> <span><span><</span>footer<span>></span></span> <span><span><</span>p<span>></span></span><span><span><</span>small<span>></span></span> Bản quyền thuộc về Allaravel.com. 2018<span><span></</span>small<span>></span></span><span><span></</span>p<span>></span></span> <span><span></</span>footer<span>></span></span></code></pre><h3 id="4-2-trinh-duyet-khong-tuong-thich-voi-html5">4.2 Trình duyệt không tương thích với HTML5</h3><p>Thật may là các thẻ HTML có ngữ nghĩa trong HTML5 được hỗ trợ diện rộng trên các trình duyệt web hiện đại, rất khó để có thể tìm thấy các phiên bản Chrome, Firefox, Safari hoặc Opera không hỗ trợ. Nhưng không phải là không có những ngoại lệ, ví dụ các phiên bản Internet Explorer trước IE9 là gặp vấn đề với HTML5.</p><p>Khi một trình duyệt không phát hiện ra các thẻ HTML mới, nó sẽ xử lý các thẻ này như một inline element và không hiển thị chúng như các khối (block), để khắc phục vấn đề này, bạn cần thêm một ít code CSS vào:</p><pre><code><span>article, aside, figure, figcaption, footer, header, main, nav, section, summary </span><span>{</span> <span>display</span><span>:</span> block<span>;</span> <span>}</span></code></pre><p>Code CSS này không ảnh hưởng gì với các trình duyệt có thể nhận diện được thẻ HTML5. Kỹ thuật này là đủ để giải quyết vấn đề tương thích với hầu hết các trình duyệt, tuy nhiên với IE8 hoặc phiên bản thấp hơn thì có một thách thức khác: Các trình duyệt này từ chối áp dụng định dạng CSS cho các thẻ HTML mà chúng không thể nhận ra. Với vấn đề này chúng ta xử lý bằng cách đưa vào một đoạn mã Javascript giúp IE có thể nhận ra và style các thẻ HTML:</p><pre><code><span><span><span><</span>script<span>></span></span> document<span>.</span><span>createElement</span><span>(</span>‘header’<span>)</span><span>;</span> document<span>.</span><span>createElement</span><span>(</span>‘nav’<span>)</span><span>;</span> document<span>.</span><span>createElement</span><span>(</span>‘article’<span>)</span><span>;</span> document<span>.</span><span>createElement</span><span>(</span>‘footer’<span>)</span><span>;</span> <span><span></</span>script<span>></span></span></span></code></pre><p>Nhóm phát triển Google cũng đưa ra một giải pháp riêng tổng thể hơn với một thư viện Javascript giúp cho mọi trình duyệt không hỗ trợ HTML5 có thể hoạt động được.</p><pre><code><span><span><</span>head<span>></span></span> <span><!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--></span> <span><span></</span>head<span>></span></span></code></pre><h2 id="5-cac-the-html-moi-trong-html5">5. Các thẻ HTML mới trong HTML5</h2><h3 id="5-1-the-html5">5.1 Thẻ HTML5 `</h3><p>Thẻ <code><header></code> xác định tiêu đề cho một trang hoặc một phần của trang, thẻ được sử dụng như một “khung chứa” cho các nội dung giới thiệu hoặc có thể bao gồm cả các điều hướng trang. Thẻ <code><header></code> không bắt buộc phải có trong trang và có thể có nhiều thẻ <code><header></code> trong một trang.</p><p>Trong hầu hết các trang web, thành phần đầu tiên thường là tiêu đề, nó có thể chứa tiêu đề của website, hình ảnh logo, các liên kết đến trang chủ… Thẻ <code><header></code> có thể chứa các thẻ tiêu đề từ h2 đến h6 hoặc một thẻ <code><hgroup></code> để nhóm các tiêu đề ở các mức khác nhau nhưng không bắt buộc. Thực tế khi xây dựng website, thành phần <code><header></code> có thể được sử dụng để tạo ra bảng nội dung, form tìm kiếm, phần logo trang…</p><pre><code><span><span><</span>header<span>></span></span> <span><span><</span>a <span>href</span><span><span>=</span><span>"</span>/<span>"</span></span><span>></span></span><span><span><</span>img <span>src</span><span><span>=</span>logo.png</span> <span>alt</span><span><span>=</span><span>"</span>Trang chủ<span>"</span></span><span>></span></span><span><span></</span>a<span>></span></span> <span><span><</span>h2<span>></span></span>Khóa học HTML5 cơ bản<span><span></</span>h2<span>></span></span> <span><span></</span>header<span>></span></span></code></pre><p>Hoặc bạn có thể sử dụng <code><hgroup></code> để nhóm các tiêu đề với nhau:</p><pre><code><span><span><</span>header<span>></span></span> <span><span><</span>a <span>href</span><span><span>=</span><span>"</span>/<span>"</span></span><span>></span></span><span><span><</span>img <span>src</span><span><span>=</span>logo.png</span> <span>alt</span><span><span>=</span><span>"</span>Trang chủ<span>"</span></span><span>></span></span><span><span></</span>a<span>></span></span> <span><span><</span>hgroup<span>></span></span> <span><span><</span>h2<span>></span></span>Khóa học HTML5 cơ bản<span><span></</span>h2<span>></span></span> <span><span><</span>h2<span>></span></span>15 bài lý thuyết, có bài tập thực hành, câu hỏi trắc nghiệm.<span><span></</span>h2<span>></span></span> <span><span></</span>hgroup<span>></span></span> <span><span></</span>header<span>></span></span></code></pre><p>Đôi khi tiêu đề cũng có thể chứa các thành phần điều hướng đặc biệt khi thiết kế website kiểu master template có một mẫu cho tất cả các trang. Ví dụ:</p><pre><code><span><span><</span>header<span>></span></span> <span><span><</span>hgroup<span>></span></span> <span><span><</span>h2<span>></span></span>Khóa học HTML5 cơ bản<span><span></</span>h2<span>></span></span> <span><span><</span>h2<span>></span></span>15 bài lý thuyết, có bài tập thực hành, câu hỏi trắc nghiệm.<span><span></</span>h2<span>></span></span> <span><span></</span>hgroup<span>></span></span> <span><span><</span>nav<span>></span></span> <span><span><</span>ul<span>></span></span> <span><span><</span>li<span>></span></span><span><span><</span>a <span>href</span><span><span>=</span><span>"</span>/<span>"</span></span><span>></span></span>Trang chủ<span><span></</span>a<span>></span></span><span><span></</span>li<span>></span></span> <span><span><</span>li<span>></span></span><span><span><</span>a <span>href</span><span><span>=</span><span>"</span>html5-basic.html<span>"</span></span><span>></span></span>HTML5 cơ bản<span><span></</span>a<span>></span></span><span><span></</span>li<span>></span></span> <span><span><</span>li<span>></span></span><span><span><</span>a <span>href</span><span><span>=</span><span>"</span>html5-advance.html<span>"</span></span><span>></span></span>HTML5 nâng cao<span><span></</span>a<span>></span></span><span><span></</span>li<span>></span></span> <span><span></</span>ul<span>></span></span> <span><span></</span>nav<span>></span></span> <span><span></</span>header<span>></span></span></code></pre><p>Chú ý, thẻ <code><nav></code> không bắt buộc phải có trong <code><header></code> và hoàn toàn có thể đưa thẻ này ra khỏi thẻ <code><header></code>. Nó phụ thuộc vào thiết kế bố cục của website, độ lớn các menu điều hướng. Trong ví dụ tiếp theo, chúng ta không thể đưa thẻ</p>vào trong <code><header></code> do thiết kế menu điều hướng theo chiều dọc và nằm ở phần nội dung trang. <p><div class="imgBox"><img alt="Cấu trúc các the trong html" data-orgimg="https://sg.cdnki.com/cau-truc-cac-the-trong-html---aHR0cHM6Ly9hbGxhcmF2ZWwuY29tL3N0b3JhZ2UvYXBwL21lZGlhL3VwbG9hZHMvMjAxOC8wNS9jYXUtdHJ1Yy10cmFuZy1odG1sLXN1LWR1bmctdGhlLWh0bWw1LWNvLW5ndS1uZ2hpYS1tb2kuanBn.webp" ></img></div></p><pre><code><span><span><</span>header<span>></span></span> <span><span><</span>hgroup<span>></span></span> <span><span><</span>h2<span>></span></span>Khóa học HTML5 cơ bản<span><span></</span>h2<span>></span></span> <span><span><</span>h2<span>></span></span>15 bài lý thuyết, có bài tập thực hành, câu hỏi trắc nghiệm.<span><span></</span>h2<span>></span></span> <span><span></</span>hgroup<span>></span></span> <span><span></</span>header<span>></span></span> <span><span><</span>nav<span>></span></span> <span><span><</span>ul<span>></span></span> <span><span><</span>li<span>></span></span><span><span><</span>a <span>href</span><span><span>=</span><span>"</span>/<span>"</span></span><span>></span></span>Trang chủ<span><span></</span>a<span>></span></span><span><span></</span>li<span>></span></span> <span><span><</span>li<span>></span></span><span><span><</span>a <span>href</span><span><span>=</span><span>"</span>html5-basic.html<span>"</span></span><span>></span></span>HTML5 cơ bản<span><span></</span>a<span>></span></span><span><span></</span>li<span>></span></span> <span><span><</span>li<span>></span></span><span><span><</span>a <span>href</span><span><span>=</span><span>"</span>html5-advance.html<span>"</span></span><span>></span></span>HTML5 nâng cao<span><span></</span>a<span>></span></span><span><span></</span>li<span>></span></span> <span><span></</span>ul<span>></span></span> <span><span></</span>nav<span>></span></span></code></pre><p>Như vậy việc sử dụng <code><header></code> là rất tùy thích miễn sao đó đáp ứng được các nguyên tắc của HTML5 và làm cho trang web dễ dàng duyệt nội dung để người dùng có thể biết được sau phần tiêu đề (header) là đến nội dung trang. Trước khi có HTML5, chúng ta thường sử dụng một thẻ <code><h2></code> cho tiêu đề website và sử dụng nhiều thẻ <code><h2></code> cho các thành phần khác của trang.</p><p>Một câu hỏi nữa mà nhiều người băn khoăn và có thể là một lỗi các lập trình viên web hay gặp: Có nên sử dụng nhiều các tiêu đề ở mức 1 trong một trang? Theo các nguyên tắc của HTML thì bạn hoàn toàn có thể sử dụng nhiều tiêu đề mức 1, tuy nhiên các website thông thường chỉ có một tiêu đề mức 1 cho mỗi trang vì nó làm cho dễ dàng hơn trong bố cục chung cả website, ngoài ra các bộ máy tìm kiếm như Google cũng thích điều này và nó giúp cho tập trung vào các truy vấn tìm kiếm. Điều này đúng ngay cả khi sử dụng <code><header></code> kết hợp với các thẻ <code><h2></code> đến <code><h6></code>, đại ý rằng chỉ nên thiết lập một tiêu đề chung cho trang.</p><h3 id="5-2-the-html5-lt-nav-gt-va-the-html5-lt-aside-gt">5.2 Thẻ HTML5 <nav> và thẻ html5 <aside></h3><p>Trong các trang web, phần sidebar chứa rất nhiều thông tin, nó có thể chứa hệ thống menu điều hướng cho website, các thông tin thêm hoặc có thể là các quảng cáo (ví dụ khi kiếm tiền từ quảng cáo Google AdSense). Theo cách thiết kế truyền thống, toàn bộ phần sidebar này sẽ được đưa vào một thẻ <code><div></code> nhưng với HTML5 bạn có thể sử dụng thẻ <code><aside></code> hoặc thẻ <code><nav></code> hoặc cả hai kết hợp với nhau.</p><ul><li>Thẻ <code><aside></code> có điểm giống với thẻ <code><header></code>, một trang có thể có một hoặc nhiều thẻ <code><aside></code> để tạo ra các nội dung được đặt về một bên giống như sidebar.</li><li>Thẻ <code><nav></code> để nhóm các liên kết vào thành hệ thống menu điều hướng. Không phải tất cả các liên kết đều cần đến thẻ <code><nav></code> mà chỉ những phần điều hướng quan trọng, phổ biến trong trang mới đưa vào.</li></ul><p><div class="imgBox"><img alt="Cấu trúc các the trong html" data-orgimg="https://sg.cdnki.com/cau-truc-cac-the-trong-html---aHR0cHM6Ly9hbGxhcmF2ZWwuY29tL3N0b3JhZ2UvYXBwL21lZGlhL3VwbG9hZHMvMjAxOC8wNS9jYXUtdHJ1Yy1zaWRlYmFyLmpwZw==.webp" ></img></div></p><p>Có hai cách thường dùng để cấu trúc sidebar cho một trang web, cách nào cũng được chấp nhận và không có một quy tắc nào cho việc này. Tuy nhiên, thực tế người ta thường sử dụng cách bên phải để cấu trúc thành phần sidebar do thường phần sidebar sẽ chứa nhiều các thông tin khác ví dụ như quảng cáo, các thông tin thêm như bài viết được nhiều người đọc, cũng có thể chứa form nhận thông tin.</p><pre><code><span><span><</span>aside <span>class</span><span><span>=</span><span>"</span>nav-sidebar<span>"</span></span><span>></span></span> <span><span><</span>nav<span>></span></span> <span><span><</span>h2<span>></span></span>Khóa học HTML5 cơ bản<span><span></</span>h2<span>></span></span> <span><span><</span>ul<span>></span></span> <span><span><</span>li<span>></span></span><span><span><</span>a <span>href</span><span><span>=</span><span>"</span>...<span>"</span></span><span>></span></span>Giới thiệu HTML5<span><span></</span>a<span>></span></span><span><span></</span>li<span>></span></span> <span><span><</span>li<span>></span></span><span><span><</span>a <span>href</span><span><span>=</span><span>"</span>...<span>"</span></span><span>></span></span>Các thẻ trong HTML5<span><span></</span>a<span>></span></span><span><span></</span>li<span>></span></span> ... <span><span></</span>ul<span>></span></span> <span><span></</span>nav<span>></span></span> <span><span><</span>section<span>></span></span> <span><span><</span>h2<span>></span></span>Allaravel.com<span><span></</span>h2<span>></span></span> <span><span><</span>p<span>></span></span>Trang web chia sẻ kiến thức công nghệ thông tin như lập trình, thiết kế web, marketing online, kiếm tiền trực tuyến.<span><span></</span>p<span>></span></span> <span><span></</span>section<span>></span></span> <span><span><</span>div<span>></span></span> <span><span><</span>img <span>src</span><span><span>=</span><span>"</span>anh-quang-cao.jpg<span>"</span></span> <span>alt</span><span><span>=</span><span>"</span>[QC] Khóa học Laravel miễn phí<span>"</span></span><span>></span></span> <span><span></</span>div<span>></span></span> <span><span></</span>aside<span>></span></span></code></pre><h3 id="5-3-the-html5-lt-section-gt">5.3 Thẻ HTML5 <section></h3><p>Thẻ <code><section></code> định nghĩa một khúc, đoạn nội dung và thông thường có một tiêu đề. Ví dụ một trang chủ có thể chia thành các phần như giới thiệu, nội dung, thông tin liên hệ.</p><p><div class="imgBox"><img alt="Cấu trúc các the trong html" data-orgimg="https://sg.cdnki.com/cau-truc-cac-the-trong-html---aHR0cHM6Ly9hbGxhcmF2ZWwuY29tL3N0b3JhZ2UvYXBwL21lZGlhL3VwbG9hZHMvMjAxOC8wNS92aS1kdS10aGUtc2VjdGlvbi10cm9uZy10aGlldC1rZS13ZWIuanBn.webp" ></img></div></p><p>Phong cách thiết kế trang web hiện nay thường chia trang thành các khúc ngang, mỗi khúc này sẽ được đưa vào một thẻ <code><section></code>, ví dụ trong hình trên, trang chủ được chia thành các phần như slider để chiếu các ảnh khác, phần giới thiệu, phần sản phẩm, phần tin bài…, mỗi phần này đều có tiêu đề và nội dung.</p><pre><code><span><span><</span>section<span>></span></span> <span><span><</span>header<span>></span></span>Giới thiệu<span><span></</span>header<span>></span></span> <span><span><</span>div<span>></span></span>Nội dung giới thiệu<span><span></</span>div<span>></span></span> <span><span></</span>section<span>></span></span> <span><span><</span>section<span>></span></span> <span><span><</span>header<span>></span></span>Sản phẩm<span><span></</span>header<span>></span></span> <span><span><</span>div<span>></span></span>Nội dung sản phẩm<span><span></</span>div<span>></span></span> <span><span></</span>section<span>></span></span> <span><span><</span>section<span>></span></span> <span><span><</span>header<span>></span></span>Tin tức<span><span></</span>header<span>></span></span> <span><span><</span>div<span>></span></span>Nội dung tin bài<span><span></</span>div<span>></span></span> <span><span></</span>section<span>></span></span></code></pre><p>Khi khai báo các thẻ <code><section></code> có thể kết hợp với thẻ <code><details></code> và <code><summary></code>. Hai thẻ này tạo thành một khối nội dung có thể ẩn hiện nếu trình duyệt hỗ trợ.</p><div style="width:100%; margin:20px auto; display:block"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4987931798153631" data-ad-slot="8587332220"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></p><p>Thẻ HTML5 <code><details></code> sử dụng để thêm các chi tiết mà người dùng có thể tùy chọn xem hoặc ẩn. Thẻ này thường dùng để tạo ra các widget (thành phần của ứng dụng), có thể đóng hoặc mở. Mặc định nội dung trong thẻ <code><details></code> không được hiển thị trừ khi thuộc tính open được thiết lập.</p><p>Thẻ HTML5 <code><summary></code> sử dụng để định nghĩa tiêu đề cho phần detail.</p><pre><code><span><span><</span>details<span>></span></span> <span><span><</span>summary<span>></span></span>Khóa học HTML5 cơ bản.<span><span></</span>summary<span>></span></span> <span><span><</span>p<span>></span></span>Biên soạn: FirebirD [allaravel.com]<span><span></</span>p<span>></span></span> <span><span><</span>p<span>></span></span>Nội dung: Cung cấp Kiến thức cơ bản về HTML kết hợp những tính năng mới trong HTML5.<span><span></</span>p<span>></span></span> <span><span></</span>details<span>></span></span></code></pre><h3 id="5-4-the-html5-lt-article-gt">5.4 Thẻ HTML5 <article></h3><p>Thẻ <code><article></code> sử dụng để tạo ra các nội dung độc lập và tự bao hàm chính nó, nội dung này không phụ thuộc vào các phần khác của trang. Thẻ <code><article></code> có thể sử dụng cho các nội dung sau:</p><ul><li>Các bài đăng trong diễn đàn.</li><li>Bài viết trong các blog.</li><li>Các tin tức mới trong phần tin bài.</li><li>Các bình luận</li></ul><p>Trong một trang có thể có một hoặc nhiều thẻ <code><article></code>, chúng ta cùng xem cách cấu trúc thường gặp cho phần nội dung.</p><p><div class="imgBox"><img alt="Cấu trúc các the trong html" data-orgimg="https://sg.cdnki.com/cau-truc-cac-the-trong-html---aHR0cHM6Ly9hbGxhcmF2ZWwuY29tL3N0b3JhZ2UvYXBwL21lZGlhL3VwbG9hZHMvMjAxOC8wNS9jYXUtdHJ1Yy10cmFuZy0xLWFydGljbGUuanBn.webp" ></img></div></p><p>Cấu trúc trang có nhiều thẻ <code><article></code> có thể kết hợp với thẻ</p>ở phần tiếp theo.<h3 id="5-5-the-html5-lt-main-gt">5.5 Thẻ HTML5 <main></h3><p>Trong trang web có khá nhiều các thành phần, để có thể nhận diện được phần nội dung chính của trang sử dụng thẻ <code><main></code>, một điều chú ý là thẻ <code><main></code> sẽ không chứa các thành phần như tiêu đề, sidebar, footer. Phần chú ý này bạn cần hiểu về ngữ nghĩa chứ không phải thẻ <code><main></code> không được chứa các thẻ như <code><header></code>, <code><aside></code>, <code><footer></code> mà hàm ý của nó là không được chứa các thành phần (nội dung) liên quan đến tiêu đề, sidebar, footer.</p><p><div class="imgBox"><img alt="Cấu trúc các the trong html" data-orgimg="https://sg.cdnki.com/cau-truc-cac-the-trong-html---aHR0cHM6Ly9hbGxhcmF2ZWwuY29tL3N0b3JhZ2UvYXBwL21lZGlhL3VwbG9hZHMvMjAxOC8wNS9jYXUtdHJ1Yy10cmFuZy1zdS1kdW5nLXRoZS1tYWluLWNoby1ub2ktZHVuZy1jaGluaC5qcGc=.webp" ></img></div></p><h3 id="5-6-the-html5-lt-footer-gt">5.6 Thẻ HTML5 <footer></h3><p>Thẻ <code><footer></code> định nghĩa phần footer cho một trang hoặc một phần của trang, nó chứa các thông tin xoay quanh về các nội dung chứa bên trong trang hoặc thành phần trang. Thông thường thẻ <code><footer></code> thường chứa các thông tin như sau:</p><ul><li>Thông tin tác quyền</li><li>Thông tin liên hệ</li><li>Bản đồ trang web</li><li>Các tài liệu liên quan</li><li>Các công cụ mạng xã hội để tương tác với nội dung</li></ul><p>Một trang hoặc thành phần của trang có thể có một hoặc nhiều các thẻ <code><footer></code>. Hiện nay phần cuối trang thường được thiết kế lớn để chứa thêm nhiều thông tin hơn, lý do là khi người dùng đã đọc xong nội dung thì phần cuối trang sẽ được người dùng rất để ý. Đặc biệt khi tìm kiếm các thông tin liên hệ thông thường người dùng sẽ kéo chuột xuống cuối trang.</p><p><div class="imgBox"><img alt="Cấu trúc các the trong html" data-orgimg="https://sg.cdnki.com/cau-truc-cac-the-trong-html---aHR0cHM6Ly9hbGxhcmF2ZWwuY29tL3N0b3JhZ2UvYXBwL21lZGlhL3VwbG9hZHMvMjAxOC8wNS92aS1kdS12ZS1waGFuLWN1b2ktdHJhbmctZm9vdGVyLmpwZw==.webp" ></img></div> Với cách thiết kế footer dạng “béo” này thì chúng ta hoàn toàn có thể đưa thêm vào các thẻ</p><p>Với cách thiết kế footer dạng “béo” này thì chúng ta hoàn toàn có thể đưa thêm vào các thẻ <code><nav></code>, <code><aside></code>… vào trong thẻ <code><footer></code>.</p><h3 id="5-7-mot-so-the-html5-khac">5.7 Một số thẻ HTML5 khác</h3><p>Chúng ta đã lượt qua các thẻ HTML5 liên quan đến việc cấu trúc trang HTML, còn một số các thẻ HTML có ngữ nghĩa khác cũng mới được gới thiệu trong HTML5 như <code><time></code>, <code><mark></code>, <code><figure></code>, <code><ficaption></code> chưa được đề cập đến và tôi nhóm rất các thẻ HTML5 này vào một mục riêng. Chúng ta cùng tìm hiểu thông tin về các thẻ này.</p><p><strong>Thẻ HTML5 <code><time></code></strong></p><p>Định nghĩa giá trị ngày giờ mà có thể đọc được. Thẻ <code><time></code> được sử dụng để mã hóa ngày và giờ giúp cho các bộ máy tìm kiếm có thể đọc được hoặc các ứng dụng như nhắc giờ, các loại lịch biểu có thể sử dụng. Ví dụ sau nói lên sự cần thiết của thẻ <code><time></code>.</p><pre><code><span><span><</span>p<span>></span></span>Kho hàng mở cửa <span><span><</span>time<span>></span></span>9:00 AM<span><span></</span>time<span>></span></span> đến <span><span><</span>time<span>></span></span>5:00 PM<span><span></</span>time<span>></span></span> hàng ngày.<span><span></</span>p<span>></span></span> <span><span><</span>p<span>></span></span>Tôi có cuộc hẹn vào <span><span><</span>time <span>datetime</span><span><span>=</span><span>"</span>2018-05-01 09:30<span>"</span></span><span>></span></span>ngày Quốc tế lao động<span><span></</span>time<span>></span></span>.<span><span></</span>p<span>></span></span> <span><span><</span>p<span>></span></span>Khóa học HTML5 cơ bản sẽ bắt đầu trong <span><span><</span>time <span>datetime</span><span><span>=</span><span>"</span>2018-06-01 00:00<span>"</span></span><span>></span></span>tháng sáu năm nay<span><span></</span>time<span>></span></span>.<span><span></</span>p<span>></span></span></code></pre><p><strong>Thẻ HTML5 <code><mark></code></strong></p><p>Thẻ <code><mark></code> dùng để đánh dấu những đoạn văn bản quan trọng.</p><pre><code><span><span><</span>p<span>></span></span>Trong các ngôn ngữ lập trình web, <span><span><</span>mark<span>></span></span>HTML5<span><span></</span>mark<span>></span></span> là ngôn ngữ nền tảng cơ bản nhất<span><span></</span>p<span>></span></span></code></pre><p><strong>Thẻ HTML5 <code><ficaption></code>, <code><figure></code></strong></p><p>Thẻ <code><ficaption></code> sử dụng khi định nghĩa lời chú thích cho một thành phần sử dụng thẻ <code><figure></code>. Thẻ này có thể đặt ở đầu hoặc cuối bên trong thẻ <code><figure></code>.</p><p>Thẻ <code><figure></code> xác định các nội dung tự bao bọc như các hình ảnh, sự minh họa, các biểu đồ, sơ đồ… Nội dung của thẻ <code><figure></code> liên quan đến nội dung chính của trang nhưng nó không phụ thuộc chặt chẽ vào nội dung này, nếu có loại bỏ nó thì không ảnh hưởng đến nội dung trang.</p><pre><code><span><span><</span>figure<span>></span></span> <span><span><</span>img <span>src</span><span><span>=</span><span>"</span>bieu-do-tang-truong-hoc-vien-khoa-hoc-html-co-ban.jpg<span>"</span></span> <span>alt</span><span><span>=</span><span>"</span>Biểu đồ tăng trưởng học viên Khóa học HTML cơ bản<span>"</span></span> <span>width</span><span><span>=</span><span>"</span>800<span>"</span></span> <span>height</span><span><span>=</span><span>"</span>350<span>"</span></span><span>></span></span> <span><span><</span>figcaption<span>></span></span>Hình 1.5 - Biểu đồ tăng trưởng lưu lượng truy cập Khóa học HTML5 cơ bản.<span><span></</span>figcaption<span>></span></span> <span><span></</span>figure<span>></span></span></code></pre><h2 id="6-loi-ket">6. Lời kết</h2><p>HTML5 đã có nhiều cải tiến bằng việc đưa thêm nhiều các thẻ HTML có ngữ nghĩa, nó giúp cho việc cấu trúc trang trở nên rõ ràng hơn. Một điểm quan trọng nữa là các bộ máy tìm kiếm như Google, Bing có những ưu tiên khi đánh giá các trang được viết bằng HTML5, nó giúp bạn có thứ hạng cao trong kết quả tìm kiếm, đem lại nhiều lưu lượng truy cập trang hơn. HTML5 còn rất nhiều các khái niệm mới mang tính đột phát, trong bài viết này chỉ dừng lại ở những khái niệm cơ bản giúp bạn có thể chuyển đổi cấu trúc trang từ các phiên bản HTML thấp hơn sang HTML5.</p><p><strong>Bài viết gốc được đăng tải tại allaravel.com</strong></p><p><strong>Có thể bạn quan tâm:</strong></p><ul><li>HTML là gì? Tại sao nên dùng HTML5?</li><li>HTML5 khác HTML như thế nào?</li><li>HTML là gì?</li></ul><p><strong>Xem thêm Việc làm Developer hấp dẫn trên TopDev</strong></p> </p><div class='paramage'></div> <div class="contenBreak"></div></p></div> <div class="readmore_content_exists"><button id="readmore_content"><span class="arrow"><span></span></span>Đọc tiếp</button></div> </td></tr></table> <div style="padding:10px 0px;text-align:center"><div class="addthis_inline_share_toolbox"></div></div> <script async src="/dist/js/lazyhtml.min.js" crossorigin="anonymous"></script> <div class="lazyhtml" data-lazyhtml> <script type="text/lazyhtml"> <div class="youtubeVideo"><h3>Video liên quan</h3> <iframe width="560" height="315" src="https://www.youtube.com/embed/cDWeVCbO3OI?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"allowfullscreen></iframe> </div> </script> </div> <div class="mt-3"> <div class="tags"> <a href="https://ihoctot.com/tags/programming" class="tag-link">programming</a> <a href="https://ihoctot.com/tags/html" class="tag-link">html</a> <a href="https://ihoctot.com/tags/Cấu trúc HTML5" class="tag-link">Cấu trúc HTML5</a> </div> </div> <div class="post-tools"> <button data-postid="cau-truc-cac-the-trong-html" class="btn btn-answerModalBox"><img class="mr-1" alt="Cấu trúc các the trong html" src="/dist/images/svg/messages_16.svg">Reply</button> <button data-postid="cau-truc-cac-the-trong-html" data-vote="up" class="btn btn-doVote"><img class="mr-1" alt="Cấu trúc các the trong html" src="/dist/images/svg/face-smile_16.svg">9</button> <button data-postid="cau-truc-cac-the-trong-html" data-vote="down" class="btn btn-doVote"><img class="mr-1" alt="Cấu trúc các the trong html" src="/dist/images/svg/poo_16.svg">0</button> <button class="btn"><img class="mr-1" alt="Cấu trúc các the trong html" src="/dist/images/svg/facebook_16.svg"> Chia sẻ</button> </div> </div><!-- end question-post-body --> </div><!-- end question-post-body-wrap --> </div><!-- end question --> <div id="answers_cau-truc-cac-the-trong-html" class="answers"> </div><!-- end answer-wrap --> <div class="entryFooter"> <div class="footerLinkAds"><div style="width:100%; margin:0 auto;"> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-4987931798153631" data-ad-slot="8199996671"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="footerRelated"><div class="postRelatedWidget"> <h2>Bài Viết Liên Quan</h2> <div class="questions-snippet layoutNews border-top border-top-gray"> <div class="max-width:840px"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fb-44+c1-1p-ns" data-ad-client="ca-pub-4987931798153631" data-ad-slot="7655066491"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/phong-kham-trung-nguyen-o-binh-dai-ben-tre-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/pnfvRAV4AIo/hq720.jpg?sqp=-oaymwExCNAFEJQDSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYZSBVKEgwDw==&rs=AOn4CLAyxuyWn_u65FupLDXhRsTnIMlFLA" alt="Phòng khám trung nguyện ở bình đại bến tre năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/phong-kham-trung-nguyen-o-binh-dai-ben-tre-nam-2024">Phòng khám trung nguyện ở bình đại bến tre năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cuong-hoa-len-thang-15-trong-nhay-mat-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/2HPVMQFlVyo/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLC-FMTdRhOjQc3aftKMVnu-dXiU_g" alt="Cường hóa lên thẳng 15 trong nháy mắt năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cuong-hoa-len-thang-15-trong-nhay-mat-nam-2024">Cường hóa lên thẳng 15 trong nháy mắt năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cai-luong-chi-bao-la-gi-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/reKkp2LHvp0/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLB5L6PDP6u0ZU-Es_IUA_wtPBtXXQ" alt="Cải lương chi bảo là gì năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cai-luong-chi-bao-la-gi-nam-2024">Cải lương chi bảo là gì năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/là ai" class="tag-link">là ai</a> <a href="/tags/Hỏi Đáp" class="tag-link">Hỏi Đáp</a> <a href="/tags/Là gì" class="tag-link">Là gì</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/top-hang-mat-na-noi-dia-trung-quoc-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/m9NeNk1NNSg/hqdefault.jpg?sqp=-oaymwEjCOADEI4CSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLBlttUPwoHyavCQLjOLBOghRByuJw" alt="Top hãng mặt nạ nội địa trung quốc năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/top-hang-mat-na-noi-dia-trung-quoc-nam-2024">Top hãng mặt nạ nội địa trung quốc năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Top List" class="tag-link">Top List</a> <a href="/tags/Top" class="tag-link">Top</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/giai-hoa-8-bai-nong-do-dung-dich-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/UCJZaJrAK4I/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAFyDCnsz3_dVsuwtRxLL5hKkjv2Q" alt="Giải hóa 8 bài nồng độ dung dịch năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/giai-hoa-8-bai-nong-do-dung-dich-nam-2024">Giải hóa 8 bài nồng độ dung dịch năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/goh-la-viet-tat-cua-gi-trong-tieng-anh-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/tvM8yd90his/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLDgCkj0rTXt0G6E4RBPVZpGd_EgSw" alt="Goh là viết tắt của gì trong tiếng anh năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/goh-la-viet-tat-cua-gi-trong-tieng-anh-nam-2024">Goh là viết tắt của gì trong tiếng anh năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/là ai" class="tag-link">là ai</a> <a href="/tags/Học Tốt" class="tag-link">Học Tốt</a> <a href="/tags/Tiếng anh" class="tag-link">Tiếng anh</a> <a href="/tags/GOH container" class="tag-link">GOH container</a> <a href="/tags/Container lạnh" class="tag-link">Container lạnh</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/bao-cao-dau-tu-mua-dat-de-lam-van-phong-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/aKi7HRezNJ8/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLDGL0Muqi5QB_2PvRZ_dU9azChIeg" alt="Bao cáo đầu tư mua đất để làm văn phòng năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/bao-cao-dau-tu-mua-dat-de-lam-van-phong-nam-2024">Bao cáo đầu tư mua đất để làm văn phòng năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/anh-bo-doi-cu-ho-goc-bi-la-gi-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/tbRqD7Xy7hw/hqdefault.jpg?sqp=-oaymwE9COADEI4CSFryq4qpAy8IARUAAAAAGAElAADIQj0AgKJDeAHwAQH4Af4EgALgA4oCDAgAEAEYEyBBKH8wDw==&rs=AOn4CLDfzDiYG0xcSFgI6wcTMmk9nRdmfg" alt="Anh bộ đội cụ hồ gốc bỉ là gì năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/anh-bo-doi-cu-ho-goc-bi-la-gi-nam-2024">Anh bộ đội cụ hồ gốc bỉ là gì năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/là ai" class="tag-link">là ai</a> <a href="/tags/Hỏi Đáp" class="tag-link">Hỏi Đáp</a> <a href="/tags/Là gì" class="tag-link">Là gì</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/tim-hieu-chung-ve-van-ban-nghi-luan-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/Gpk88R_jN2Y/hqdefault.jpg?sqp=-oaymwEjCOADEI4CSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLDpeZxxX87bxXrlXgHOo4TtcccaEg" alt="Tìm hiểu chung về văn bản nghị luận năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/tim-hieu-chung-ve-van-ban-nghi-luan-nam-2024">Tìm hiểu chung về văn bản nghị luận năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/su-ly-loi-khong-lang-duoc-chuot-trong-sketchup-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/mDl_NZk5Ypo/hq720.jpg?sqp=-oaymwExCNAFEJQDSFryq4qpAyMIARUAAIhCGAHwAQH4AcQGgALQBYoCDAgAEAEYZSBdKEgwDw==&rs=AOn4CLAXZ4SynrslaWIl_fQMER5KsJ0TJA" alt="Sử lý lỗi không lăng được chuột trong sketchup năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/su-ly-loi-khong-lang-duoc-chuot-trong-sketchup-nam-2024">Sử lý lỗi không lăng được chuột trong sketchup năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Công Nghệ" class="tag-link">Công Nghệ</a> <a href="/tags/Chuột" class="tag-link">Chuột</a> </div> </div> </div> </div><!-- end media --> <div class="max-width:840px"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fb-44+c1-1p-ns" data-ad-client="ca-pub-4987931798153631" data-ad-slot="7655066491"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/bai-tap-tim-hang-so-can-bang-hoa-11-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/1IDDLw2Uw4k/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLDamgTrnct1xENuxvcsEQhyYsIWrw" alt="Bài tập tìm hằng số cân bằng hoá 11 năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/bai-tap-tim-hang-so-can-bang-hoa-11-nam-2024">Bài tập tìm hằng số cân bằng hoá 11 năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Khỏe Đẹp" class="tag-link">Khỏe Đẹp</a> <a href="/tags/Bài tập" class="tag-link">Bài tập</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/ban-khoan-co-nghia-la-gi-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/ubVAF1KM3Qk/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLC__ewqtm2sWUU5XDYYhYSseqjv_A" alt="Băn khoăn có nghĩa là gì năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/ban-khoan-co-nghia-la-gi-nam-2024">Băn khoăn có nghĩa là gì năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/là ai" class="tag-link">là ai</a> <a href="/tags/Hỏi Đáp" class="tag-link">Hỏi Đáp</a> <a href="/tags/Là gì" class="tag-link">Là gì</a> <a href="/tags/Ngôn ngữ" class="tag-link">Ngôn ngữ</a> <a href="/tags/Nghĩa là gì" class="tag-link">Nghĩa là gì</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/he-so-luong-178-tuong-ung-ngach-nao-nam-1996-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/GtY4_U6IID8/hqdefault.jpg?sqp=-oaymwEjCOADEI4CSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLBtxWU-5f1gupy1cNZ0_Bq3QbZ38A" alt="Hệ số lương 1.78 tương ứng ngạch nào năm 1996 năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/he-so-luong-178-tuong-ung-ngach-nao-nam-1996-nam-2024">Hệ số lương 1.78 tương ứng ngạch nào năm 1996 năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/banh-rau-cau-sinh-nhat-chua-bao-nhieu-calo-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/bzMqApMZzs4/hqdefault.jpg?sqp=-oaymwE9COADEI4CSFryq4qpAy8IARUAAAAAGAElAADIQj0AgKJDeAHwAQH4AYwCgALgA4oCDAgAEAEYNSBlKEwwDw==&rs=AOn4CLBTNOA_UiwlIabd9lGw2U7dOynbiQ" alt="Bánh rau câu sinh nhật chứa bao nhiêu calo năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/banh-rau-cau-sinh-nhat-chua-bao-nhieu-calo-nam-2024">Bánh rau câu sinh nhật chứa bao nhiêu calo năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/bao nhieu" class="tag-link">bao nhieu</a> <a href="/tags/Hỏi Đáp" class="tag-link">Hỏi Đáp</a> <a href="/tags/Bao nhiêu" class="tag-link">Bao nhiêu</a> <a href="/tags/Món Ngon" class="tag-link">Món Ngon</a> <a href="/tags/Bánh" class="tag-link">Bánh</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/ho-tieng-nhat-cua-ban-la-gi-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/xkYtDA5XcdI/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAl3wSl_QL8pEc46JKs59gZh9Lqmg" alt="Họ tiếng nhật của bạn là gì năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/ho-tieng-nhat-cua-ban-la-gi-nam-2024">Họ tiếng nhật của bạn là gì năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/là ai" class="tag-link">là ai</a> <a href="/tags/Hỏi Đáp" class="tag-link">Hỏi Đáp</a> <a href="/tags/Là gì" class="tag-link">Là gì</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/y-nghia-cua-header-from-top-la-gi-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/WWpR9Rw_QQI/hqdefault.jpg?sqp=-oaymwE9COADEI4CSFryq4qpAy8IARUAAAAAGAElAADIQj0AgKJDeAHwAQH4AYoGgALCA4oCDAgAEAEYWSBdKGUwDw==&rs=AOn4CLAnun5phP5ajLMYugOk6fdmiBc_Vg" alt="Ý nghĩa của header from top là gì năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/y-nghia-cua-header-from-top-la-gi-nam-2024">Ý nghĩa của header from top là gì năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Hỏi Đáp" class="tag-link">Hỏi Đáp</a> <a href="/tags/Là gì" class="tag-link">Là gì</a> <a href="/tags/Top List" class="tag-link">Top List</a> <a href="/tags/Top" class="tag-link">Top</a> <a href="/tags/Header la gì" class="tag-link">Header la gì</a> <a href="/tags/Footer la gì" class="tag-link">Footer la gì</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/tu-hoc-tieng-anh-nhu-the-nao-hieu-qua-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/-_iqv8e1yww/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAe-wP9CXq33g3_rae_LB8YogSj7A" alt="Tự học tiếng anh như thế nào hiệu quả năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/tu-hoc-tieng-anh-nhu-the-nao-hieu-qua-nam-2024">Tự học tiếng anh như thế nào hiệu quả năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Hỏi Đáp" class="tag-link">Hỏi Đáp</a> <a href="/tags/Thế nào" class="tag-link">Thế nào</a> <a href="/tags/Học Tốt" class="tag-link">Học Tốt</a> <a href="/tags/Học" class="tag-link">Học</a> <a href="/tags/Tiếng anh" class="tag-link">Tiếng anh</a> <a href="/tags/Học tiếng Anh" class="tag-link">Học tiếng Anh</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/co-the-con-nguoi-nam-hien-mau-bao-nhieu-lan-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/K69UxItBZfE/hq720.jpg?sqp=-oaymwExCNAFEJQDSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYEyBFKH8wDw==&rs=AOn4CLCFH3tx2oDoPysVUZSqRVdb4-kvtw" alt="Cơ thể con người năm hiến máu bao nhiêu lần năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/co-the-con-nguoi-nam-hien-mau-bao-nhieu-lan-nam-2024">Cơ thể con người năm hiến máu bao nhiêu lần năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/bao nhieu" class="tag-link">bao nhieu</a> <a href="/tags/Hỏi Đáp" class="tag-link">Hỏi Đáp</a> <a href="/tags/Bao nhiêu" class="tag-link">Bao nhiêu</a> <a href="/tags/Khỏe Đẹp" class="tag-link">Khỏe Đẹp</a> <a href="/tags/Cơ thể" class="tag-link">Cơ thể</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/tuoi-dinh-mao-xay-nha-nam-nao-tot-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/iejfpp96XkM/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAxMQXIXMhwrFiK6MdB7Q5r0ZjK-g" alt="Tuổi đinh mão xây nhà năm nào tốt năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/tuoi-dinh-mao-xay-nha-nam-nao-tot-nam-2024">Tuổi đinh mão xây nhà năm nào tốt năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Xây Đựng" class="tag-link">Xây Đựng</a> <a href="/tags/Xây" class="tag-link">Xây</a> <a href="/tags/Nhà" class="tag-link">Nhà</a> </div> </div> </div> </div><!-- end media --> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/khoan-chi-den-san-pham-cuoi-cung-la-gi-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/B62H4yfsqKY/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLDLcLFXSGXQYF3-bpD-kNcaXGQu1A" alt="Khoán chi đến sản phẩm cuối cùng là gì năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/khoan-chi-den-san-pham-cuoi-cung-la-gi-nam-2024">Khoán chi đến sản phẩm cuối cùng là gì năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/là ai" class="tag-link">là ai</a> <a href="/tags/Hỏi Đáp" class="tag-link">Hỏi Đáp</a> <a href="/tags/Là gì" class="tag-link">Là gì</a> </div> </div> </div> </div><!-- end media --> </div> </div></div> </div> </div> </div><!-- end question-main-bar --> </div><!-- end col-lg-9 --> <div class="postContentRight"> <div class="sidebar"> <div class="ad-card"> <h4 class="text-gray text-uppercase fs-13 pb-3 text-center">Quảng Cáo</h4> <div class="mb-4 mx-auto" style="text-align:center"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4987931798153631" data-ad-slot="8742637402" data-ad-format="auto" data-full-width-responsive="true"> </ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="card card-item"> <div class="card-body"> <h3 class="fs-17 pb-3">Có thể bạn quan tâm</h3> <div class="divider"><span></span></div> <div class="sidebar-questions pt-3"> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://ihoctot.com/cac-phuong-phap-hoa-hoc-ve-nguyen-tu-nam-2024">Các phương pháp hóa học về nguyên tử năm 2024</a></h5> <small class="meta"> <span class="pr-1">2 tháng trước</span> <span class="pr-1">. bởi</span> <a href="https://ihoctot.com/author/ArchaeologicalParliament" class="author">ArchaeologicalParliament</a> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://ihoctot.com/dieu-nang-tieng-nhe-la-phuong-cham-gi-nam-2024">Điều nặng tiếng nhẹ là phương châm gì năm 2024</a></h5> <small class="meta"> <span class="pr-1">2 tháng trước</span> <span class="pr-1">. bởi</span> <a href="https://ihoctot.com/author/ManlyPublisher" class="author">ManlyPublisher</a> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://ihoctot.com/poodle-standard-khong-lo-gia-bao-nhieu-nam-2024">Poodle standard khổng lồ giá bao nhiêu năm 2024</a></h5> <small class="meta"> <span class="pr-1">2 tháng trước</span> <span class="pr-1">. bởi</span> <a href="https://ihoctot.com/author/NonprofitApparatus" class="author">NonprofitApparatus</a> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://ihoctot.com/bai-tap-trac-nghiem-phuong-trinh-chua-can-lop-10-nam-2024">Bài tập trắc nghiệm phương trình chứa căn lớp 10 năm 2024</a></h5> <small class="meta"> <span class="pr-1">2 tháng trước</span> <span class="pr-1">. bởi</span> <a href="https://ihoctot.com/author/CivilDiver" class="author">CivilDiver</a> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://ihoctot.com/sua-rua-mat-whoo-do-review-nam-2024">Sữa rửa mặt whoo đỏ review năm 2024</a></h5> <small class="meta"> <span class="pr-1">2 tháng trước</span> <span class="pr-1">. bởi</span> <a href="https://ihoctot.com/author/UncertainAuthority" class="author">UncertainAuthority</a> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://ihoctot.com/ddong-mach-va-tinh-mach-khac-nhau-nhu-the-nao-nam-2024">Dđộng mạch và tĩnh mạch khác nhau như thế nào năm 2024</a></h5> <small class="meta"> <span class="pr-1">2 tháng trước</span> <span class="pr-1">. bởi</span> <a href="https://ihoctot.com/author/FoamingSharpness" class="author">FoamingSharpness</a> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://ihoctot.com/bai-tap-gioi-han-cua-ham-so-mathvn-nam-2024">Bài tập giới hạn của hàm số mathvn năm 2024</a></h5> <small class="meta"> <span class="pr-1">2 tháng trước</span> <span class="pr-1">. bởi</span> <a href="https://ihoctot.com/author/UnfocusedBallet" class="author">UnfocusedBallet</a> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://ihoctot.com/giai-bai-tap-cong-nghe-7-trong-vbt-bai-31-nam-2024">Giải bài tập công nghệ 7 trong vbt bài 31 năm 2024</a></h5> <small class="meta"> <span class="pr-1">2 tháng trước</span> <span class="pr-1">. bởi</span> <a href="https://ihoctot.com/author/FundamentalAirtime" class="author">FundamentalAirtime</a> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://ihoctot.com/bong-den-cuc-tim-1m2-cong-suat-bao-nhieu-watt-nam-2024">Bóng đèn cực tím 1m2 công suất bao nhiêu watt năm 2024</a></h5> <small class="meta"> <span class="pr-1">2 tháng trước</span> <span class="pr-1">. bởi</span> <a href="https://ihoctot.com/author/TrackingTrilogy" class="author">TrackingTrilogy</a> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://ihoctot.com/co-so-cua-gia-tri-hang-hoa-la-gi-nam-2024">Cơ sở của giá trị hàng hóa là gì năm 2024</a></h5> <small class="meta"> <span class="pr-1">2 tháng trước</span> <span class="pr-1">. bởi</span> <a href="https://ihoctot.com/author/Fast-foodLineage" class="author">Fast-foodLineage</a> </small> </div> </div><!-- end media --> </div><!-- end sidebar-questions --> </div> </div><!-- end card --> <div class="card card-item cardTopList"> <div class="card-body"> <h3 class="fs-17 pb-3">Toplist được quan tâm</h3> <div class="divider"><span></span></div> <div class="sidebar-questions pt-3"> <div class="media media-card media--card media--card-2"> <div class="topListNum">#1</div> <div class="media-body"> <h5><a href="https://ihoctot.com/toplist-top-7-su-tich-ho-guom-ngu-van-lop-6-2023">Top 7 sự tích hồ gươm - ngữ văn lớp 6 2023</a></h5> <small class="meta text-right">5 tháng trước</small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="topListNum">#2</div> <div class="media-body"> <h5><a href="https://ihoctot.com/toplist-top-7-gdcd-6-bai-1-ket-noi-tri-thuc-2023">Top 7 gdcd 6 bài 1 kết nối tri thức 2023</a></h5> <small class="meta text-right">5 tháng trước</small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="topListNum">#3</div> <div class="media-body"> <h5><a href="https://ihoctot.com/toplist-top-7-y-nghia-cua-xay-dung-gia-dinh-van-hoa-2023">Top 7 ý nghĩa của xây dựng gia đình văn hóa 2023</a></h5> <small class="meta text-right">5 tháng trước</small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="topListNum">#4</div> <div class="media-body"> <h5><a href="https://ihoctot.com/toplist-top-6-mau-hop-dong-muon-dat-lam-nha-xuong-2023">Top 6 mẫu hợp đồng mượn đất làm nhà xưởng 2023</a></h5> <small class="meta text-right">5 tháng trước</small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="topListNum">#5</div> <div class="media-body"> <h5><a href="https://ihoctot.com/toplist-top-3-tong-tai-bien-thai-toi-yeu-anh-tap-27-2023">Top 3 tổng tài biến thái tôi yêu anh tập 27 2023</a></h5> <small class="meta text-right">5 tháng trước</small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="topListNum">#6</div> <div class="media-body"> <h5><a href="https://ihoctot.com/toplist-top-6-ket-thuc-phim-my-nhan-vo-le-2023">Top 6 kết thực phim mỹ nhân vô lệ 2023</a></h5> <small class="meta text-right">5 tháng trước</small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="topListNum">#7</div> <div class="media-body"> <h5><a href="https://ihoctot.com/toplist-top-9-trong-nhung-cau-tho-sau-cau-nao-su-dung-thanh-ngu-2023">Top 9 trong những câu thơ sau câu nào sử dụng thành ngữ 2023</a></h5> <small class="meta text-right">5 tháng trước</small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="topListNum">#8</div> <div class="media-body"> <h5><a href="https://ihoctot.com/toplist-top-8-de-tai-va-chu-de-cua-tac-pham-tat-den-2023">Top 8 đề tài và chủ de của tác phẩm tắt đèn 2023</a></h5> <small class="meta text-right">5 tháng trước</small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="topListNum">#9</div> <div class="media-body"> <h5><a href="https://ihoctot.com/toplist-top-5-tieu-su-cua-thay-thich-phap-hoa-2023">Top 5 tiểu sử của thầy thích pháp hòa 2023</a></h5> <small class="meta text-right">5 tháng trước</small> </div> </div><!-- end media --> </div><!-- end sidebar-questions --> </div> </div><!-- end card --> <div class="ad-card"> <h4 class="text-gray text-uppercase fs-14 pb-3 pb-3 text-center">Quảng cáo</h4> <div class="mb-4 mx-auto"> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-" data-ad-slot="" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="card card-item"> <div class="card-body"> <h3 class="fs-17 pb-3">Xem Nhiều</h3> <div class="divider"><span></span></div> <div class="sidebar-questions pt-3"> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://ihoctot.com/banner-co-lon-treo-ngoai-duong-tieng-anh-la-gi-nam-2024">Banner cỡ lớn treo ngoài đường tiếng anh là gì năm 2024</a></h5> <small class="meta"> <span class="pr-1">1 ngày trước</span> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://ihoctot.com/top-hang-mat-na-noi-dia-trung-quoc-nam-2024">Top hãng mặt nạ nội địa trung quốc năm 2024</a></h5> <small class="meta"> <span class="pr-1">4 ngày trước</span> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://ihoctot.com/giai-hoa-8-bai-nong-do-dung-dich-nam-2024">Giải hóa 8 bài nồng độ dung dịch năm 2024</a></h5> <small class="meta"> <span class="pr-1">6 ngày trước</span> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://ihoctot.com/cuong-hoa-len-thang-15-trong-nhay-mat-nam-2024">Cường hóa lên thẳng 15 trong nháy mắt năm 2024</a></h5> <small class="meta"> <span class="pr-1">2 ngày trước</span> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://ihoctot.com/goh-la-viet-tat-cua-gi-trong-tieng-anh-nam-2024">Goh là viết tắt của gì trong tiếng anh năm 2024</a></h5> <small class="meta"> <span class="pr-1">1 tuần trước</span> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://ihoctot.com/phong-kham-trung-nguyen-o-binh-dai-ben-tre-nam-2024">Phòng khám trung nguyện ở bình đại bến tre năm 2024</a></h5> <small class="meta"> <span class="pr-1">1 ngày trước</span> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://ihoctot.com/anh-bo-doi-cu-ho-goc-bi-la-gi-nam-2024">Anh bộ đội cụ hồ gốc bỉ là gì năm 2024</a></h5> <small class="meta"> <span class="pr-1">1 tuần trước</span> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://ihoctot.com/cai-luong-chi-bao-la-gi-nam-2024">Cải lương chi bảo là gì năm 2024</a></h5> <small class="meta"> <span class="pr-1">4 ngày trước</span> </small> </div> </div><!-- end media --> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://ihoctot.com/bao-cao-dau-tu-mua-dat-de-lam-van-phong-nam-2024">Bao cáo đầu tư mua đất để làm văn phòng năm 2024</a></h5> <small class="meta"> <span class="pr-1">1 tuần trước</span> </small> </div> </div><!-- end media --> </div><!-- end sidebar-questions --> </div> </div><!-- end card --> <div class="ad-card"> <h4 class="text-gray text-uppercase fs-14 pb-3 pb-3 text-center">Quảng cáo</h4> <div class="mb-4 mx-auto" style=" text-align: center"> <div id='div-gpt-ad-1657246837997-0' style='min-width: 300px; min-height: 600px;'> <script> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1657246837997-0'); }); </script> </div> </div> </div> </div><!-- end sidebar --> </div><!-- end col-lg-3 --> </div><!-- end row --> </div><!-- end container --> </section><!-- end question-area --> <!-- ================================ END QUESTION AREA ================================= --> <script>var questionId ='cau-truc-cac-the-trong-html'</script> <script>var postTime ='2022-10-02T10:15:37.365Z'</script> <script>var siteDomain ='ihoctot.com'</script> <script type="text/javascript" src="https://ihoctot.com/dist/js/pages/comment.js"></script> <!-- ================================ END FOOTER AREA ================================= --> <section class="footer-area pt-80px bg-dark position-relative"> <span class="vertical-bar-shape vertical-bar-shape-1"></span> <span class="vertical-bar-shape vertical-bar-shape-2"></span> <span class="vertical-bar-shape vertical-bar-shape-3"></span> <span class="vertical-bar-shape vertical-bar-shape-4"></span> <div class="container"> <div class="row"> <div class="col-lg-3 responsive-column-half"> <div class="footer-item"> <h3 class="fs-18 fw-bold pb-2 text-white">Chúng tôi</h3> <ul class="generic-list-item generic-list-item-hover-underline pt-3 generic-list-item-white"> <li><a href="/about.html">Giới thiệu</a></li> <li><a href="/contact.html">Liên hệ</a></li> <li><a href="/contact.html">Tuyển dụng</a></li> <li><a href="/contact.html">Quảng cáo</a></li> </ul> </div><!-- end footer-item --> </div><!-- end col-lg-3 --> <div class="col-lg-3 responsive-column-half"> <div class="footer-item"> <h3 class="fs-18 fw-bold pb-2 text-white">Điều khoản</h3> <ul class="generic-list-item generic-list-item-hover-underline pt-3 generic-list-item-white"> <li><a href="/privacy-statement.html">Điều khoản hoạt động</a></li> <li><a href="/terms-and-conditions.html">Điều kiện tham gia</a></li> <li><a href="/privacy-statement.html">Quy định cookie</a></li> </ul> </div><!-- end footer-item --> </div><!-- end col-lg-3 --> <div class="col-lg-3 responsive-column-half"> <div class="footer-item"> <h3 class="fs-18 fw-bold pb-2 text-white">Trợ giúp</h3> <ul class="generic-list-item generic-list-item-hover-underline pt-3 generic-list-item-white"> <li><a href="/contact.html">Hướng dẫn</a></li> <li><a href="/contact.html">Loại bỏ câu hỏi</a></li> <li><a href="/contact.html">Liên hệ</a></li> </ul> </div><!-- end footer-item --> </div><!-- end col-lg-3 --> <div class="col-lg-3 responsive-column-half"> <div class="footer-item"> <h3 class="fs-18 fw-bold pb-2 text-white">Mạng xã hội</h3> <ul class="generic-list-item generic-list-item-hover-underline pt-3 generic-list-item-white"> <li><a href="#"><i class="fab fa-facebook-f mr-1"></i> Facebook</a></li> <li><a href="#"><i class="fab fa-twitter mr-1"></i> Twitter</a></li> <li><a href="#"><i class="fab fa-linkedin mr-1"></i> LinkedIn</a></li> <li><a href="#"><i class="fab fa-instagram mr-1"></i> Instagram</a></li> </ul> </div><!-- end footer-item --> </div><!-- end col-lg-3 --> </div><!-- end row --> </div><!-- end container --> <hr class="border-top-gray my-5"> <div class="container"> <div class="row align-items-center pb-4 copyright-wrap"> <div class="col-6"> <a href="//www.dmca.com/Protection/Status.aspx?ID=33e5dca6-f8c5-4c6f-b8e6-a247229d2953" title="DMCA.com Protection Status" class="dmca-badge"> <img src ="https://images.dmca.com/Badges/dmca_protected_sml_120am.png?ID=33e5dca6-f8c5-4c6f-b8e6-a247229d2953" width="123px" height="21px" alt="DMCA.com Protection Status" /></a> <script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js"> </script> </div> <!-- end col-lg-6 --><div class="col-6"> <div class="copyright-desc text-right fs-14"> <div>Bản quyền © 2021 <a href="https://ihoctot.com">Học Tốt</a> Inc.</div> </div> </div><!-- end col-lg-6 --> </div><!-- end row --> </div><!-- end container --> </section><!-- end footer-area --> <!-- ================================ END FOOTER AREA ================================= --><script> $( document ).ready(function() { setTimeout(showMoreButton, 1000); function showMoreButton(){ let minheight = 1000; let min_height = parseInt($("#entryContent").innerHeight())/3; if (min_height < minheight) min_height = minheight; $("#entryContent").css('min-height', min_height).css('max-height', min_height).css('overflow', 'hidden'); $("#readmore_content").click(function(){ $("#entryContent").css('min-height', '').css('max-height', '').css('overflow', ''); $(".readmore_content_exists").css('display', 'none'); }) } }); </script> <!-- template js files --> <!-- start back to top --> <div id="back-to-top" data-toggle="tooltip" data-placement="top" title="Lên đầu trang"> <img alt="" src="/dist/images/svg/arrow-up_20.svg"> </div> <!-- end back to top --> <script src="https://ihoctot.com/dist/js/bootstrap.bundle.min.js"></script> <script src="https://ihoctot.com/dist/js/moment.js"></script> <script src="https://ihoctot.com/dist/js/read-more.min.js"></script> <script src="https://ihoctot.com/dist/js/main.js?v=6"></script> <!-- Google Tag Manager (noscript) --> <script type="text/javascript"> (function(c,l,a,r,i,t,y){ c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); })(window, document, "clarity", "script", "kc7zn73k3m"); </script> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-VQQBEDXD05"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-VQQBEDXD05'); </script> </body> </html>