HTML Examples

Learning HTML becomes easier when you see practical examples. At The Coding College, we believe in making coding simple and user-friendly. This post provides examples of essential HTML elements to help you understand their usage in building web pages.

Basic Structure of an HTML Document

Every HTML document follows a basic structure. Here’s a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic HTML Structure</title>
</head>
<body>
  <h1>Welcome to HTML</h1>
  <p>This is a simple HTML document example.</p>
</body>
</html>

Explanation

  1. <!DOCTYPE html>: Declares the document as HTML5.
  2. <html>: The root element of the HTML document.
  3. <head>: Contains metadata like the title, character set, and viewport settings.
  4. <body>: Contains the content visible on the webpage.

Examples of Common HTML Elements

Headings

Headings define the structure of content on your page:

<h1>Main Heading</h1>
<h2>Subheading Level 2</h2>
<h3>Subheading Level 3</h3>

Paragraphs

Paragraphs are used for blocks of text:

<p>This is a paragraph of text. You can use paragraphs to organize content.</p>

Links

Hyperlinks connect web pages:

<a href="http://thecodingcollege.com/">Visit The Coding College</a>

Images

Display images on your webpage:

<img src="example.jpg" alt="Example Image" width="300">

Lists

Unordered List

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

Ordered List

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

Tables

Tables help in organizing data:

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
  </tr>
</table>

Forms

Forms collect user input:

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <button type="submit">Submit</button>
</form>

Interactive Example

Combine different elements to create a complete webpage:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Example Page</title>
</head>
<body>
  <header>
    <h1>Welcome to My Website</h1>
  </header>

  <nav>
    <a href="#section1">Section 1</a> | 
    <a href="#section2">Section 2</a> | 
    <a href="#section3">Section 3</a>
  </nav>

  <section id="section1">
    <h2>About Us</h2>
    <p>We provide top-notch tutorials for learning web development.</p>
  </section>

  <section id="section2">
    <h2>Our Courses</h2>
    <ul>
      <li>HTML Basics</li>
      <li>CSS Styling</li>
      <li>JavaScript Programming</li>
    </ul>
  </section>

  <section id="section3">
    <h2>Contact Us</h2>
    <form action="/contact" method="post">
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
      <button type="submit">Send</button>
    </form>
  </section>
</body>
</html>

Conclusion

Practicing with these examples is a great way to learn HTML and understand its power in building web pages. For more in-depth tutorials and real-world coding examples, visit The Coding College and start your journey toward becoming a proficient web developer!

Leave a Comment