Semantic HTML is the practice of choosing elements that describe the meaning of your content rather than just its appearance. Instead of wrapping everything in generic div elements, you use header for introductory content, nav for navigation links, main for the dominant content of the page, section and article for grouped and self-contained content, and footer for closing information. The markup still looks similar in a browser, but it now carries meaning that software can interpret.
This matters in COP4813 because the website you build in this module is not just a visual artifact. Screen readers use semantic landmarks to let users jump directly to navigation or main content, and search engines use document structure to understand what a page is about. Starting with clean semantic structure also makes your CSS and JavaScript work in later modules far easier, because the structure already reflects the logic of the page.
As you watch the videos below, pay attention to three things: which element is appropriate for each region of a page, how the same page can be built semantically or non-semantically with very different results for accessibility, and how a designer's mockup can be translated into a structural outline before any code is written. Try sketching the semantic outline of your own module project page and compare it with the examples you see.
This tutorial from the Sigma Web Development Course walks through the common semantic tags in HTML, which based on the title and course context should include header, nav, main, section, article, and footer. Expect demonstrations of each tag in an editor with explanations of when and why to use one over a plain div. The video is paced as a beginner lesson within a larger structured web development series.
CodeWithHarry is a well-known, high-volume web development channel, and this lesson sits in a sequenced course, so the coverage of the tag set maps directly onto the subtopics for header, nav, main, section, article, and footer.
This beginner frontend tutorial connects semantic HTML directly to accessibility by demonstrating the VoiceOver screen reader. The description indicates you will hear how assistive technology navigates a page and how that experience is shaped by whether the underlying markup is semantic or generic. This is the practical answer to the question of why semantic elements matter beyond style.
It is the best fit for the Semantic Markup and Accessibility subtopic because it shows, rather than asserts, the real consequence of markup choices for users of assistive technology.
Part of a project-based series, this short tutorial takes a design mockup created in Adobe XD and works through identifying which semantic HTML tags fit each region of the layout. It focuses on the decision process of choosing tags rather than on syntax alone. Expect to see a visual design translated into a structural outline.
It directly supports the Structuring a Full Page with Semantic Elements subtopic and models the workflow you will need when you turn your own page design into working markup.
Together these videos support MO1 most directly: the CodeWithHarry tutorial supplies the vocabulary and syntax for header, nav, main, section, article, and footer, while the Professor K mockup video shows how to apply those elements to an entire page layout, which is exactly the task of building your multi-page site. The VoiceOver accessibility video reinforces the accessibility standards referenced in MO2 and MO5 by making clear why structure and descriptive markup affect real users. The emphasis on placing navigation links inside a nav element also prepares you for the consistent navigation menu required by MO4 and for the link testing and verification work in MO3 and MO5.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.