What is HTML?

HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. Every website you visit is built with HTML at its core.

HTML is not a programming language — it is a markup language. It tells the browser how to display content: headings, paragraphs, images, links, and more.

HTML was created by Tim Berners-Lee in 1991. The current version is HTML5, which introduced many powerful new features.

What HTML Does

Defines the structure of a web page
Marks up headings, paragraphs, lists, links
Embeds images, video, and audio
Creates forms for user input
Works together with CSS (styling) and JavaScript (behavior)

Try in Editor

2

HTML Page Structure

Every HTML page follows a basic structure. Here is the minimal template for a valid HTML5 document:

HTML

<!-- This is the document type declaration -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>Welcome to my first web page.</p>
</body>
</html>

Key Parts Explained

Tag	Purpose
`<!DOCTYPE html>`	Tells the browser this is HTML5
`<html>`	Root element of the page
`<head>`	Contains metadata (not visible)
`<title>`	Text shown in browser tab
`<body>`	All visible page content goes here

Try in Editor

3

HTML Elements & Tags

An HTML element is made up of an opening tag, content, and a closing tag.

HTML

<!-- Anatomy of an HTML element -->
<p>This is a paragraph.</p>

<!-- Opening tag -->  <p>
<!-- Content ----->  This is a paragraph.
<!-- Closing tag --> </p>

<!-- Self-closing (void) elements have no closing tag -->
<br>
<img src="photo.jpg" alt="A photo">
<input type="text">

Elements can be nested inside each other. A <div> can contain <p> tags, which can contain <strong> tags and so on.

Try in Editor

4

HTML Attributes

Attributes provide extra information about an element. They are always placed inside the opening tag as name="value" pairs.

HTML

<!-- href attribute on anchor -->
<a href="https://example.com" target="_blank">Visit Example</a>

<!-- src and alt attributes on image -->
<img src="cat.jpg" alt="A cute cat" width="300">

<!-- id and class attributes -->
<div id="header" class="container blue">Content</div>

<!-- style attribute for inline CSS -->
<p style="color:red; font-size:18px;">Red text</p>

Always use alt attributes on images for accessibility and SEO. Screen readers use the alt text to describe images to visually impaired users.

Try in Editor

5

Headings & Text

HTML provides six levels of headings (<h1> to <h6>) and several text formatting elements.

HTML

<!-- Headings: h1 is the most important -->
<h1>Main Title (use once per page)</h1>
<h2>Section Title</h2>
<h3>Sub-Section</h3>
<h4>Sub-Sub-Section</h4>

<!-- Text elements -->
<p>This is a paragraph of text.</p>
<p>This text has <strong>bold</strong> and <em>italic</em> words.</p>
<p>H<sub>2</sub>O and E=mc<sup>2</sup></p>
<mark>Highlighted text</mark>
<del>Deleted text</del>
<br><!-- Line break -->
<hr><!-- Horizontal rule -->

Try in Editor

6

Links (Anchor Tags)

Links are created with the <a> (anchor) tag. The href attribute specifies the destination URL.

HTML

<!-- External link -->
<a href="https://google.com">Go to Google</a>

<!-- Open in new tab -->
<a href="https://google.com" target="_blank" rel="noopener">New Tab</a>

<!-- Internal link (same site) -->
<a href="/about.html">About Us</a>

<!-- Link to section on same page -->
<a href="#section1">Jump to Section 1</a>

<!-- Email link -->
<a href="mailto:hello@example.com">Email Us</a>

<!-- Image as a link -->
<a href="/"><img src="logo.png" alt="Logo"></a>

Try in Editor

7

Images

Images are embedded using the <img> tag. It is a void element — no closing tag needed.

HTML

<!-- Basic image -->
<img src="photo.jpg" alt="A landscape photo">

<!-- With fixed dimensions -->
<img src="photo.jpg" alt="Photo" width="600" height="400">

<!-- Responsive image (CSS) -->
<img src="photo.jpg" alt="Photo" style="max-width:100%; height:auto;">

<!-- Figure with caption -->
<figure>
  <img src="chart.png" alt="Sales chart">
  <figcaption>Figure 1: Monthly Sales</figcaption>
</figure>

Try in Editor

8

Lists

HTML supports three types of lists: unordered, ordered, and description lists.

HTML

<!-- Unordered list (bullet points) -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Ordered list (numbered) -->
<ol>
  <li>Open the editor</li>
  <li>Write your HTML</li>
  <li>Click Run</li>
</ol>

<!-- Description list -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Try in Editor

9

Tables

HTML tables organize data into rows and columns. Use them for tabular data, not for page layout.

HTML

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>28</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>34</td>
      <td>London</td>
    </tr>
  </tbody>
</table>

Try in Editor

10

Forms

Forms allow users to submit data. The <form> element wraps all input fields.

HTML

<form action="/submit" method="post">

  <!-- Text input -->
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

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

  <!-- Dropdown -->
  <select name="country">
    <option value="us">United States</option>
    <option value="tr">Turkey</option>
  </select>

  <!-- Textarea -->
  <textarea name="message" rows="4"></textarea>

  <!-- Checkbox -->
  <input type="checkbox" id="agree" name="agree">
  <label for="agree">I agree</label>

  <!-- Submit button -->
  <button type="submit">Send</button>
</form>

Try in Editor

11

Semantic HTML

Semantic HTML uses meaningful tags that describe the purpose of their content. This is important for SEO, accessibility, and code readability.

HTML

<header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

<main>
  <article>
    <h1>Blog Post Title</h1>
    <p>Content here...</p>
  </article>

  <aside>
    <h2>Related Posts</h2>
  </aside>
</main>

<footer>
  <p>&copy; 2025 My Site</p>
</footer>

<!-- Other semantic elements -->
<section>...</section>
<figure>...</figure>
<time datetime="2025-01-01">January 1</time>

Using semantic HTML improves your Google ranking because search engines understand the structure of your content better. Always use <h1> for the main title and <article> for blog posts.

Try in Editor

12

Essential HTML Tag Reference

Quick reference of the most commonly used HTML tags:

Tag	Description
`<div>`	Generic block container
`<span>`	Generic inline container
`<p>`	Paragraph
`<a>`	Hyperlink (anchor)
`<img>`	Image
`<ul> / <ol>`	Unordered / Ordered list
`<li>`	List item
`<table>`	Table
`<form>`	Form container
`<input>`	Input field (text, email, etc.)
`<button>`	Clickable button
`<header>`	Page or section header
`<footer>`	Page or section footer
`<nav>`	Navigation links
`<main>`	Main content of page
`<section>`	Thematic grouping of content
`<article>`	Self-contained content (blog post)
`<aside>`	Side content / sidebar
`<script>`	JavaScript code or link
`<link>`	Link to CSS stylesheet
`<meta>`	Metadata (charset, viewport, SEO)

Next: Learn CSS →

Style your HTML with colors, fonts, layouts and more.

Start CSS Tutorial

Learn HTML – Free Complete Tutorial

What is HTML?

What HTML Does

HTML Page Structure

Key Parts Explained

HTML Elements & Tags

HTML Attributes

Headings & Text

Links (Anchor Tags)

Images

Lists

Tables

Forms

Semantic HTML

Essential HTML Tag Reference