Semantic HTML and search engines
You structure pages with the right elements and organise headings, metadata and structured data so a page makes sense to people and machines alike.
Level 201 · 16 lessons · 15 practice labs
Lessons
Page structure
- Landmarks: header, nav, main, footer
- When to use article, section and aside
- Heading order and the document outline
- Text-level semantics: em, strong, time, abbr
- Description lists and nested lists
- Short task: turn a pile of divs into a semantic page
For machines
- Writing the title and meta description
- canonical, the robots meta tag and robots.txt
- Building sitemap.xml
- Structured data: JSON-LD
- Share cards: Open Graph
- Multilingual pages with lang and hreflang
- Short task: a metadata audit of a page
Quality
- Good links: meaningful text and anchors
- Weeding out errors with a validator and a linter
- Capstone: rebuild a news site semantically
Practice labs
- Add landmarks to a page: Add header, nav, main and footer to Sahil Municipality's notice page and see them in the screen reader's landmark list.
- Decide between article and section: Label the blocks of a messy blog home page correctly as article, section or aside and justify each choice.
- Repair the heading order: Fix the heading hierarchy of a long guide that uses h1 twice and h4 before h2, and verify the outline.
- Mark up dates and abbreviations: Mark up the dates in an event text with time and the abbreviations with abbr.
- Build a glossary with description lists: Write a sixty-term technical glossary with dl, dt and dd, linked by letter within the page.
- Separate visual and semantic emphasis: Review the use of b, i, em and strong in a text and correct each by whether it carries meaning.
- Write a title and meta description: Write unique titles and properly sized meta descriptions for five pages of Ilgın Dental Clinic.
- Merge duplicates with canonical: Add canonical to product URLs multiplied by filter parameters and tidy the robots rules.
- Rescue a site blocked by mistake: A launched site vanished from search engines; find and fix the robots.txt, noindex and sitemap mistakes.
- Generate a sitemap: Prepare and validate sitemap.xml for a twenty-page site with last-modified dates.
- Add JSON-LD to an event: Add structured data with date, venue and tickets to a concert page and pass the testing tool without errors.
- Link bilingual pages: Tie the Turkish and English versions together with hreflang and lang and clear reciprocity errors.
- Fix meaningless link text: Replace "click here" and "read more" links with text that describes their target.
- Audit a page's metadata: Check a page's title, description, canonical, OG and language tags against a checklist and report the gaps.
- Rebuild a news page semantically: Rewrite Gündem Post's home page with landmarks, articles, a clean heading order and structured data.
About this course
You structure pages with the right elements and organise headings, metadata and structured data so a page makes sense to people and machines alike.
What you will learn
- Page structure
- For machines
- Quality
Prerequisites
Finishing the level 101 courses of the same path, or knowing those topics, is enough.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at level 201; it assumes you know the topics of the lower-level courses.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.