>_
CodeXPal
📄

Introduction to HTML

Beginner
60 XP
20 min
Lesson Content

What is HTML?

HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications. HTML describes the structure of a web page semantically and originally included cues for its appearance.

Why Learn HTML?

  • Foundation of Web Development: Every website uses HTML as its foundation
  • Easy to Learn: HTML is beginner-friendly with simple syntax
  • Universal: Works in all browsers and is supported everywhere
  • Career Opportunities: Essential skill for web developers, designers, and content creators

Key Concepts:

  • Elements: The building blocks of HTML (like headings, paragraphs, links, images)
  • Tags: Keywords surrounded by angle brackets (< >) that define elements
  • Attributes: Additional information about elements (like href for links, src for images)
  • Document Structure: HTML documents have a specific structure with <html>, <head>, and <body> sections

Basic HTML Structure:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first paragraph.</p>
  </body>
</html>

Understanding the Structure:

  • <!DOCTYPE html> - Declares this is an HTML5 document
  • <html> - Root element that contains all other elements
  • <head> - Contains metadata (title, links to CSS, etc.) - not visible on the page
  • <title> - Sets the browser tab title
  • <body> - Contains all visible content
  • <h1> - Main heading (largest)
  • <p> - Paragraph of text

HTML uses a hierarchical structure where elements can contain other elements, creating a tree-like document structure. This makes it easy to organize and style content.

Example Code

Create a simple HTML page with a heading and paragraph.

<!DOCTYPE html>
<html>
  <head>
    <title>My Practice Page</title>
  </head>
  <body>
    <!-- Add a heading here using <h1> -->
    <!-- Add a paragraph here using <p> -->
  </body>
</html>

Expected Output:

Hello HTML
Study Tips
  • •Read the theory content thoroughly before practicing
  • •Review the example code to understand key concepts
  • •Proceed to the Practice tab when you're ready to code