In this video, we'll talk about ways to markup content for display communication subscripts and superscripts. definitions and abbreviations, time, the time element or time tag, pre formatted content and code and the mighty small tag. The first thing we won't talk about is sub tag, or subscript. And it just does what you would expect a sub script to do just the baseline down 25%. He's a smaller text and the text around it, it's best used for footnotes, as I'm sure you're well used to. Also for chemical formulas like h2o, etc.
Or for numbering math variables, such as you know, z one to z hoard, etc. superscript creates superscript text, much like you would expect with exponents shift the baseline up to percent is a smaller text size, and it's best used for exponents, Z cubed, for instance, and also something called superior lettering, which is a common abbreviation style in French and possibly languages. It is technically a different thing than superscript. But if you're implementing it in HTML, typically it is done with the SCP tag or the sub tag, also ordinal numbers, so 160 or third or fifth or whatever. Sometimes you'll need a markup definition or an abbreviation. Something you'll, you'll see I'm sure commonly, the DFN tag is the markup for a definition tag.
With the event, you can also use a title attribute that sets the exact thing defined. You can also add a link from the DFN tag directly to a definition that might be further down on the page using something called page fragments, or anchor tags. We'll talk about that in a little bit. With the a br tag, you can set up a deviation. Yes, ABR is an abbreviation for abbreviations. You can also do acronyms and a wide variety of those as well.
Similar to the definition you can also use a title attribute but the thing about title attributes for both ABR and DFN That they're only useful to mouse users, because no one else can see the tooltip. And they're only useful also to the subset of them that know to hover over the abbreviation with the mouse or know that abbreviation is used. So they could even hover over with the mouse. Well, I recommend adding the title attribute to both your defense and abp RS unless use them in conjunction, and then you only need it in a DVR that's within a DFN. I would be careful not to only use this, but to make sure that you as particularly good practice to find the abbreviation or acronym, when you first use it, just to make sure that everybody's on the same page. And everybody knows what's going on.
Right, the time element, it's used to mark up specific dates and times or durations of time. So for instance, time of August 23, duration of 12 hours and 37 minutes to make it a little bit easier for SEO and a little bit easier for some extent for screen readers. There's something called the date time attribute formatting and this is very important because it has to be machine readable. So it has to come enough format that the machine is expecting or the computer is expecting. So for instance, we have, this is August 23 2025, at 1700 52 minutes and 42 seconds. Generally if you drop any piece of this, you can create a valid string such as 2523 or 20 foot 2508 or 1752, etc.
Those are all valid daytime values. The pre tag we use for code for other pre formatted text. It's formatted in a monospace font, usually courier Courier New, and whitespace is kept intact, and it's not collapsed into a single space like it normally as an HTML, so if you have two spaces in place, it will show two spaces instead of just showing one space. The small tag originally used to just make text smaller is now in html5. used for things like legal disclaimers copyright notices inside comments. Using this code is much more semantic meaning that it provides more information to the browser and to screen years etc.
Then just having sort of a generic div generic spam that makes the text smaller. Alright, so let's look at some live code okay. So, here we started out with the sub script, you can see Zabbix agent can be obliterated subscript of one right here using sub tag, or here water Hto so Karis zombie bite or the sum of z one to z hoard superscripts we got the Z three or Z cubed he was on dead fright. The superior lettering for man was Oh, so Mademoiselle zombie means Mademoiselle zombie, or the ordinal numbers for the hundred and 63. Also, we have definition and abbreviation. Here we have the DFN with the title of zombie.
So, here if I hover over it, it shows me what is in the title attribute. And then I just have the information beyond it. Whatever you want to put in. We have an abbreviation Under zombi, which is right up here, this information here. And then in the human resistance one, I put an abbreviation inside of DFN. And then only did a title on the abbreviation, not just the definition, and then again, put that right after it to make sure that everyone was on the same page.
Alright, so the time value, so time tag is right here. So it just wraps around here doesn't make any actual changes to the underline underlying tech doesn't make any formatting changes or anything like that. It just makes it more machine readable. So we have the date time here of you know, August 23 2025. At 1752 42. You can include more specific, or could I could have also just left it at just the first part here.
Okay, then we also have duration. So if I'm just doing a duration, I don't need a date, I just have the amount of time. So 12 hours, 37 minutes, date, time, etc. Alright, next we have pre formatted text. And for this I played around a little bit with formatting it. So I grabbed the deviation, just to have some sort of text in there.
And then I played around with spacing, so that you know, I have all this extra stuff, and the whitespace stays intact. And that's a direct mirror of what is shown in the code. So here we have the small tag. You have this is the regular size text. Then I actually did a, I did a small tag, which is this one here, which is just a little bit smaller. Then I did a second small tag within the small tag, just for fun.
And yeah, I know that's weird kind of fun, but Did a small tag within a small tag and so that made it even smaller one level further down. Alright, and then of course, down at the bottom here we have our footnote. Okay, that's it for undead markup. Now we're gonna talk about editing