Say What You Mean with Semantic HTML Markup
There be dragons afoot! Join me on a quest to conquer the strong, em, mark, and q tags. Together we will add meaning to Lewis Carroll’s Jabberwocky with semantic HTML. Callooh callay!
Click here for the full video transcript
>>ALICE: Dear Daisy, I found this poem, and it looks important, but I cannot find a part of it that I can read, for it’s all in some language that I don’t know. Perhaps it is fox latin, or some sort of lipsum text. Can you help me make sense of this puzzling literature? Sincerely, Alice.
>>DAISY: Sevot yhtils eht dna… my, this is unusual. Maybe the html code will give us some clues.
Why it’s a bi-directional override element, of course! And if I change the direction attribute to left to right instead of right to left, the words will all go the right way again.
‘Twas brillig, and the slithy toves Did gyre and gimble in the wabe; All mimsy were the borogoves, And the mome raths outgrabe. Hmm… It seems very pretty, but it’s rather hard to understand! Maybe if we use semantic html tags to format the text it will make more sense. Like here for example.
This looks like an important word of warning, so we should bold the word beware. We could use the b tag to do that, but the strong tag is better because it not only bolds the text, it also tells your web browser that beware is a significant word.
This is also the first time the word Jabberwock is explained, so we could wrap that in the definition tag.
Another way to add meaning to text is with the emphasis tag. It could be useful here to add intensity to the sound effect snicker-snack.
Somebody killed something here: that’s clear. I think I’ll highlight it with the mark tag.
Now, this part where the man chortles is a short quote. The q tag is perfect for that.
Okay, lets read it now. ‘Twas brillig, and the slithy toves Did gyre and gimble in the wabe; All mimsy were the borogoves, And the mome raths outgrabe. ‘Beware the Jabberwock, my son! The jaws that bite, the claws that catch! Beware the Jubjub bird, and shun The frumious Bandersnatch!’ He took his vorpal sword in hand: Long time the manxome foe he sought. So rested he by the Tumtum tree, And stood awhile in thought. And as in uffish thought he stood, The Jabberwock, with eyes of flame, Came whiffling through the tulgey wood, And burbled as it came! One, two! One, two! And through and through The vorpal blade went snicker-snack! He left it dead, and with its head He went galumphing back. ‘And hast thou slain the Jabberwock? Come to my arms, my beamish boy! O frabjous day! Callooh! Callay!’ He chortled in his joy. ‘Twas brillig, and the slithy toves Did gyre and gimble in the wabe; All mimsy were the borogoves, And the mome raths outgrabe.
Somehow it seems to fill my head with ideas—only I don’t know exactly what they are!
We used semantic HTML markup to add meaning to a strange poem today. These tags changed the appearance of our text, but we learned that they should only be used if they are appropriate for the content.
Next we’ll learn how to make our own top ten listicles with the ol and ul tags.