HTML Examples with Example

HTML examples help beginners understand how HTML works in real-world situations. In this tutorial, you will learn HTML step-by-step with simple and clear code examples.

1. Basic HTML Example

This is the simplest HTML document structure:

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>

<h1>Welcome to HTML</h1>
<p>This is my first HTML example.</p>

</body>
</html>

Explanation:

<!DOCTYPE html> – Defines HTML5 document
<html> – Root element
<head> – Contains title and metadata
<body> – Visible content

2. HTML Headings Example

HTML provides 6 heading levels:

<h1>This is H1</h1>
<h2>This is H2</h2>
<h3>This is H3</h3>
<h4>This is H4</h4>
<h5>This is H5</h5>
<h6>This is H6</h6>

<h1> is largest and most important heading.

3. HTML Paragraph Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

4. HTML Formatting Examples

<b>Bold Text</b>
<strong>Important Text</strong>
<i>Italic Text</i>
<em>Emphasized Text</em>
<u>Underlined Text</u>

5. HTML Link Example

<a href="https://www.google.com">Visit Google</a>

<a> tag creates hyperlinks
href attribute defines destination

6. HTML Image Example

<img src="image.jpg" alt="Sample Image" width="300">

Attributes:

src – Image path
alt – Alternative text
width – Image size

7. HTML List Examples

Unordered List:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Mango</li>
</ul>

Ordered List:

<ol>
  <li>Step 1</li>
  <li>Step 2</li>
  <li>Step 3</li>
</ol>

8. HTML Table Example

<table border="1">
<tr>
  <th>Name</th>
  <th>Age</th>
</tr>
<tr>
  <td>Dharmesh</td>
  <td>25</td>
</tr>
</table>

9. HTML Form Example

<form>
  Name: <input type="text"><br><br>
  Email: <input type="email"><br><br>
  <input type="submit" value="Submit">
</form>

Forms collect user input.

10. HTML Button Example

<button>Click Me</button>

10.1. HTML Div Example

<div style="background-color:lightblue;">
  <h2>Section Title</h2>
  <p>This is inside div.</p>
</div>

<div> groups elements together.

10.2. HTML Span Example

<p>This is <span style="color:red;">red</span> text.</p>

<span> is inline container.

10.3. HTML Audio Example

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

10.4. HTML Video Example

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

10.5. HTML Comment Example

<!-- This is a comment -->

Comments are not visible in browser.

Complete Mini HTML Project Example

<!DOCTYPE html>
<html>
<head>
<title>Mini Project</title>
</head>
<body>

<h1>My Portfolio</h1>

<p>Hello, my name is Dharmesh.</p>

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

<h2>Contact Me</h2>
<form>
  Name: <input type="text"><br><br>
  Email: <input type="email"><br><br>
  <input type="submit">
</form>

</body>
</html>

Real-World Usage of HTML Examples

HTML examples are used in:

Website development
Portfolio creation
Blog design
E-commerce pages
Online forms

HTML examples help beginners understand real-world usage of HTML. Practice these examples daily to become confident in web development.

HTML APIs HTML Tags Ordered Alphabetically