Khung HTML cơ bản: Nền tảng vững chắc cho Website

Việc xây dựng một website hiệu quả bắt đầu từ nền tảng HTML vững chắc. Một khung HTML tốt không chỉ giúp website hoạt động trơn tru mà còn tối ưu cho SEO và khả năng hiển thị trên các nền tảng mạng xã hội. Bài viết này sẽ cung cấp cho bạn một khung HTML cơ bản, được cập nhật với các phương pháp tốt nhất hiện nay.

<!doctype html>

<html lang="vi"> <--- Thay đổi ngôn ngữ thành tiếng Việt

  <head>

    <meta charset="utf-8">

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



    <title>Tiêu Đề Trang Của Bạn</title>



    <meta name="description" content="Mô tả ngắn gọn về trang web của bạn.">

    <meta name="keywords" content="Các từ khóa liên quan đến nội dung trang web, ví dụ: thiết kế web, lập trình, SEO">

    <meta name="author" content="Tên Của Bạn">



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

    <meta property="og:url" content="URL Trang Web Của Bạn">

    <meta property="og:title" content="Tiêu Đề Trang Của Bạn">

    <meta property="og:description" content="Mô tả ngắn gọn về trang web của bạn.">

    <meta property="og:image" content="Đường Dẫn Đến Hình Ảnh Chia Sẻ">



    <meta property="twitter:card" content="summary_large_image">

    <meta property="twitter:url" content="URL Trang Web Của Bạn">

    <meta property="twitter:title" content="Tiêu Đề Trang Của Bạn">

    <meta property="twitter:description" content="Mô tả ngắn gọn về trang web của bạn.">

    <meta property="twitter:image" content="Đường Dẫn Đến Hình Ảnh Chia Sẻ">

    <meta name="twitter:image:alt" content="Mô tả hình ảnh cho Twitter">



    <link rel="stylesheet" href="style.css">



    <link rel="icon" type="image/svg+xml" href="favicon.svg">

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

    <link rel="manifest" href="/site.webmanifest">

  </head>

  <body>

    <header>

      </header>

    <nav>

        </nav>

    <main>

      <h1>Nội Dung Chính Của Trang</h1> <--- Thay đổi placeholder

    </main>

    <aside>

        </aside>

    <footer>

        </footer>

    <script src="script.js"></script> <--- Thay đổi src

  </body>

</html>

Giải thích

lang="vi" Khai báo ngôn ngữ của trang là tiếng Việt, quan trọng cho SEO và hỗ trợ tiếp cận.
meta keywords Mặc dù không còn được Google ưu tiên như trước, nhưng vẫn hữu ích cho một số công cụ tìm kiếm khác.
Open Graph và Twitter Cards: Bổ sung đầy đủ các thẻ meta cho Facebook và Twitter, giúp hiển thị thông tin chính xác khi chia sẻ trên mạng xã hội. Đã thêm og:type.
href và src Thay đổi placeholder để rõ ràng hơn.
apple-touch-icon và manifest Thêm hỗ trợ cho biểu tượng trên thiết bị iOS và manifest cho Progressive Web App (PWA), nâng cao trải nghiệm người dùng.
Cấu trúc HTML5: Đã thêm các thẻ semantic như <header>, <nav>, <main>, <footer>, <aside> để cấu trúc trang web rõ ràng và có ý nghĩa hơn.

Nếu bạn hiện đang làm việc với React bạn sẽ phải sử dụng thẻ tự đóng <meta /> thay vì <meta> trong HTML. Nó không hoàn toàn cần thiết trong HTML, nhưng nó cần thiết trong JSX.

Định hình bố cục trang web

<header></header> Phần đầu trang, thường chứa logo, menu điều hướng và các thông tin giới thiệu chung. Hãy tưởng tượng nó như lời chào đầu tiên của website đến với người dùng..
<nav></nav> Khu vực dành cho các liên kết điều hướng, giúp người dùng dễ dàng di chuyển giữa các trang. Một menu rõ ràng và dễ sử dụng là yếu tố then chốt cho trải nghiệm người dùng tốt.
<main></main> Phần nội dung chính và quan trọng nhất của trang web. Đây là nơi chứa đựng thông tin mà bạn muốn truyền tải đến người đọc. Mỗi trang chỉ nên có một thẻ <main>.
<section></section> Dùng để nhóm các nội dung liên quan lại với nhau, thường đi kèm với một tiêu đề. Ví dụ, bạn có thể dùng <section> để chia nội dung bài viết thành các phần nhỏ.
<article></article> Đại diện cho một phần nội dung độc lập và hoàn chỉnh, ví dụ như một bài blog, một bài báo hoặc một sản phẩm. <article> có thể được tái sử dụng ở nhiều nơi.
<aside></aside> Chứa nội dung phụ, liên quan đến nội dung chính nhưng không quá quan trọng, ví dụ như sidebar, quảng cáo hoặc các liên kết liên quan.
<footer></footer> Phần chân trang, thường chứa thông tin bản quyền, thông tin liên hệ, liên kết mạng xã hội và các thông tin bổ sung khác.

Hiển thị hình ảnh và chú thích

<figure></figure> Bao bọc một hình ảnh, biểu đồ hoặc bất kỳ nội dung trực quan nào khác.
<figcaption></figcaption> Cung cấp chú thích cho nội dung bên trong thẻ <figure>.

Các yếu tố tương tác và định dạng

<details></details> và <summary></summary> Tạo ra một phần nội dung có thể thu gọn/mở rộng. <summary> là tiêu đề hiển thị, khi người dùng nhấp vào sẽ hiển thị nội dung chi tiết bên trong thẻ <details>.
<time></time> Biểu diễn thời gian hoặc ngày tháng.
<mark></mark> Đánh dấu một đoạn văn bản để nhấn mạnh.
<code></code> Hiển thị một đoạn mã code.
<address></address> Chứa thông tin liên hệ, thường là của tác giả.

Bằng cách sử dụng khung HTML này và hiểu rõ các phần tử HTML, bạn đã xây dựng được nền tảng vững chắc cho website của mình. Chúc bạn thành công!