1

HTML Basics - Getting Started

What is HTML?

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page using elements.

💡 Tip: HTML is not a programming language - it's a markup language that tells browsers how to display content.

Every HTML document starts with a document type declaration:

Basic HTML Structure 
<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is my first HTML page.</p>
</body>
</html>

HTML Elements and Tags

HTML elements are the building blocks of HTML pages. They consist of:

  • Opening Tag: <tagname>
  • Content: The text or other elements inside
  • Closing Tag: </tagname>

Live Editor Demo

Quick Quiz: HTML Basics

What does HTML stand for?

HyperText Markup Language
Hyper Transfer Markup Language
High Text Machine Language
Hyperlink and Text Markup Language
2

Text Formatting & Headings

Headings

HTML has six levels of headings from <h1> (most important) to <h6> (least important).

Heading Example 
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<h4>Smaller Heading</h4>
<h5>Even Smaller</h5>
<h6>Smallest Heading</h6>

Text Formatting Tags

HTML provides various tags for text formatting:

Text Formatting Examples 
<p>
    This is <b>bold text</b> and this is <strong>strong text</strong>.
</p>
<p>
    This is <i>italic text</i> and this is <em>emphasized text</em>.
</p>
<p>
    This is <mark>highlighted text</mark> and this is <small>small text</small>.
</p>
<p>
    Chemical formula: H<sub>2</sub>O
</p>
<p>
    Mathematical: x<sup>2</sup> + y<sup>2</sup>
</p>

Practice Exercises

Exercise 1: Create a Basic Page

Challenge: Create an HTML page with:

  • A main heading with your name
  • A paragraph introducing yourself
  • Use <strong> and <em> tags
  • Add your favorite quote in a blockquote

Exercise 2: Create a Recipe Page

Challenge: Create a recipe page with:

  • Recipe title as h1
  • Description paragraph
  • Ingredients list (unordered list)
  • Instructions (ordered list)
  • Preparation time in bold

Mini Projects

Project 1: Personal Portfolio

Build a simple portfolio page with:

  • Header with navigation
  • About section
  • Skills section with lists
  • Contact form
  • Footer with social links
🎯 Learning Goals: HTML structure, forms, lists, semantic elements

Project 2: Blog Article

Create a blog article page with:

  • Article title and metadata
  • Table of contents with links
  • Multiple sections with headings
  • Images with captions
  • Comments section
🎯 Learning Goals: Links, images, article structure, tables

Ready for More?

Congratulations on completing the HTML tutorial! Continue your web development journey:

  • Learn CSS to style your HTML pages
  • Learn JavaScript to add interactivity
  • Build real projects to practice your skills
  • Join our community for help and collaboration
Start Building Now