Lesson 11: Web Structures and Semantics – The Foundations of a Web Page

 

Prefer to listen to this lesson? Click below.

The Foundations of a Web Page

Introduction

Welcome to Week 5, lesson 2 of our Full Stack Software Engineering Course at 24/7 Teach! We've made excellent strides in understanding core programming concepts and data structures, and now it's time to take that foundation to the web. This week's focus is on HTML, Web Structures, and Semantics. We'll dive into HTML5 elements that make up the structure of a web page and explore the semantics that make it readable for both users and search engines.

Learning Objectives

By the end of this week, you'll be able to:

  • Understand the core structure of a web page.

  • Differentiate between semantic and non-semantic HTML elements.

  • Implement semantic HTML in your web development projects.

  • Create a well-structured web page for 24/7 Teach with semantic elements.

HTML and its Role in Web Structure

HTML, or HyperText Markup Language, is the skeleton of a web page. Just like our bones give us structure, HTML elements give shape to the content on a web page. If you're familiar with 24/7 Teach's platform, you'll know that the design and layout you interact with are built upon HTML.

Why is Structure Important?

A well-structured web page makes it easier for web crawlers to understand the content, which in turn helps with search engine optimization (SEO). This is crucial for educational platforms like 24/7 Teach, where discoverability through search engines can make a significant difference in outreach.

Semantic vs. Non-Semantic Elements

What are Semantic Elements?

Semantic elements are those that carry meaning to their content. Elements like <header>, <footer>, <article>, and <section> are semantic because they describe the nature of the content they wrap around.

Why Use Semantic Elements?

Semantic HTML is crucial for several reasons:

  1. Accessibility: Screen readers can easily navigate through semantic elements.

  2. SEO: Search engines give preference to well-structured content.

  3. Maintenance: Developers can understand and maintain the code easily.

For instance, the 24/7 Teach platform uses semantic tags to differentiate between the main content and the supplementary information, making it more accessible and SEO-friendly.

Non-Semantic Elements

Contrary to semantic elements, tags like <div> and <span> are non-semantic as they don't provide any information about their content. They are used purely for styling or scripting purposes.

Web Structure and Semantics: Going Deeper

Let's dig deeper into some of the most commonly used semantic HTML5 elements and when to use them.

The <header> Element

The <header> element is used to contain introductory and navigational information. You can include elements like the website logo, the main heading of the page (often encapsulated in an <h1> tag), and the main navigation (usually a <nav> element).

Example:

html
<header> <h1>24/7 Teach</h1> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#courses">Courses</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header>

The <nav> Element

The <nav> element is used to define a block of navigation links and is often nested within the <header> but can also be used elsewhere, like a sidebar.

Example:

html
<nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#courses">Courses</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav>

The <main> Element

This element is used for content that is unique to the individual page and should appear once and only once per page.

Example:

html
<main> <article> <!-- Your content goes here --> </article> </main>

The <footer> Element

The <footer> usually contains information about the author, copyright information, and links to related documents.

Example:

html
<footer> <p>Copyright © 2023, 24/7 Teach. All rights reserved.</p> </footer>

Real-world Scenarios

Let's relate these semantic elements to real-world scenarios:

  • <header>: Think of this as the sign outside a physical store. It informs you what the store is and often what you can find inside.

  • <nav>: Consider this as the store directory you find in a shopping mall, guiding you to various sections.

  • <main>: This would be the main shop floor where you find all the goods for sale. This area is unique to each store.

  • <footer>: This is similar to the terms and conditions or the fine print you might find on a receipt or near the store exit.

Advanced Semantics: Landmark and Interactive Elements

Beyond basic structural elements, HTML5 offers a range of semantic elements specifically designed to assist in making your content more accessible and interactive.

The <figure> and <figcaption> Elements

Used in tandem, these elements help provide context to images, tables, or code blocks within your page.

Example:

html
<figure> <img src="example.jpg" alt="Example image"> <figcaption>This is an example image.</figcaption> </figure>
The <mark> Element

This element highlights text that is important within its context. It is frequently used to spotlight parts of a text that should capture the user's attention.

Example:

html
<p>You have been selected to receive a special <mark>offer</mark>.</p>

The <progress> and <meter> Elements

These elements are used to display the completion status of a task and to measure data within a given range, respectively.

Example:

html
<progress value="70" max="100"> 70% </progress> <meter value="0.6">60%</meter>

