HTML
Anatomy

HTML elements are the basic building blocks of web pages. Most elements consist of an opening tag, content, and a closing tag. Think of them as containers that tell the browser how to display content.

<!-- Headings -->
<h1>Main Heading</h1>
<h2>Subheading</h2>

<!-- Paragraph -->
<p>This is a paragraph.</p>

<!-- Self-closing tag -->
<img src="image.jpg" alt="Description">

Attributes provide additional information about elements and are always specified in the opening tag. They consist of a name and a value, like adjusting settings for each element.

<!-- Common attributes -->
<div id="main-content" class="container">
  Content
</div>

<img
  src="photo.jpg"
  alt="A beautiful sunset"
  width="600"
>

<a href="https://example.com">Link</a>

HTML offers several ways to create lists: unordered (bulleted), ordered (numbered), and definition lists. Lists help organize related items in a structured way.

<!-- Unordered list -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Ordered list -->
<ol>
  <li>Learn HTML</li>
  <li>Learn CSS</li>
  <li>Learn JavaScript</li>
</ol>

Semantic HTML uses elements that clearly describe their meaning to both the browser and developers. This improves accessibility, SEO, and code maintainability.

<header>
  <h1>My Website</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
  </nav>
</header>

<main>
  <article>
    <h2>Article Title</h2>
    <p>Content...</p>
  </article>
</main>

<footer>
  <p>© 2025</p>
</footer>

Forms allow users to input data and interact with your website. They include various input types, labels, buttons, and other controls for collecting information.

<form>
  <label for="name">Name:</label>
  <input
    type="text"
    id="name"
    required
  >

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

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

Tables display structured, tabular data in rows and columns. They consist of headers, body rows, and optional footers to organize information clearly.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
      <th>Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Structure</td>
      <td>1993</td>
    </tr>
  </tbody>
</table>