HTML Basics

Structure of an HTML Document

Every HTML page starts with a <!DOCTYPE html> declaration, followed by <html>, which is the root element. Inside <html>, there are two main sections:

  • Head section: It contains meta-information about the document (like the title, links to stylesheets, and metadata).

  • Body section: This is where the visible content (text, images, videos) goes.

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 Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple HTML document.</p>
</body>
</html>


Basic HTML Elements

  • Headings: These elements (<h1> to <h6>) define headings. <h1> is the largest, and <h6> is the smallest.

      <h1>Main Title</h1>
      <h2>Subheading</h2>
    


  • Paragraphs and Line Breaks:

    • <p> defines a paragraph.

    • <br> is used for a line break.

    <p>This is a paragraph of text.</p>
    <p>This is another paragraph.<br>With a line break inside.</p>


  • Links: <a href="URL"> is used to create hyperlinks.

      <a href="https://www.example.com" target="_blank">Visit Example</a>
    


  • Images: The <img> element embeds an image.

      <img src="image.jpg" alt="Description of the image" width="500">
    


  • Lists:

    • Ordered Lists (<ol>): Numbered items.

        <ol>
            <li>First item</li>
            <li>Second item</li>
        </ol>
      


  • Unordered Lists (<ul>): Bulleted items.

      <ul>
          <li>Item one</li>
          <li>Item two</li>
      </ul>
    


Attributes

HTML attributes provide additional information about elements. Common attributes include:

  • href for links, src for images, alt for images (describes the image for screen readers).

  • id and class are used to assign unique or reusable identifiers to elements.

Example:

<a href="https://example.com" class="link-button" id="learnMore">Learn More</a>

2. Intermediate HTML

Forms in HTML

Forms allow users to input data, which is sent to the server for processing. Key elements include:

  • <form>: The container for all form elements.

  • <input>: Used for various types of user input (text, password, email, checkbox).

  • <label>: Associates text with a form element for accessibility.

  • <button> and <input type="submit">: Submits the form.

Example:

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

    <label for="password">Password:</label>
    <input type="password" id="password" name="password">

    <input type="submit" value="Login">
</form>

Tables in HTML

Tables allow you to display data in rows and columns using the following elements:

  • <table>: The container for the table.

  • <tr>: Defines a row in the table.

  • <th>: Defines a header cell.

  • <td>: Defines a standard cell.

Example:

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>25</td>
    </tr>
</table>


Semantic HTML

Semantic elements give meaning to your content. They make it easier for search engines and assistive technologies to understand your page. Key semantic tags include:

  • <article>: Independent content such as a blog post.

  • <section>: A section of content, such as chapters or thematic groups.

  • <nav>: Navigation links.

  • <header> and <footer>: Top and bottom content areas of a page.

  • <aside>: Side content, such as a sidebar.

Example:

<article>
    <header>
        <h2>Blog Post Title</h2>
        <p>Written by Author</p>
    </header>
    <p>This is the content of the blog post.</p>
    <footer>
        <p>Published on Date</p>
    </footer>
</article>


3. Advanced HTML

HTML5 APIs

  1. Local Storage API: Local storage allows storing data locally in the user's browser that persists even after closing the browser. It’s useful for saving user settings, preferences, or small pieces of data.

    Example:

     <script>
         // Storing data
         localStorage.setItem("username", "JohnDoe");
    
         // Retrieving data
         let username = localStorage.getItem("username");
         console.log(username);
     </script>
    
  2. Canvas API: The <canvas> element is used to draw graphics (like charts or game elements) on a web page.

    Example:

     <canvas id="myCanvas" width="200" height="100"></canvas>
    
     <script>
         var canvas = document.getElementById('myCanvas');
         var ctx = canvas.getContext('2d');
         ctx.fillStyle = "blue";
         ctx.fillRect(20, 20, 150, 100);
     </script>
    
  3. Geolocation API: This API allows web applications to get the user's geographic location (with their permission).

    Example:

     <button onclick="getLocation()">Get My Location</button>
     <p id="location"></p>
    
     <script>
         function getLocation() {
             if (navigator.geolocation) {
                 navigator.geolocation.getCurrentPosition(showPosition);
             } else {
                 document.getElementById('location').innerHTML = "Geolocation is not supported by this browser.";
             }
         }
    
         function showPosition(position) {
             document.getElementById('location').innerHTML = "Latitude: " + position.coords.latitude +
             "<br>Longitude: " + position.coords.longitude;
         }
     </script>
    

Drag and Drop API

This allows elements to be draggable and dropped into different parts of a web page.

Example:

<div id="drag1" draggable="true" ondragstart="drag(event)">Drag me!</div>
<div id="dropZone" ondrop="drop(event)" ondragover="allowDrop(event)" style="border:1px solid black; width:200px; height:100px;">
    Drop here
</div>

<script>
    function allowDrop(event) {
        event.preventDefault();
    }

    function drag(event) {
        event.dataTransfer.setData("text", event.target.id);
    }

    function drop(event) {
        event.preventDefault();
        var data = event.dataTransfer.getData("text");
        event.target.appendChild(document.getElementById(data));
    }
</script>

4. HTML Best Practices

Accessibility (a11y)

  • Use descriptive alt text for images.

  • Use proper labels for form elements for screen readers.

  • Ensure a clear focus state for interactive elements (like links and buttons) for keyboard navigation.

Example:

<label for="email">Email:</label>
<input type="email" id="email" name="email" aria-label="Email Address">

SEO (Search Engine Optimization)

  • Title and meta tags: Ensure that each page has a unique title and meta description.

      <title>My Website</title>
      <meta name="description" content="This is a description of my website.">
    
  • Heading hierarchy: Use proper heading levels (<h1>, <h2>, etc.) to structure your content.

Performance Optimizations

  • Lazy loading images: Load images only when they are about to enter the viewport.

      <img src="image.jpg" alt="Example" loading="lazy">
    
  • Minify HTML: Remove unnecessary characters (whitespace, comments) to reduce file size.

  • Async and defer for scripts: Load JavaScript files without blocking the page rendering.

      <script src="script.js" async></script>
    

    GitHub Repository:

  • https://github.com/thirdygayares/htmlstructure.git