Skip to main content
HashnodeMary Joy

Command Palette

Search for a command to run...

Activity 18: Research HTML

Published
•8 min read•View as Markdown
M
Mary Joy Rodrigora

This HTML code creates a basic website structure with semantic elements and interactive features. Let's break it down step by step:

1. Document Structure

  • <!DOCTYPE html>: Declares the document as HTML5.

  • <html lang="en">: The root element of the HTML document, specifying the language as English.

  • <head>: Contains meta-information about the document, not displayed on the page.

    • <meta charset="UTF-8">: Specifies the character encoding for proper display of characters.

    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures the viewport for responsive design.

    • <title>Basic HTML Elements and Semantic HTML</title>: Sets the title that appears in the browser tab.

    • <style>: Contains embedded CSS styles for basic formatting and layout.

  • <body>: Contains the visible content of the webpage.

2. Header

  • <header>: Represents the introductory content of the page.

    • <h1>Welcome to My Website</h1>: The main heading of the page.

    • <nav>: Contains the navigation links.

      • <ul>: An unordered list for navigation items.

      • <li>: List items, each containing a link.

        • <a href="#">Home</a>: A link to the homepage (currently points to the same page).

        • <a href="#">About</a>: A link to the "About" section.

        • <a href="#">Contact</a>: A link to the "Contact" section.

3. Main Content

  • <main>: Represents the main content of the page.

    • <section>: A section about the author.

      • <h2>About Me</h2>: A heading for the section.

      • <p>: A paragraph introducing the author.

    • <section>: A section about the author's skills.

      • <h2>My Skills</h2>: A heading for the section.

      • <ul>: An unordered list of the author's skills.

    • <section>: A section about the author's projects.

      • <h2>My Projects</h2>: A heading for the section.

      • <article>: An article about the first project.

        • <h3>Project 1: Portfolio Website</h3>: A heading for the article.

        • <p>: A brief description of the project.

      • <article>: An article about the second project.

        • <h3>Project 2: Online Store</h3>: A heading for the article.

        • <p>: A brief description of the project.

    • <section>: A section for a contact form.

      • <h2>Contact Me</h2>: A heading for the section.

      • <form action="/contact" method="post">: A form for submitting contact information.

        • <label for="name">Name:</label>: A label for the name input field.

        • <input type="text" id="name" name="name" required>: A text input field for the user's name.

        • <label for="email">Email:</label>: A label for the email input field.

        • <input type="email" id="email" name="email" required>: An email input field for the user's email.

        • <label for="message">Message:</label>: A label for the message textarea.

        • <textarea id="message" name="message"></textarea>: A textarea for the user's message.

        • <button type="submit">Send</button>: A button to submit the form.

    • <section>: A section for interactive elements.

      • <h2>Interactive Elements</h2>: A heading for the section.

      • <div>: A container for an image.

      • <canvas id="myCanvas" width="200" height="100"></canvas>: A canvas element for drawing graphics.

      • <script>: JavaScript code to draw a red rectangle on the canvas.

      • <video width="320" height="240" controls>: A video element with controls.

        • <source src="https://www.example.com/video.mp4" type="video/mp4">: Specifies the video source and type.

        • "Your browser does not support the video tag.": A message displayed if the browser doesn't support the video tag.

      • <iframe width="560" height="315" src="https://www.youtube.com/embed/your_video_id" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>: An iframe to embed a YouTube video.

      • <div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"> Drag and drop a file here. </div>: A dropzone for file uploads.

      • <script>: JavaScript code to handle drag-and-drop events.

  • <footer>: Represents the footer of the page.

    • <p>&copy; 2023 My Website</p>: A paragraph containing copyright information.

5. Key Points

  • Semantic HTML: The code uses semantic elements like <header>, <nav>, <main>, <article>, <section>, and <footer> to structure the content logically and make it more meaningful for search engines and assistive technologies.

  • Interactive Elements: The code includes examples of interactive elements like a canvas, a video player, an iframe for embedding a YouTube video, and a drag-and-drop zone.

  • JavaScript: The code includes JavaScript to draw on the canvas and handle drag-and-drop events.

  • Placeholder Content: The code uses placeholder URLs and text for images, videos, and the form action; these should be replaced with actual URLs and content in a real website.

You're right, the explanation is a bit repetitive and could use some more detail. Here's a more in-depth breakdown of each HTML element and semantic HTML tag:

Basic HTML Elements:

  • Headings (<h1> to <h6>): These elements define headings of different sizes, used to structure content and provide visual hierarchy. <h1> is the largest heading, and <h6> is the smallest.
    <h1>Main Heading</h1>
    <h2>Subheading</h2>
    <h3>Sub-Subheading</h3>
  • Paragraphs (<p>): The <p> tag defines a paragraph of text. It automatically adds line breaks before and after the paragraph, making your content more readable.
    <p>This is a paragraph of text. It will be displayed as a separate block of text with spacing before and after.</p>

  • Lists:

    • Unordered Lists (<ul>): Creates a list of items with bullet points.
        <ul>
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
        </ul>
  • Ordered Lists (<ol>): Creates a list of items with numbers.
        <ol>
            <li>First item</li>
            <li>Second item</li>
            <li>Third item</li>
        </ol>

  • Tables (<table>, <tr>, <th>, <td>): Used to display data in a structured grid format.

    • <table>: The main container for the table.

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

    • <th>: Defines a header cell (usually used for column headings).

    • <td>: Defines a data cell (for normal table content).

    <table>
        <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>

  • Forms (<form>, <input>, <label>, <button>): Forms allow users to input data (text, numbers, choices, etc.) and submit it to a server for processing.

    • <form>: Container for all form elements.

    • <input>: Used for various input types (text, password, email, checkbox, radio buttons, etc.).

    • <label>: Associates text with a form element for accessibility (helps screen readers read the label).

    • <button>: Creates a clickable button (e.g., "Submit").

    • <input type="submit">: Creates a submit button that sends the form data.

    <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">

        <button type="submit">Login</button> 
    </form>
  • Div (<div>): A generic container element used to group and style HTML content. It has no inherent meaning but provides a way to structure your page.
    <div class="container">
        <p>This text is within a div container.</p>
    </div>

  • Images (<img>): Used to embed images in your web page.

    • src: The URL or path to the image file.

    • alt: Provides alternative text for screen readers and when the image cannot be displayed.

    <img src="my-image.jpg" alt="A beautiful mountain landscape">
  • Canvas (<canvas>): Provides a drawing surface where you can use JavaScript to create graphics, animations, and interactive elements.
    <canvas id="myCanvas" width="200" height="100"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = 'red';
        ctx.fillRect(0, 0, canvas.width, canvas.height); // Draw a red rectangle
    </script>

  • Video (<video>): Embeds video content into your web page.

    • controls: Adds default playback controls (play, pause, volume, etc.).

    • source: Specifies the path or URL to the video file.

    <video width="320" height="240" controls>
        <source src="my-video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
  • YouTube (<iframe>): Embeds YouTube videos using an iframe. You need to get the embed code from YouTube.
    <iframe width="560" height="315" src="https://www.youtube.com/embed/your_video_id" 
            title="YouTube video player" frameborder="0" 
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  • Drag and Drop: Allows users to drag and drop elements within a web page. This requires using JavaScript to handle the drag and drop events.
    <div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">
        Drag and drop a file here.
    </div>
    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drop(ev) {
            ev.preventDefault();
            const file = ev.dataTransfer.files[0];
            // Handle the dropped file here (e.g., display its name)
            console.log('Dropped file:', file);
        }
    </script>

Semantic HTML:

  • Header (<header>): The header of the page, typically containing the site title, logo, navigation, and other introductory elements.
    <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>
  • Footer (<footer>): The footer of the page, usually containing copyright information, contact details, links to other pages, and additional legal or navigation content.
    <footer>
        <p>&copy; 2023 My Website</p>
    </footer>
  • Main (<main>): Wraps the primary content of the page, the content that is most relevant to the page's purpose.
    <main>
        <section>
            <h2>About Me</h2>
            <p>This is the main content of the page.</p>
        </section>
    </main>
  • Section (<section>): Represents a thematic grouping of content within the page. It can be used to divide the main content into logical sections.
    <section>
        <h2>About Me</h2>
        <p>This is a section about myself.</p>
    </section>
  • Article (<article>): Represents self-contained content that can be independently distributed or reused. Examples include blog posts, news articles, forum posts, etc.
    <article>
        <h2>My Latest Blog Post</h2>
        <p>This is a blog post.</p>
    </article>
  • Nav (<nav>): Represents a section of the page that serves as a navigation mechanism.
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

Key Points:

  • Semantic HTML: Using semantic elements makes your HTML more meaningful and structured, which benefits search engines (SEO), screen readers, and overall accessibility.

  • Accessibility: Always consider accessibility when writing HTML. Use descriptive alt text for images, provide labels for form elements, and ensure keyboard navigation works correctly.

  • Performance: Optimize for loading speed by using lazy loading for images, minifying your HTML, and using async or defer for JavaScript files.

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

Mary Joy

32 posts