The <details> and <summary> Elements

These elements provide built-in, accessible disclosure widgets where you can show or hide additional information.

Example:

html
<details> <summary>More Info</summary> <p>Here is some more information about this product.</p> </details>

Real-world Applications:

  • <figure> and <figcaption>: Ideal for a photo gallery or a tutorial where each image requires a description.

  • <mark>: Very useful in search results to highlight the matching text.

  • <progress> and <meter>: Essential for showing task completions like file uploads.

  • <details> and <summary>: Can be used for FAQs or additional optional reading material.

Summary and Takeaways

To sum up, HTML's semantic elements are not just about making your page look good; they also offer functionality and make your site accessible and SEO-friendly. As you extend the 24/7 Teach project, you're putting all of these advanced HTML features into practice, giving you the skills to create well-structured and semantic web pages. Always remember, coding is as much about communicating with other developers and your users as it is about instructing a computer. Happy coding!

HTML Elements Resources:

Please click the link below to access the latest HTML5 element reference:

MDN HTML Element Reference

This reference includes not just the element names but also descriptions, attributes, examples, and other details to help you understand how to use each element effectively. It covers everything from basic structural elements like <div> and <span> to more semantic and interactive elements like <article>, <nav>, <details>, <summary>, and many more.

It's time to test our understanding and engage in insightful discussions.

Lesson Questions: Please answer each question below and be ready to explain your answers.

Project: 24/7 Teach - Course Cover/Sales page - Continued

Project Overview

Building on the last lesson's project, you will now take your landing page for 24/7 Teach to the next level by incorporating advanced HTML semantics and interactive elements. This in-depth project aims to give you a well-rounded experience in crafting a professionally structured web page that caters to real-world needs.

Requirements:

  1. Semantics and Structure: Make use of HTML5 semantic elements like <header>, <nav>, <main>, <article>, <section>, <aside> and <footer> to better structure your webpage.

  2. Interactive FAQ: Implement an interactive FAQ section using <details> and <summary> tags to toggle the visibility of the answers.

  3. Progress Tracking: Add a <progress> bar to simulate course completion status. You could use this as a visual appeal element at the top of your course modules section.

  4. Course Highlights: Use the <figure> and <figcaption> elements to add images along with captions that describe special course features or modules.

  5. Search Highlight: Include a demo search box where the matching terms would be highlighted using <mark> tags. You can hard-code some terms for this demonstration.

  6. Metered Ratings: Implement a <meter> element to show the course's rating out of 5, as given by previous students. This should be near the course title.

  7. Comparison Table: Enhance your previous HTML table by adding <caption>, <thead>, <tbody>, and <tfoot> elements to make your course comparison more structured and accessible.

  8. Contact Form: Expand the existing form to include more fields, such as dropdown options for 'How did you hear about us?' and radio buttons for 'Preferred method of contact'.

  9. Call-to-Action: Include a compelling call-to-action that takes the user to a simulated signup or purchase process.

  10. Landmark Comments: Use HTML comments to mark different landmarks of your page for better maintainability.

Bonus Tasks

  • Use ARIA (Accessible Rich Internet Applications) landmarks for enhanced accessibility.

Evaluation Criteria for the Project:

  1. Advanced use of semantic tags and interactive elements: 50%

  2. Adherence to the extended requirements: 25%

  3. Code cleanliness and readability: 15%

  4. Creativity and user experience: 10%

The project will be considered successful if it meets at least 80% of the total evaluation criteria. The aim is to not just technically fulfill the requirements but to also produce a well-documented, easily maintainable, and efficient codebase.

Submission Deadline

Submit your extended project by EOD, next Sunday at 8 pm, ET. Make sure to rigorously test all features before submission.

Reflection Presentation:

After completing the project, take a moment to reflect on what you've learned. Develop a presentation with your answers to the following questions:

  • What did you find challenging and why?

  • What about this topic intrigues you the most?

  • What did you learn about yourself?

    • NOTE: Include visuals and specific details in your answers.

Add the link to your completed reflection presentation above.

Participate in the Group Discussion:

Please answer the discussion question in the comment section below.

  • Given the range of advanced HTML elements you've incorporated in this extended project, how do you think these improve the user experience and accessibility, particularly for an educational platform like 24/7 Teach? Which element was the most challenging to implement and why?

 
24/7 Teach1 Comment