Welcome to the Semantic Web!
In this chapter, we are going to explore a very important part of Information Technology: the Semantic Web. Don't worry if that sounds like a mouthful! Essentially, we are moving away from just making websites look "pretty" and focusing on making them "smart." By the end of these notes, you’ll understand how to write code that computers, search engines, and people with disabilities can all understand perfectly. Let’s dive in!
1. What is Semantic HTML?
In the early days of the web, people used code just to change how things looked (like making text big or blue). Semantic HTML is different. It is the practice of using HTML tags that describe the meaning of the content, not just its appearance.
Why does it matter?
When you use the correct tags, you help several different "users":
1. Search Engines: Tools like Google use semantic code to understand what your page is about. This is called Search Engine Optimisation (SEO). If you use a "header" tag for your title, Google knows that is the most important part of the page.
2. Assistive Technologies: People who are visually impaired use screen readers. These devices read the code out loud. Semantic tags tell the screen reader where the navigation is or where the main article starts.
3. Better Maintenance: It is much easier for a developer to read and update code that is well-organised and meaningful.
Quick Review: Semantic code describes the content, not the look.
2. The Building Blocks: Structural Elements
The syllabus requires you to know specific tags that define the structure of a web page. Think of these as the "rooms" in your digital house.
Key Structural Tags:
• <header> and <footer>: These are the top and bottom sections of a page or a specific area. The header usually contains the logo, and the footer contains contact info or links.
• <nav>: This stands for navigation. Use this tag only for the main blocks of links that help users move around the site.
• <main>: This marks the unique content of that specific page. You should only have one <main> tag per page.
• <article>: This is for content that can stand on its own. If you could copy and paste it onto a different website and it still made sense (like a news story or a blog post), it should be an article.
• <section>: This is used to group related content together. It’s like a chapter in a book.
• <aside>: This is for content that is "on the side." It’s related to the main content but isn’t the main focus, like a sidebar with extra facts or advertisements.
Key Takeaway: Using these tags creates a clear map of your page for computers to follow.
3. Generic Containers: When "Meaning" is Missing
Sometimes, you just need to group elements together for styling (like putting a border around a bunch of random things) but there isn't a specific semantic tag that fits. In these cases, we use non-semantic containers:
• <div>: A block-level container. It starts on a new line and takes up the full width available.
• <span>: An inline container. It stays on the same line and only takes up as much space as the text inside it.
Don't worry if this seems tricky: Just remember that <div> and <span> have no meaning of their own. Use them only when a semantic tag (like <article> or <nav>) doesn't apply.
4. Adding Meaning to Text
Semantic markup isn't just for big sections; it’s for individual words too! Here is how we add textual meaning:
• Importance (<strong>): Use this for text that is very important. Browsers usually make it bold.
• Emphasis (<em>): Use this when you want to emphasize a word (like when you change your tone of voice). Browsers usually make it italic.
• Quotations: Use <blockquote> for long quotes and <q> for short, inline quotes.
• Abbreviations (<abbr>): Helps explain what an acronym (like "NASA") stands for.
• Citations and Definitions: Use <cite> to reference the title of a work (like a book name) and <dfn> when you are defining a new term.
• Addresses (<address>): Specifically for contact information for the author or owner of the document.
• Marks (<mark>): Used to highlight text, like using a yellow highlighter on paper.
5. Figures and Captions
When you add an image, a chart, or a code snippet that is "self-contained" (meaning it can be moved away from the main text without losing its purpose), you should use the <figure> tag.
To give that figure a title or description, use the <figcaption> tag inside the figure.
Did you know? Using <figcaption> is much better than just putting a paragraph under an image because it creates a permanent link between the image and the text for screen readers.
6. WAI-ARIA: Extra Help for Accessibility
Sometimes HTML tags aren't enough to explain complex web features (like a pop-up menu or a loading bar). This is where WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) comes in. It provides extra "attributes" to help assistive technology.
What to remember for the exam:
• Roles: Tells the computer what an element is (e.g., role="button" or role="search").
• States and Properties: Tells the computer the current condition of an element (e.g., aria-checked="true" for a checkbox).
• Live Regions: These are very cool! They tell screen readers to announce changes immediately as they happen, without the user having to refresh the page (like a "new message" alert).
• Enhanced Keyboard Navigation: ARIA helps ensure that people who can't use a mouse can navigate through everything using just the "Tab" and "Enter" keys.
Common Mistake to Avoid: Don't over-use ARIA! The "First Rule of ARIA" is: If you can use a native HTML tag (like <button>), use that instead of using ARIA to turn something else into a button.
Final Quick Review Box
1. Semantic HTML = Meaning.
2. Structural tags include <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer>.
3. Non-semantic tags (like <div>) are for styling only.
4. SEO and Accessibility are the two biggest reasons we use the semantic web.
5. WAI-ARIA adds extra labels for complex features to help screen readers.