Skip to main content
Advertisement

HTML5 (Semantic Web and Forms)

HTML5 is the standard for the modern web, providing rich multimedia elements and meaningful structural tags (Semantics).

1. Basic HTML Structure​

Every HTML document follows this fundamental structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Page Title</title>
</head>
<body>
    <h1>This is where the content goes</h1>
</body>
</html>

2. Semantic Tags​

Semantic tags clearly communicate the meaning of the content to both the browser and the developer. This is crucial for SEO (Search Engine Optimization).

  • <header>: The introductory part of a page (logo, navigation menus, etc.).
  • <nav>: Contains navigation links.
  • <main>: Represents the primary content of the document.
  • <article>: Used for self-contained, independent content (news articles, blog posts).
  • <section>: Defines a specific region or section within the document.
  • <aside>: For tangential content, like sidebars (ads, extra links).
  • <footer>: The concluding section of a page (contact info, copyright details).

3. Web Forms​

Forms are used to collect data input from a user.

<form action="/submit" method="POST">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    
    <button type="submit">Submit</button>
</form>

4. Frequently Used Tags​

  • Text: <h1>–<h6>, <p>, <span>, <strong>
  • Lists: <ul>, <ol>, <li>
  • Multimedia: <img>, <video>, <audio>
  • Links: <a href="url">

In the next section, we will learn how to style these HTML elements beautifully using CSS.

Advertisement
Advertisement