CHEAT SHEET

Element	Description
<!DOCTYPE html>	Declares HTML5 document type
<html>	Root element of an HTML page
<head>	Contains metadata & page info
<title>	Sets page title in browser tab
<body>	Contains visible content
<meta>	Viewport, charset & SEO tags
<link>	Links external CSS or favicons
<script>	Embeds or links JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

Element	Description	Example
<h1> - <h6>	Headings (h1 highest)	<h1>Heading</h1>
<p>	Paragraph block	<p>Text</p>
<a>	Hyperlink	<a href="...">Link</a>
<img>	Image tag	<img src="x.jpg" alt="pic">
<br> / <hr>	Line break / Horizontal rule	<br> / <hr>
<strong>	Important text (bold)	<strong>Bold</strong>
<em>	Emphasized text (italic)	<em>Italic</em>
<span> / <div>	Inline / Block container	<div class="box">

<h1>Welcome</h1>
<p>This is <strong>bold</strong> and <em>italic</em> text.</p>
<a href="https://example.com" target="_blank">Visit Example</a>
<img src="image.jpg" alt="Sample Image" width="200">
<div class="box">This is a div container.</div>

Element	Description	Example
<ul>	Unordered list (bullets)	<ul>...</ul>
<ol>	Ordered list (numbers)	<ol>...</ol>
<li>	List item entry	<li>Item</li>

<!-- Unordered List -->
<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

<!-- Ordered List -->
<ol>
  <li>First</li>
  <li>Second</li>
</ol>

Element	Description
<table>	Table container
<tr>	Table row
<th>	Table header cell (bold/centered)
<td>	Table data cell
<caption>	Table caption / title

<table border="1">
  <caption>Student Info</caption>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>20</td>
  </tr>
</table>

Element	Description	Example
<form>	Form container	<form action="#">
<input>	User input control	<input type="text">
<label>	Label for form element	<label for="name">
<select> / <option>	Drop-down list	<option value="1">
<textarea>	Multi-line input	<textarea rows="4">
<button>	Clickable button	<button type="submit">

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

  <select name="country">
    <option value="mm">Myanmar</option>
    <option value="us">USA</option>
  </select><br>

  <button type="submit">Submit</button>
</form>

Element	Description
<header>	Top banner / introductory content
<nav>	Navigation menu links
<main>	Central content of the document
<section>	Thematic section of content
<article>	Independent, self-contained post
<aside>	Sidebar or supplementary info
<footer>	Footer info, copyright, contact

<header><h1>Header</h1></header>
<nav><a href="#">Home</a></nav>
<main>
  <section>Main Article Content</section>
  <aside>Related Links</aside>
</main>
<footer>Footer Info</footer>

Attribute	Description
id	Unique identifier for single element
class	Reusable class names for styling
style	Inline CSS definitions
href	Link URL destination
src	Path to media resource (img, script)
alt	Alternative text for screen readers
target	Where to open link (e.g. _blank)

<a href="https://example.com" target="_blank" title="Visit Example">
  Example Link
</a>

<div id="main" class="container" style="color: blue;">
  Content
</div>

<!-- This is a comment -->
<p>This text is visible.</p>
<!-- Another comment -->

• Always close tags cleanly and properly.
• Use semantic HTML tags for better SEO & accessibility.
• Validate markup using the official W3C Validator.
• Keep structure (HTML) and presentation (CSS) separated.