Learning HTML is much easier with practical examples. Below are some common HTML examples that can help beginners understand how various HTML elements work together to create a web page.
1. Basic HTML Structure
This example shows the basic structure of an HTML document, including the <!DOCTYPE>, <html>, <head>, and <body> elements.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First Web Page</title> </head> <body> <h1>Welcome to My Website</h1> <p>This is my first paragraph in HTML!</p> </body> </html>
2. Adding a Link
This example demonstrates how to create a hyperlink using the <a> element.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Links Example</title> </head> <body> <h1>HTML Links</h1> <p>Visit <a href="https://www.example.com" target="_blank">Example Website</a> for more information.</p> </body> </html>
3. Adding an Image
This example shows how to insert an image using the <img> element.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Images Example</title> </head> <body> <h1>HTML Images</h1> <img src="https://via.placeholder.com/150" alt="Placeholder Image"> </body> </html>
4. Creating a List
This example demonstrates both ordered and unordered lists using the <ol> and <ul> elements.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Lists Example</title>
</head>
<body>
<h1>HTML Lists</h1>
<h2>Ordered List</h2>
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h2>Unordered List</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
</body>
</html>
5. Creating a Table
This example demonstrates a simple HTML table using the <table>, <tr>, <th>, and <td> elements.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Tables Example</title>
</head>
<body>
<h1>HTML Tables</h1>
<table border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>25</td>
</tr>
</table>
</body>
</html>
6. Form Elements
This example shows a simple form with text input, radio buttons, and a submit button.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Forms Example</title>
</head>
<body>
<h1>HTML Forms</h1>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
7. Embedding a Video
This example demonstrates how to embed a video using the <video> element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Video Example</title>
</head>
<body>
<h1>HTML Video</h1>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
8. Using a CSS Style
This example adds a simple CSS style to an HTML document using the <style> tag within the <head>.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML CSS Example</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph styled with CSS.</p>
</body>
</html>
9. Responsive Design Example
This example uses a meta tag and media query to create a simple responsive web page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Design Example</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
width: 100%;
max-width: 600px;
margin: auto;
}
@media (max-width: 600px) {
body {
background-color: lightgrey;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Responsive Design</h1>
<p>Resize the browser window to see the background color change on smaller screens.</p>
</div>
</body>
</html>
10. Interactive HTML with JavaScript
This example adds a button that triggers a JavaScript alert when clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML JavaScript Example</title>
</head>
<body>
<h1>JavaScript Interaction</h1>
<button onclick="alert('Hello, World!')">Click Me</button>
</body>
</html>
These examples cover various aspects of HTML, from basic structure to more advanced elements like forms and responsive design. Practicing with these examples will help solidify your understanding of HTML and build a strong foundation for web development.