← Back to Curriculum

Introduction to HTML

📚 Lesson 1 of 20 ⏱️ 15 min

Introduction to HTML

15 min

HTML, or HyperText Markup Language, is the standard markup language used to create and design documents on the World Wide Web. It is the backbone of every website you visit, defining the structure and layout of web pages.

At its core, HTML uses a system of 'tags' to label different types of content. For instance, you use specific tags to tell the browser that a piece of text is a heading, a paragraph, a link, or an image. These tags are enclosed in angle brackets, like <p> for a paragraph.

HTML is not a programming language in the sense of Python or Java; it doesn't have logic, loops, or variables. Instead, it is a declarative language that describes *what* content is, rather than *how* to process it.

The current standard, HTML5, was released in 2014 and introduced a wealth of new features. It added semantic elements (like <article> and <nav>) that describe the meaning of content, not just its presentation. It also brought native support for audio and video, reducing the need for external plugins like Flash.

Understanding HTML is the first step in your web development journey. It works hand-in-hand with CSS (Cascading Style Sheets) for styling and JavaScript for interactivity. Together, these three technologies form the triad of frontend web development.

Key Concepts

  • HTML stands for HyperText Markup Language.
  • It uses 'tags' to define elements and structure content.
  • HTML is a markup language, not a programming language.
  • HTML5 is the latest version with semantic and multimedia features.
  • Browsers read HTML to render web pages visually.

Learning Objectives

Master

  • The definition and purpose of HTML
  • The difference between HTML tags and elements
  • The role of HTML in the web development stack
  • How browsers interpret HTML code

Develop

  • Structural thinking for web documents
  • Ability to distinguish content from presentation
  • Familiarity with web standards terminology

Tips

  • Always close your tags (e.g., </p>) to avoid unexpected layout issues.
  • Use lowercase for tag names (e.g., <div> not <DIV>) as a modern convention.
  • Indent your code to make the structure readable.
  • Think about the meaning of the content, not just how it looks.

Common Pitfalls

  • Confusing HTML (structure) with CSS (style).
  • Forgetting to close tags, which can break the page layout.
  • Using deprecated tags like <font> or <center> (use CSS instead).
  • Overusing <div> tags instead of semantic elements.

Summary

  • HTML is the standard language for creating web pages.
  • It uses tags to structure content.
  • HTML5 is the modern standard with semantic features.
  • It is the foundation of all web development.

Exercise

Create a simple heading and a paragraph to introduce yourself.

<h1>Hello, World!</h1>
<p>My name is [Your Name] and I am learning HTML.</p>

Exercise Tips

  • Make sure the <h1> tag is closed with </h1>.
  • Ensure the <p> tag is closed with </p>.
  • Check your spelling of the tags.

Code Editor

Output