HTML

If you want to build websites, there is one language you absolutely must learn first is HTML.

Before you worry about making things look pretty with colors and fonts (that’s CSS) or making things interactive (that’s JavaScript), you need structure.

What is HTML?

HTML stands for HyperText Markup Language. It is not a programming language in the traditional sense (like Python or Java); it is a markup language.

Think of a webpage like a human body.

• HTML is the skeleton. It provides the essential structure and holds everything together. Without bones, a body is just a shapeless blob. Without HTML, a website is just a shapeless blob of unformatted text.

• CSS would be the skin, hair, and clothing (the style).

• JavaScript would be the muscles and brain (the movement and logic).

We use HTML to tell a web browser (like Chrome or Safari) what different parts of content are. We tell the browser, "This text is a main heading," "This block is a paragraph," and "This part is an image."

HTML Tags

How do we tell the browser what something is? We use tags.

Imagine you are moving house and packing boxes. You wouldn't just throw everything into unlabeled boxes. You write labels on them: "Kitchen," "Books," "Bedroom."

HTML tags are those labels for your content. They are keywords surrounded by angle brackets: < and >.

The Structure of a Tag

Most HTML elements follow a simple "sandwich" structure:

1. An Opening Tag: This marks the beginning of an element. It tells the browser, "Hey, a specific type of content starts here." (e.g., <p>)

2. The Content: The actual text, image, or other data goes here.

3. A Closing Tag: This marks the end. It looks just like the opening tag but has a forward slash (/) before the keyword. (e.g., </p>)

Here is a real example used for a paragraph of text:

<p>This is a paragraph of text.</p>

• <p> tells the browser: "Start a paragraph here."

• This is a paragraph of text. is the content displayed on the screen.

• </p> tells the browser: "End the paragraph here."

Tag vs. Element: What’s the Difference?

As you learn, you will hear the words "tag" and "element" used interchangeably, but there is a slight difference.

• A Tag is just the part inside the angle brackets (e.g., <p> is a tag).

• An Element is the complete package: the opening tag, the content inside, AND the closing tag.

Think of it like a sandwich. The bread pieces are the tags. The whole thing bread, lettuce, tomato, and cheese together is the element.

Self-Closing Elements

Most elements have content inside them, so they need a closing tag to know where that content ends.

However, some elements don't hold text. They just are. These are called self-closing or void elements. Because they don't have content inside, they don't need a closing tag.

A perfect example is a line break, which just forces text to drop to the next line. The tag is <br>.

<p>First line.<br>Second line.</p>

Another common one is an image (<img>). You don't put text inside an image tag; you just tell the browser where the image file sits.

Block vs. Inline

When you put elements on a page, they generally fall into two categories based on how they arrange themselves: Block-level and Inline.

1. Block-level Elements

Imagine these elements are greedy; they want the whole line to themselves.

• They always start on a new line.

• They stretch out to take up the full available width of the page (from left to right).

Think of paragraphs in a book. Each new paragraph starts on a fresh line.

Examples: Headings (<h1>), Paragraphs (<p>), and dividers (<div>).

2. Inline Elements

These elements are cooperative. They only take up as much width as they need.

• They do not start on a new line.

• They sit next to other inline elements on the same line.

Think of bolding or highlighting a single word within a sentence. The highlighted word doesn't jump to a new line; it stays right there in the flow of text.

Examples: Spans (<span>), links (<a>), or emphasized text (<em>).

Here is a visual comparison:

<div>I am a block box.</div>
<div>I am another block box below it.</div>

<p>This is a paragraph with a <span>small inline span</span> inside it.</p>

Common HTML Tags

You don't need to memorize hundreds of tags to start. You can build a lot with just these four:

1. Headings (<h1> to <h6>)

These are block-level tags used for titles and subtitles. <h1> is the most important (usually the main page title), and <h6> is the least important.

<h1>Main Title</h1>
<h2>Section</h2>
<h3>Sub Section</h3>
<h4>Topic</h4>
<h5>Sub Topic</h5>
<h6>Note</h6>

2. Paragraphs (<p>)

This is the standard block-level tag for regular blocks of text.

<p>Welcome to my first webpage. I am learning HTML!</p>

3. Division (<div>)

The <div> is a generic block-level container. It doesn't have a specific meaning on its own. Think of it as a plain cardboard box used to group other elements together for layout purposes.

<div>
  <h2>Grouped Section</h2>
  <p>This heading and paragraph are inside a div container.</p>
</div>

4. Span (<span>)

The <span> is the inline version of a div. It's a generic container used to wrap small pieces of text within a larger block, usually to target them later with CSS colors or styles.

<p>My favorite color is <span>blue</span>.</p>

5. Links (<a>)

Used to navigate to another page or website.

<a href="https://google.com">Go to Google</a>

You can also open links in a new tab:

<a href="https://google.com" target="_blank">Open Google</a>

6. Images (<img>)

Used to display images on the webpage. It is a self-closing tag.

<img src="cat.jpg" alt="A cute cat" />

• src → image path

• alt → text shown if image fails(important for accessibility)

7. Lists

Unordered List

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Ordered List

<ol>
  <li>Install VS Code</li>
  <li>Learn HTML</li>
  <li>Build projects</li>
</ol>

8. Buttons (<button>)

Used for actions like submit, click, open modal, etc.

<button>Click Me</button>

9. Input (<input>)

Used to take user input.

<input type="text" placeholder="Enter your name" />

Other common types:

Password<input type="password" />
Email<input type="email" />
CheckBox<input type="checkbox" />
Radio<input type="radio" />

10. Forms (<form>)

Used to collect and submit user data.

<form>
  <input type="text" placeholder="Username" />
  <button>Submit</button>
</form>

Semantic Layout Tags

These help browsers, SEO, and screen readers understand your layout.

<header>Top section of page</header>
<nav>Navigation links</nav>
<main>Main content</main>
<section>Page section</section>
<article>Blog post or card</article>
<aside>Side content (tips, ads, related links)</aside>
<footer>Bottom of page</footer>
<mark>Highlighted important text</mark>

Example:

<header>
  <h1>My Blog</h1>
</header>

<main>
  <article>
    <h2>First Post</h2>
    <p>Hello <mark>world</mark>!</p>
  </article>

  <aside>
    <p>Tip: Use semantic tags for better SEO and accessibility.</p>
  </aside>
</main>

<footer>
  © 2026
</footer>

☕ Tea & Advice

The best way to learn HTML is to look at how others do it.

On almost any website (including this one!), you can right-click on any part of the page and select "Inspect" or "Inspect Element." or ctrl + shift + I

A panel will open at the bottom or side of your browser showing you the actual HTML skeleton of that page. Don't worry if it looks complicated right now, just try to spot the tags you just learned, like <div>, <p>, or <h1>.

Welcome to the world of web development!

To uncover more secrets about the invisible infrastructure powering your daily life, be sure to read my full series on The Internet.

Check out the full series: The Internet by Satpalsinh Rana