Understanding the Basics of HTML and Its Tags

What is HTML?

HTML stands for HyperText Markup Language. It's the foundation of the web—used to define the structure of web pages.

The HyperText part means it allows us to create links (called hyperlinks) between different web pages, forming the interconnected network we call the World Wide Web. The Markup part means we use tags (or elements) to label and organize the content.

Imagine you're building a house:

HTML is the skeleton and structure of the house (walls, rooms, etc.).
CSS is like the paint and decorations (styles, colors, layouts).
JavaScript is like the wiring and appliances (making things interactive and functional).

Every website you visit—whether it's a blog, a portfolio, an online store, or a social network—relies on HTML to define its structure.

Structure of an HTML Document

Every HTML document follows a specific format. Think of it like a recipe that browsers understand to display a webpage. Here's a simple example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first webpage.</p>
  </body>
</html>

Breaking it down

Part	What it does
`<!DOCTYPE html>`	Tells the browser this is an HTML5 document
`<html>`	The root element—wraps everything on the page
`<head>`	Holds metadata (info about the page, not visible content)
`<meta charset="UTF-8">`	Sets character encoding so text/symbols display correctly
`<meta name="viewport" ...>`	Makes the page responsive on mobile devices
`<title>`	The text shown in the browser tab
`<body>`	Everything visible on the page goes here

💡 Nearly everything you write in HTML lives inside <body>. The <head> is for the browser and search engines, not for what visitors see.

Tags, Elements, and Attributes

Before diving into specific tags, it helps to know the vocabulary:

Tag — the markup itself, like <p> or </p>
Element — an opening tag, its content, and its closing tag together: <p>Hello</p>
Attribute — extra information added inside the opening tag, like <a href="https://example.com">

<a href="https://example.com" target="_blank">Visit Site</a>

Here, href and target are attributes that give the <a> element more instructions.

Most tags come in pairs (<p>...</p>), but some are self-closing because they don't wrap around content:

<img src="photo.jpg" alt="A description" />
<br />
<hr />

Headings

HTML gives you six levels of headings, from most to least important:

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<h4>Smaller Heading</h4>
<h5>Even Smaller</h5>
<h6>Smallest Heading</h6>

💡 Use only one <h1> per page—it should represent the main topic. Then move down through <h2>, <h3>, etc. as you go deeper into subtopics. Don't skip levels just to make text smaller—use CSS for styling instead.

Text Content Tags

<p>This is a paragraph of text.</p>
 
<strong>This text is important (bold).</strong>
<em>This text is emphasized (italic).</em>
 
<br /> <!-- line break -->
<hr /> <!-- horizontal rule / divider -->
 
<span>An inline container for styling small bits of text.</span>

Tag	Purpose
`<p>`	A paragraph
`<strong>`	Bold, semantically "important" text
`<em>`	Italic, semantically "emphasized" text
`<br>`	A single line break
`<hr>`	A horizontal divider line
`<span>`	A generic inline wrapper, useful for styling

💡 <strong> and <em> aren't just for bold/italic looks—they tell screen readers and search engines the text actually matters. If you just want visual styling with no semantic meaning, use CSS instead.

Links

<a href="https://example.com">Visit Example</a>
<a href="https://example.com" target="_blank">Opens in a new tab</a>
<a href="#section-2">Jump to a section on this page</a>
<a href="mailto:someone@example.com">Send an email</a>

href — the destination URL (required)
target="_blank" — opens the link in a new tab
Linking to #id jumps to an element on the same page with a matching id

Images

<img src="cat.jpg" alt="A sleeping orange cat" width="400" />

src — the image file path or URL
alt — describes the image for screen readers and shows if the image fails to load (always include this)
width / height — optional sizing (better handled with CSS in real projects)

Lists

Unordered list (bullets):

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Ordered list (numbered):

<ol>
  <li>Preheat the oven</li>
  <li>Mix the ingredients</li>
  <li>Bake for 20 minutes</li>
</ol>

Divs and Semantic Layout Tags

<div> is a generic block-level container with no meaning of its own—useful for grouping content and applying CSS layout.

<div class="card">
  <h2>Card Title</h2>
  <p>Some card content.</p>
</div>

Modern HTML also offers semantic tags that describe what a section of the page actually is, which helps accessibility and SEO:

<header>Site header / navigation</header>
<nav>Navigation links</nav>
<main>Main page content</main>
<section>A distinct section of content</section>
<article>Self-contained content, like a blog post</article>
<aside>Side content, like a sidebar</aside>
<footer>Site footer</footer>

💡 Prefer semantic tags (<header>, <main>, <footer>, etc.) over generic <div>s when the content has a clear role—it's better for accessibility tools and search engines.

Forms

Forms let users submit information.

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Enter your name" />
 
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />
 
  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea>
 
  <button type="submit">Send</button>
</form>

Tag / Attribute	Purpose
`<form>`	Wraps the whole form; `action` is where data goes, `method` is how it's sent
`<input type="text">`	Single-line text field
`<input type="email">`	Text field with built-in email validation
`<textarea>`	Multi-line text field
`<label for="...">`	Describes an input—clicking the label focuses the input
`required`	Makes a field mandatory before submitting
`<button type="submit">`	Submits the form

Tables

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>28</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>34</td>
    </tr>
  </tbody>
</table>

<table> — the table wrapper
<thead> / <tbody> — groups header rows vs. body rows
<tr> — table row
<th> — header cell (bold, for column titles)
<td> — regular data cell

Comments

<!-- This is a comment. It won't show up on the page. -->
<p>Visible text</p>

Comments are useful for leaving notes in your code without affecting what visitors see.

Quick Reference Cheat Sheet

<h1> to <h6>     <!-- Headings -->
<p>               <!-- Paragraph -->
<a href="">       <!-- Link -->
<img src="" alt=""> <!-- Image -->
<ul> / <ol> / <li>  <!-- Lists -->
<div> / <span>    <!-- Generic containers -->
<header> <nav> <main> <section> <article> <aside> <footer>  <!-- Semantic layout -->
<form> <input> <textarea> <button> <label>  <!-- Forms -->
<table> <tr> <th> <td>  <!-- Tables -->
<strong> / <em>   <!-- Bold / italic (semantic) -->
<br> / <hr>       <!-- Line break / divider -->
<!-- comment -->  <!-- Comments -->