HTML Skeleton — Phan Nhật Chánh

Đây là một khung HTML đơn giản để bạn khởi động bất kỳ dự án HTML mới. Nó bao gồm tất cả các phương pháp hay nhất hiện nay để chia sẻ trên mạng xã hội.

<!doctype html>

<html lang="en">

  <head>

    <title>Your Page Title</title>



    <meta charset="utf-8" />

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



    <meta name="author" content="Your name" />

    <meta name="description" content="Brief description" />



    <meta property="og:title" content="Your Page Title" />

    <meta property="og:description" content="Brief description" />

    <meta property="og:image" content="/some-image.png" />

    <meta property="og:url" content="/this-page.html" />

    <meta property="og:site_name" content="Your Site Name" />

    <meta name="twitter:card" content="summary_large_image" />

    <meta name="twitter:image:alt" content="image description" />



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



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

  </head>



  <body>



    <h1>Your content here!</h1>

    

    <script src="script.js"></script>

  </body>

</html>

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.

<header></header> Represents introductory content, typically containing navigational links or a logo.
<nav></nav> Defines a set of navigation links.
<main></main> Specifies the main content of a document, unique and central to the page.
<section></section> Groups related content together, typically with a heading.
<article></article> Represents a self-contained piece of content, such as a blog post or news article.
<aside></aside> Contains content that is tangentially related to the main content, like sidebars or ads.
<footer></footer> Represents the footer for a document or section, often containing copyright information or links.
<figure></figure> Encapsulates a visual representation, such as an image or diagram, with an optional caption.
<figcaption></figcaption> Provides a caption for a "figure" element.
<details></details> Creates a collapsible content section that users can toggle open or closed.
<summary></summary> Defines a visible heading for a "details" element, which users can click to view the details.
<time></time> Represents a specific time or date.
<mark></mark> Highlights text for reference purposes.
<code></code> Represents a fragment of computer code.
<address></address> Contains contact information, typically for the author of the document.