HTML Basic Examples

HTML is best understood by seeing and using simple examples.
This lesson shows basic but complete HTML examples that demonstrate how common tags work together.

Example 1: Basic HTML Page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Basic HTML example">
  <meta name="author" content="HTML Tutorial">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic HTML Page</title>
</head>
<body>
  <h1>Main Heading</h1>
  <p>This is a simple paragraph.</p>
</body>
</html>

Tags and Attributes Used

  • lang → document language
  • charset → character encoding
  • name → meta type
  • content → meta value
  • viewport → responsive layout

Example 2: Text Formatting

<p>
  This text is 
  <strong>bold</strong>, 
  <em>italic</em>, 
  <mark>highlighted</mark>, 
  <small>small</small>, 
  and <u>underlined</u>.
</p>

Tags Used

  • <strong> → important text
  • <em> → emphasized text
  • <mark> → highlighted text
  • <small> → smaller text
  • <u> → underlined text

Example 3: Link with Attributes

<a 
  href="https://example.com"
  target="_blank"
  rel="noopener noreferrer"
  title="Visit Example Website">
  Visit Example
</a>

Attributes Used

  • href → link destination
  • target → where link opens
  • rel → security and relationship
  • title → tooltip text

Example 4: Image with Attributes

<img 
  src="image.jpg"
  alt="Sample image"
  width="300"
  height="200"
  loading="lazy">

Attributes Used

  • src → image path
  • alt → alternative text
  • width / height → image size
  • loading → load behavior

Example 5: Simple List

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Tags Used

  • <ul> → unordered list
  • <li> → list item

Important Notes

  • HTML tags describe meaning, not design
  • Attributes provide extra information
  • Always use meaningful text for accessibility