HTML ✦ Thuong Truong's blog

Bookmark

📄 Basic Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <main>
        <section>
            <h2>About</h2>
            <p>This is a simple HTML document.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2025 My Website</p>
    </footer>
</body>
</html>

📚 Common Elements

TagDescription<html>Root of an HTML document<head>Metadata container<title>Sets the title in browser tab<body>Main content area<h1> to <h6>Headings (h1 = most important)<p>Paragraph<br>Line break<hr>Horizontal rule<a href="">Hyperlink<img src="" alt="">Image<strong>Bold<em>Italic<span>Inline container<div>Block container<pre>Preformatted text<code>Inline code

🔗 Links

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Visit Example
</a>

🖼️ Images

<img src="image.jpg" alt="Description" width="200" height="100">

📋 Lists

Unordered

Ordered

Description

<ul>
  <li>Item One</li>
  <li>Item Two</li>
</ul>

🧾 Tables

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>

🧠 Forms

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />

  <input type="submit" value="Submit" />
</form>

Input Types

<input type="text" />
<input type="email" />
<input type="password" />

<input type="radio" name="gender" value="male" /> Male
<input type="radio" name="gender" value="female" /> Female

<input type="checkbox" id="subscribe" name="subscribe" />
<label for="subscribe">Subscribe to newsletter</label>

<input type="submit" value="Submit" />
<input type="reset" value="Reset" />

<input type="file" />
<input type="number" />
<input type="date" />

🧱 Semantic Tags

TagPurpose<header>Top section of a page<footer>Bottom section of a page<nav>Navigation links<main>Main content<article>Independent content<section>Thematic grouping<aside>Sidebar content<figure>Self-contained media<figcaption>Caption for figure

🔧 Meta Tags

<meta charset="UTF-8" />
<meta name="description" content="Free HTML cheatsheet" />
<meta name="keywords" content="HTML, Cheatsheet, Web Development" />
<meta name="author" content="Your Name" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

⚙️ Miscellaneous

<!-- This is a comment -->

Suggest improve•Raise issue

Golang

JavaScript

Want to update?

Subscribe to my blog to receive the latest updates from us.

Monthly articles

New articles will be created every month.

No spam

All notifications are notified to you, not spam or advertising.