HTML Basic Examples

Welcome to The Coding College, where we make learning coding easy and fun! In this post, we’ll provide basic HTML examples to help you get hands-on experience with HTML. By the end of this post, you’ll be familiar with common HTML elements and how to use them effectively.

Why Learn HTML with Examples?

HTML is best learned through practice. Working with examples allows you to:

Understand how different HTML tags work.
Create structured and visually appealing web pages.
Gain confidence to build your own website.

Basic HTML Structure Example

Every HTML page starts with the following structure:

<!DOCTYPE html>
<html>
<head>
    <title>Basic HTML Page</title>
</head>
<body>
    <h1>Welcome to The Coding College</h1>
    <p>This is a simple example of an HTML structure.</p>
</body>
</html>

<!DOCTYPE html>: Declares the document type as HTML5.
<html>: The root element that contains all HTML content.
<head>: Includes metadata like the title.
<body>: Contains content displayed on the webpage.

Example 1: Headings and Paragraphs

<!DOCTYPE html>
<html>
<head>
    <title>Headings and Paragraphs</title>
</head>
<body>
    <h1>Welcome to HTML</h1>
    <h2>Learning Headings</h2>
    <p>This is a paragraph under a heading. HTML makes content easy to organize.</p>
</body>
</html>

Use <h1> to <h6> for headings of varying importance.
Use <p> for paragraphs.

Example 2: Links

<!DOCTYPE html>
<html>
<head>
    <title>HTML Links</title>
</head>
<body>
    <h1>Learn More at The Coding College</h1>
    <p>Visit <a href="http://thecodingcollege.com/">The Coding College</a> for coding tutorials.</p>
</body>
</html>

<a>: Defines a hyperlink.
href: Specifies the link destination.

Example 3: Images

<!DOCTYPE html>
<html>
<head>
    <title>HTML Images</title>
</head>
<body>
    <h1>HTML Image Example</h1>
    <img src="https://via.placeholder.com/150" alt="Sample Image">
</body>
</html>

<img>: Embeds an image.
src: Specifies the image URL.
alt: Provides alternative text for accessibility.

Example 4: Lists

Unordered List:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Lists</title>
</head>
<body>
    <h1>Unordered List Example</h1>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

Ordered List:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Lists</title>
</head>
<body>
    <h1>Ordered List Example</h1>
    <ol>
        <li>Introduction to HTML</li>
        <li>Learning CSS</li>
        <li>Mastering JavaScript</li>
    </ol>
</body>
</html>

<ul>: Creates an unordered list.
<ol>: Creates an ordered list.
<li>: Defines list items.

Example 5: Forms

<!DOCTYPE html>
<html>
<head>
    <title>HTML Forms</title>
</head>
<body>
    <h1>Contact Form</h1>
    <form>
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name"><br><br>
        <label for="email">Email:</label><br>
        <input type="email" id="email" name="email"><br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

<form>: Creates a form for user input.
<input>: Defines input fields (e.g., text, email).
<label>: Associates labels with input fields.

Explore More on The Coding College

Learning HTML opens up endless possibilities in web development. At The Coding College, we provide more examples, guides, and resources to help you master HTML and beyond.

Practice these examples and experiment by modifying the code to see the changes. Stay consistent, and you’ll soon become proficient in HTML! For more tutorials, visit The Coding College and start your coding journey today.