Level: Beginner

Introduction to HTML

HTML (HyperText Markup Language) is the foundation of every website. It describes the structure of a web page using elements such as headings, paragraphs, links, and images.

What is HTML?

  • HTML stands for HyperText Markup Language.
  • HTML is used to create and structure web pages on the World Wide Web.
  • HTML is a markup language (not a programming language).
  • HTML uses elements (tags) to describe content like text, images, links, and forms.

Why Learn HTML?

  • HTML is required for all websites and web apps.
  • It works together with CSS (design) and JavaScript (interactivity).
  • HTML is beginner-friendly and quick to learn.
  • Semantic HTML helps accessibility and SEO.

Key Definitions

  • Tag: The markup inside angle brackets, like <p> or </p>.
  • Element: The full structure, usually opening tag + content + closing tag, like <p>Hello</p>.
  • Attribute: Extra information inside the opening tag, like href="..." in a link.
  • Void elements: Some elements don’t have closing tags (example: <img>, <br>).

Basic HTML Page

Basic HTML Pagehtml
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>This is a Title</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <p>This is a Paragraph</p>
  </body>
</html>

Example Explanation

HTML Boilerplate: A Quick Breakdown
Tag /ElementExplanation
<!DOCTYPE html>Declares the document type as HTML5.
<html lang="en">The root element. lang helps accessibility tools and search engines understand the page language.
<head>Contains metadata like title, charset, viewport, and SEO tags.
<meta charset="UTF-8">Sets character encoding so text displays correctly.
<title>Title shown in the browser tab and used by search engines.
<body>Contains visible page content (text, images, links, etc.).
<h1>Main heading (usually the page title). Best practice: one clear h1 per page.
<p>Paragraph text element used for normal reading content.

What’s Next?

  • Next, you’ll learn elements and tags (how HTML building blocks work).
  • Then you’ll learn attributes (how to add more info like links and image sources).
  • After that: headings, paragraphs, links, images, lists, tables, and forms.

Intro Quiz

Question 1 of 3

What does HTML stand for?