Some rant
An Introduction
This little baseline has ( almost) all of the content flow and phrasing elements. It attempts to use all of those elements according to their defined semantics. It also tries to provide a baseline style for those elements. So this isn't a normalize or a reset, but maybe the first set of styles you'd add before you start branding stuff. Here is the full list of the elements.
Here is a collection of headings
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquam corrupti ab id tempore. Repellendus eligendi in magni, tenetur quis, odio voluptates fugit deserunt nulla nesciunt veritatis earum excepturi aliquam.
The subheading that should tell you more about it
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquam corrupti ab id tempore. Repellendus eligendi in magni, tenetur quis, odio voluptates fugit deserunt nulla nesciunt veritatis earum excepturi aliquam.
The heading that (probably) explains sections of content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquam corrupti ab id tempore. Repellendus eligendi in magni, tenetur quis, odio voluptates fugit deserunt nulla nesciunt veritatis earum excepturi aliquam.
The First unimportant heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquam corrupti ab id tempore. Repellendus eligendi in magni, tenetur quis, odio voluptates fugit deserunt nulla nesciunt veritatis earum excepturi aliquam.
The Second Unimportant heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquam corrupti ab id tempore. Repellendus eligendi in magni, tenetur quis, odio voluptates fugit deserunt nulla nesciunt veritatis earum excepturi aliquam.
The Heading for pedants
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquam corrupti ab id tempore. Repellendus eligendi in magni, tenetur quis, odio voluptates fugit deserunt nulla nesciunt veritatis earum excepturi aliquam.
Paragraphs and Styles
Text Level Semantics
I'm that paragraph with some emphasis on the text-level semantics where I might feel the need to share some strong opinions. This paragraph even uses elements that should have been deprecated, but instead the W3C redefined them. And that's dumb, because formerly presentational elements now do silly things like call a thing to your attention for no good reason, or tell you that something is mispelled, or the name of a boat — which makes as much sense as building another Titanic. It makes no sense, but … c'est la vie.
Editing semantics
This paragraph is all about editing my opinions. Sometimes I have opinions that are no longer relevant. Sometimes I mark or highlight some text so that people notice it. Sometimes I insert some thoughts later. Sometimes
I delete those thoughts. The user can also select text, so it's important to be sure that the user can discern whether I've highlighted something, or they have.
Definitions
The whole point of this paragraph is meaning. Sometimes we need an explanation, or a definition . For those times, you have an element that you can use to tell the user that one word in this paragraph is the term that the paragraph is actually explaining.
Sometimes, we have to define an abbreviation. Take, LASER, which is an acronym for Light Amplification by Stimulated Emition of Radiation. The abbreviation tags don't make much sense unless they have a title, though.
You know what time it is? No, not Howdy-Doody time. It's .
Quoting, Citing, scripting
You know how you're saying something, and then you just feel the need to make quick quote, like Hey, I totally want to buy Somnaderpaphil LG for my herpes
? But after some reading,you see that small print that says it can give 1 out of 2 users irritable bowel syndrome.
Then you read all of scientific things (1/0) or citations 1 that make you feel better.
Go, Blockquote. Quote away. Be the blockquote you've always wanted to be. But within reason. Also, don't forget who made you... The Dude who spoke you into existence
Code Semantics
Writing code is hard. You have stuff like variables. Imagine n is a variable. n = 1. Now you want to increment it with your + on the keyboard, so the result is a sample (e.g.n == 2 ). And maybe there's data, where maybe the browser needs an internal value, but the user needs to see something friendly.
<p> Writing code is hard. You have stuff like variables. Imagine where <var> n</var> is a variable.<br /> Maybe you have some code, like <code> n = 1</code>. Now you want to increment it with your <kbd>+</kbd> on the keyboard, so the result is a sample (e.g.<samp> n == 2</samp>). </p>
List semantics
- The first item in an ordered list
- The second item in an ordered list
- I am a humble list item, I don't care if I'm first
- I am a second humble list item, put me wherever yo!
- ordered list
- a list with numbers, where the items need to be in a particular order
- unordered list
- a list with bullets or some other indicator, where the items can be in any order
- menu
- An unordered list with interactive items or commands that the user can use.
- definition list
- The forgotten list. It has definition terms,
<dt>and definitions<dd>. It's pretty much perfect for listing out the kinds of lists in a subtle, 4th wall-breaking kind of way.
Language Semantics
Then there's that text where you need to show it in a different language. Like, say you want to know my name, but you speak Korean better than English. Well, I'd tell you my name is Frank and I hope you'd know how to pronounce it.
Sometimes, though, you need to show something in a semitic language. Maybe you want to say Shalom in the home.That's totally fine, just remember that text runs in the opposite direction in Arabic, Farsi, and Hebrew.
With Semitic Languages, though, you need to flip the order of some things. Say you're reading some text like, אני אוהב את יין and it translates as I like wine. You have to remember that there's an element for saying a block of text is written in reverse, and another for saying a span of text should be the reverse of its parent.
Another way to understand that text is to look at the word-for-word translation: