HTML Examples


 

Here are various HTML examples demonstrating different features and functionalities of HTML:

1. Basic HTML Structure

<!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 My Website</h1>
  <p>This is a basic HTML structure example.</p>
</body>
</html>

2. HTML Forms

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Form Example</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" required><br><br>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required><br><br>
    
    <label for="message">Message:</label><br>
    <textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>
    
    <input type="submit" value="Submit">
  </form>
</body>
</html>

3. HTML Tables

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Table Example</title>
</head>
<body>
  <h1>Product List</h1>
  <table border="1">
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
    <tr>
      <td>Apple</td>
      <td>$1.00</td>
      <td>10</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>$0.80</td>
      <td>20</td>
    </tr>
  </table>
</body>
</html>

4. HTML Lists

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Lists Example</title>
</head>
<body>
  <h1>Unordered List</h1>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  
  <h1>Ordered List</h1>
  <ol>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
  </ol>
</body>
</html>

5. HTML Links

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Links Example</title>
</head>
<body>
  <h1>Links Example</h1>
  <a href="https://www.example.com" target="_blank">Visit Example.com</a><br>
  <a href="mailto:[email protected]">Email Us</a>
</body>
</html>

6. HTML Images

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Images Example</title>
</head>
<body>
  <h1>Images Example</h1>
  <img src="https://via.placeholder.com/150" alt="Placeholder Image" width="150">
  <p>Above is a placeholder image.</p>
</body>
</html>

7. HTML Videos and Audio

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

  <h2>Video</h2>
  <video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  
  <h2>Audio</h2>
  <audio controls>
    <source src="audio.mp3" type="audio/mp3">
    Your browser does not support the audio tag.
  </audio>
</body>
</html>

8. HTML Forms with Input Types

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Form Inputs Example</title>
</head>
<body>
  <h1>Form Inputs Example</h1>
  <form>
    <label for="text">Text:</label>
    <input type="text" id="text" name="text"><br><br>
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password"><br><br>
    
    <label for="date">Date:</label>
    <input type="date" id="date" name="date"><br><br>
    
    <label for="checkbox">Check me:</label>
    <input type="checkbox" id="checkbox" name="checkbox"><br><br>
    
    <label for="radio1">Option 1:</label>
    <input type="radio" id="radio1" name="radio" value="1"><br>
    <label for="radio2">Option 2:</label>
    <input type="radio" id="radio2" name="radio" value="2"><br><br>
    
    <label for="select">Select:</label>
    <select id="select" name="select">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
    </select><br><br>
    
    <label for="textarea">Textarea:</label><br>
    <textarea id="textarea" name="textarea" rows="4" cols="50"></textarea><br><br>
    
    <input type="submit" value="Submit">
  </form>
</body>
</html>

9. HTML Inline and Block Elements

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Inline and Block Elements</title>
  <style>
    .block { display: block; margin: 10px 0; }
    .inline { display: inline; margin: 0 10px; }
  </style>
</head>
<body>
  <h1>Inline and Block Elements</h1>
  <div class="block">This is a block-level element.</div>
  <span class="inline">This is an inline element.</span>
  <span class="inline">Another inline element.</span>
  <div class="block">Another block-level element.</div>
</body>
</html>

10. HTML Semantics

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Semantics Example</title>
</head>
<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <section>
      <h2>About Us</h2>
      <p>We are a small company...</p>
    </section>
    
    <article>
      <h2>Latest News</h2>
      <p>Our latest news...</p>
    </article>
  </main>
  
  <footer>
    <p>&copy; 2024 My Website</p>
  </footer>
</body>
</html>

These examples cover a range of common HTML functionalities and elements, helping to illustrate the basics and more advanced features of HTML.