Here are some basic HTML examples to help you get started with understanding how HTML works. Each example is followed by a brief explanation.
1. Basic HTML Document Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>
Explanation:
<!DOCTYPE html>: Declares the document type and version of HTML.<html lang="en">: Starts the HTML document and sets the language to English.<head>: Contains meta-information about the HTML document, such as the character set and the title.<title>: Sets the title of the web page, which appears in the browser tab.<body>: Contains the content of the web page.<h1>: Defines a top-level heading.<p>: Defines a paragraph.
2. Adding Links and Images
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Links and Images</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Check out my favorite search engine: <a href="https://www.google.com">Google</a></p>
<img src="https://via.placeholder.com/150" alt="Placeholder Image">
</body>
</html>
Explanation:
<a href="https://www.google.com">Google</a>: Creates a hyperlink to Google.<img src="https://via.placeholder.com/150" alt="Placeholder Image">: Displays an image with a source URL and alternative text.
3. Creating a List
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Favorite Books</title>
</head>
<body>
<h1>My Favorite Books</h1>
<ul>
<li>The Great Gatsby</li>
<li>1984</li>
<li>To Kill a Mockingbird</li>
</ul>
</body>
</html>
Explanation:
<ul>: Defines an unordered list.<li>: Defines a list item.
4. Creating a Table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Table</title>
</head>
<body>
<h1>Simple Table</h1>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
</tr>
</table>
</body>
</html>
Explanation:
<table border="1">: Defines a table with a border.<tr>: Defines a table row.<th>: Defines a header cell.<td>: Defines a standard cell.
5. Adding Forms
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Form</title>
</head>
<body>
<h1>Contact Us</h1>
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Explanation:
<form action="/submit-form" method="post">: Defines a form that submits data to/submit-formusing the POST method.<label for="name">: Creates a label for the input field withid="name".<input type="text" id="name" name="name">: Creates a text input field.<input type="email" id="email" name="email">: Creates an email input field.<input type="submit" value="Submit">: Creates a submit button.
These examples cover basic HTML elements and their usage. You can combine and modify these examples to create more complex web pages as you learn more about HTML and web development.
