Skip to main content

1. Giới thiệu

Cấu trúc 1 trang HTML5​

HTML5 là phiên bản mới nhất của HTML, ngôn ngữ mà chúng ta sử dụng để xây dựng cấu trúc của một trang web.

Tài liệu HTML5 bắt đầu bằng loại khai báo <!DOCTYPE html>. Điều này cho trình duyệt biết rằng nó nên xử lý tài liệu như một trang HTML5.

Tiếp theo là thẻ <html>. Thẻ này chứa toàn bộ nội dung của trang web.

Trong thẻ <html>, có hai phần chính: <head> và <body>.

Phần <head> chứa thông tin về tài liệu, không hiển thị trên trang web. Đây có thể là tiêu đề của trang (thẻ <title>), liên kết đến tệp CSS (thẻ <link>), hoặc các thẻ meta (thẻ <meta>) để cung cấp thông tin cho công cụ tìm kiếm và trình duyệt.

Phần <body> chứa nội dung chính của trang web, những gì mà người dùng thực sự nhìn thấy. Điều này bao gồm văn bản, hình ảnh, video, form, và nhiều hơn nữa.

HTML5 cũng đã giới thiệu một số thẻ mới giúp cấu trúc tài liệu tốt hơn. Đây bao gồm thẻ như <header> (cho phần tiêu đề của trang), <nav> (cho phần điều hướng), <section> (cho các phần nội dung riêng biệt), <article> (cho nội dung có thể độc lập với phần còn lại của trang), và <footer> (cho phần chân trang).

Hãy nhớ rằng việc sử dụng cấu trúc HTML5 một cách chính xác không chỉ giúp trang web của bạn dễ dàng hơn cho người dùng đọc và điều hướng, mà còn giúp cho công cụ tìm kiếm dễ dàng hiểu và xếp hạng trang web của bạn hơn.

Các thẻ meta​

Thẻ meta trong HTML được sử dụng để cung cấp cho trình duyệt và công cụ tìm kiếm thông tin về trang web của bạn. Thẻ meta luôn nằm trong thẻ <head> của tài liệu HTML. Dưới đây là một số loại thẻ meta phổ biến:

Charset meta tag: Định nghĩa bộ ký tự sử dụng cho trang web. Điều này giúp trình duyệt hiểu cách hiển thị nội dung đúng cách. Ví dụ:

<meta charset="UTF-8" />

Viewport meta tag: Kiểm soát cách trang web hiển thị trên thiết bị di động. Đặc biệt quan trọng khi thiết kế giao diện web đáp ứng. Ví dụ:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Description meta tag: Cung cấp mô tả ngắn gọn về nội dung trang web. Công cụ tìm kiếm thường hiển thị mô tả này trong kết quả tìm kiếm. Ví dụ:

<meta name="description" content="Đây là mô tả về trang web của tôi." />

Keywords meta tag: Dùng để nêu các từ khóa chính của trang web. Tuy nhiên, hiện nay, Google không còn sử dụng thẻ này để xếp hạng trang web. Ví dụ:

<meta name="keywords" content="web, HTML, CSS, JavaScript" />

Author meta tag: Cho biết tác giả của trang web. Ví dụ:

<meta name="author" content="Nguyễn Văn A" />

Robots meta tag: Cho biết cho công cụ tìm kiếm có nên lập chỉ mục trang web này hay không, và có nên theo dõi các liên kết hay không. Ví dụ:

<!-- lập chỉ mục và theo dõi -->
<meta name="robots" content="index, follow" />

<!-- không lập chỉ mục và không theo dõi -->
<meta name="robots" content="noindex, nofollow" />

Lưu ý: Sử dụng thẻ meta một cách đúng đắn và hiệu quả giúp tăng cơ hội để trang web của bạn được xếp hạng cao hơn trên công cụ tìm kiếm, đồng thời cung cấp cho người dùng thông tin hữu ích và phù hợp khi họ tìm kiếm trang web của bạn.

Các thể open graph​

Open Graph là một giao thức cho phép bất kỳ trang web nào trở thành một đối tượng phong phú trên mạng xã hội bằng cách thêm các thẻ meta đặc biệt vào mã nguồn trang. Dưới đây là một số thẻ Open Graph phổ biến:

og:title: Tiêu đề của nội dung bạn đang chia sẻ. Ví dụ:

<meta property="og:title" content="Tiêu đề bài viết" />

og:type: Loại nội dung mà bạn đang chia sẻ, có thể là một trang web, video, ứng dụng, vv. Ví dụ:

<meta property="og:type" content="website" />

og:image: Đường dẫn URL đến hình ảnh đại diện cho nội dung của bạn. Ví dụ:

<meta property="og:image" content="https://example.com/image.jpg" />

og:url: Đường dẫn URL chính thức của nội dung bạn đang chia sẻ. Ví dụ:

<meta property="og:url" content="https://example.com/page.html" />

og:description: Mô tả ngắn gọn về nội dung bạn đang chia sẻ. Ví dụ:

<meta property="og:description" content="Đây là mô tả về trang web của tôi." />

og:site_name: Tên của trang web tổng thể mà nội dung của bạn đang chia sẻ thuộc về. Ví dụ:

<meta property="og:site_name" content="Tên Trang Web" />

Khi một người dùng chia sẻ một liên kết từ trang web của bạn lên mạng xã hội như Facebook, LinkedIn, hoặc Twitter, thì các thông tin từ các thẻ Open Graph sẽ được sử dụng để tạo ra một bản xem trước hấp dẫn của nội dung đó.

Các thẻ về location​

rong HTML, không có thẻ meta chuẩn cụ thể dành cho vị trí địa lý. Tuy nhiên, bạn có thể sử dụng thẻ meta theo cách sau để đưa thông tin vị trí vào trang web của mình:

<meta name="geo.region" content="VN-HN" />
<meta name="geo.placename" content="Hanoi" />
<meta name="geo.position" content="21.028511;105.804817" />
<meta name="ICBM" content="21.028511, 105.804817" />

Trong ví dụ trên:

  • geo.region là mã vùng theo chuẩn ISO 3166-2. Trong trường hợp này, "VN-HN" đại diện cho Hà Nội, Việt Nam.
  • geo.placename là tên của địa điểm, trong trường hợp này là "Hanoi".
  • geo.position và ICBM đều là vị trí GPS của địa điểm, theo định dạng "vĩ độ;kinh độ".

Lưu ý rằng không phải tất cả các công cụ tìm kiếm đều sử dụng thông tin này, và không có thông tin chính xác về việc Google sử dụng nó hay không. Tuy nhiên, nó có thể được sử dụng bởi một số công cụ tìm kiếm cục bộ hoặc chuyên ngành, hoặc các dịch vụ bản đồ trực tuyến.