Beginner14 min readUpdated 2026-08-08

Introduction to HTML

HTML is the structure layer of the web. Learn how elements, attributes and semantic tags turn plain text into a real, accessible web page.

Download PDF

Every website you have ever opened — a bank portal, a government result page, a startup landing page — arrives in your browser as HTML. HyperText Markup Language is not a programming language: it has no loops, no conditions and no arithmetic. Its single job is to describe what a piece of content *is*, so the browser knows how to present it and assistive technology knows how to announce it.

Think of a web page as a building. HTML is the steel frame and the room layout, CSS is the paint and furniture, and JavaScript is the electricity that makes things move. Get the frame wrong and no amount of paint saves the building — which is why HTML is the first thing you learn and the last thing you should rush.

The anatomy of an element

An HTML element is normally written as an opening tag, some content, and a closing tag. The tag name goes inside angle brackets, and the closing tag repeats the name after a forward slash.

<p>Vidyastra teaches you to learn, grow and transform.</p>

A paragraph element

Some elements carry no content and therefore have no closing tag. These are called void elements — images, line breaks and horizontal rules are the common ones.

<img src="/seal.png" alt="Vidyastra seal">
<br>
<hr>

Void elements need no closing tag

Attributes: extra information on an element

Attributes live inside the opening tag and configure the element. They always follow a name="value" form. Some attributes are global (they work on any element, like id, class, title and lang) while others belong to a specific element (src and alt only make sense on an image).

<a href="https://vidyastra.in" target="_blank" rel="noopener">
  Visit Vidyastra
</a>

An anchor element with two attributes

The alt attribute is not optional

Screen readers announce the alt text of an image, and search engines index it. If an image is purely decorative write alt="" — but never omit the attribute entirely.

The skeleton of every HTML document

A valid page always starts with a doctype declaration, followed by a single html root element that contains exactly two children: head and body. The head holds metadata the user never sees directly; the body holds everything that renders on screen.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Introduction to HTML — Vidyastra</title>
    <meta name="description" content="Learn the structure layer of the web.">
  </head>
  <body>
    <h1>Introduction to HTML</h1>
    <p>Structure first, styling later.</p>
  </body>
</html>

A complete, minimal HTML5 document

<!DOCTYPE html> tells the browser to use standards mode — omit it and you get quirks mode, where layout rules silently change.
lang="en" on the html element helps screen readers pick the correct pronunciation and helps search engines target the right audience.
The viewport meta tag is what makes a page respond correctly on mobile screens.
The title element is what appears in the browser tab and as the clickable headline in search results.

Text content: headings, paragraphs and lists

Headings run from h1 to h6 and express hierarchy, not size. Use exactly one h1 per page for the main subject, then nest h2 sections under it and h3 subsections under those. Skipping levels for visual reasons breaks the document outline that screen-reader users navigate by.

<h1>Web Development</h1>

<h2>What you will learn</h2>
<ul>
  <li>HTML — structure</li>
  <li>CSS — presentation</li>
  <li>JavaScript — behaviour</li>
</ul>

<h2>Study order</h2>
<ol>
  <li>Write valid markup</li>
  <li>Style it responsively</li>
  <li>Add interactivity</li>
</ol>

Hierarchy, ordered and unordered lists

Semantic HTML

A div carries no meaning — it is a generic box. Semantic elements describe the role of the content they wrap, which improves accessibility, SEO and the readability of your own code. Reach for a div only when no semantic element fits.

<body>
  <header>
    <nav>
      <a href="/">Home</a>
      <a href="/learn">Learn</a>
    </nav>
  </header>

  <main>
    <article>
      <h1>Introduction to HTML</h1>
      <section>
        <h2>Elements and attributes</h2>
        <p>An element describes what content is.</p>
      </section>
    </article>
    <aside>Related topics</aside>
  </main>

  <footer>&copy; 2026 Vidyastra</footer>
</body>

The same layout, written semantically

header — introductory content or navigation for a page or section.
nav — a block of major navigation links.
main — the dominant content of the document; only one per page.
article — a self-contained piece that would still make sense elsewhere.
section — a thematic grouping, normally with its own heading.
aside — tangential content such as related links or a sidebar.
footer — closing information for its nearest sectioning ancestor.

Links, images and forms

The anchor element is what makes the web a web. A relative href points within your own site; an absolute href points to another origin. Images need a src and an alt, and should declare width and height so the browser can reserve space and avoid layout shift.

<form action="/subscribe" method="post">
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Subscribe</button>
</form>

A minimal accessible form

Always pair a label with its input

The for attribute of the label must match the id of the input. This lets users tap the label to focus the field and lets screen readers announce what the field is for.

Common beginner mistakes

Using headings to control font size instead of using CSS.
Wrapping everything in divs when header, main, nav and footer exist.
Forgetting the alt attribute on images.
Nesting a block element such as div inside a p element — the browser silently closes the paragraph.
Leaving out the viewport meta tag and wondering why the site looks tiny on a phone.

What to do next

Open a plain text editor, save a file as index.html, paste the minimal document above and open it in a browser. Then rebuild a page you use every day — a college notice board or an exam result page — using only semantic HTML and no styling at all. If the structure reads correctly with the styling switched off, your markup is sound and you are ready for CSS.

Quick quiz

Five questions with instant feedback. Score: 0 / 5 (0 attempted)

1. What is the correct purpose of HTML?

2. Which of these is a void element that needs no closing tag?

3. How many <h1> elements should a typical page have?

4. What does the alt attribute on an image do?

5. Which element correctly wraps the dominant content of a page?

Flashcards

Tap a card to flip it.