HTML Basic Examples

Add W3Buddy as a preferred source on Google

Article Summary

Explore simple and complete HTML basic examples including text, links, images, and lists to understand how HTML works.

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

 → important text
 → emphasized text
 → highlighted text
 → smaller text
 → 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