OCS Semantic HTML & Typography Grammar HW
Semantic HTML with OCS Typography Grammar
Source lesson: sass/typography
Rule: HTML tags say what the text is, ocs_ classes give it a reusable role, and the global SASS theme decides how it looks.
Popcorn Hack
The three <div>/<span> lines with a <style> block become one heading, one subheading and one paragraph. The <style> block and the large-title / sub-title / normal classes are gone.
Why Cats Purr
A Sign of Happiness
Cats usually purr when they feel safe, cozy, and ready for a nap.
Why Cats Purr
A Sign of Happiness
Cats usually purr when they feel safe, cozy, and ready for a nap.
Homework Hack: How to Pat a Cat
| Before | After | Why |
|---|---|---|
<div class="title-font"> |
<h2 class="ocs_section-title"> |
it’s the page section’s main heading |
<div class="section-font">Have you ever wanted to... |
<h3> |
a subheading under the title |
<div class="body-text"> |
<p class="ocs_text"> |
body text is a paragraph |
<span class="very-important"> |
<strong> |
the bold was there because the words are important, which is what <strong> means |
three list-item divs with typed “1. 2. 3.” |
one <ol> with three <li> |
real steps in order, so the browser numbers them and a screen reader announces “list, 3 items” |
closing section-font div |
<h3> |
another subheading, same level as the first |
Everything is wrapped in an ocs_card, and the <style> block is deleted.
How to Pat a Cat
Have you ever wanted to...
pat a cat? Well good for you, we will give step by step instructions on how to pat a cat!
How to pat a cat:
- Put out your hand
- Touch the cat
- Move your hand back and forth
Congrats! You pat a cat :D
How to Pat a Cat
Have you ever wanted to...
pat a cat? Well good for you, we will give step by step instructions on how to pat a cat!
How to pat a cat:
- Put out your hand
- Touch the cat
- Move your hand back and forth
Congrats! You pat a cat :D
Checklist: %%html and UI_RUNNER present. No custom class names, no inline style, no <style> block, no span-based fake emphasis. It has heading, paragraph, <ol> and <li> tags, ocs_ classes applied, and <strong> on the line that used to be very-important.
Why it matters: the old version looked like a page, but to a screen reader it was eight unlabeled blocks of text. Now the heading levels outline the page (h2 → h3 → h3), and the steps are a real list.