Some common inline tags

Citing a source cite

The <cite> element makes it much easier for people and bots to search the code for specific information.

A great reference for these and other elements is https://developer.mozilla.org/en-US/

Defining your abbreviations - abbr

The <abbr> element will display an abbreviation on the browser. Usually it will use the title attribute which will generate an underline and also provide a full definition of the accronymn when someone hovers over the word. If you can, put your mouse over the WD4E below.

Sunday, Monday, Tuesday, etc.

Screen readers will read out the text, but don't forget that not everyone uses a mouse to navigate a page!! So it is always a good idea to define your acronyms somewhere in the text as well.


Specifying the use of time - time

The <time> element is again a completely semantic tag - it does not change any of the styling but it can allow systems to know to associate it with a calendar.

"The concert took place on ."

may look like regular text, but look at the code used to generate it:

The concert took place on <time datetime="2001-05-15T19:00">May 15</time>


Identifying code fragments - code

The <code> element is often displayed in a different font, but also some (just a little) semantic meaning. You can use this tag or later you can use CSS to style anything to look more like computer code.



Using subscripts and superscripts - sub and sup

The <sub> and <sup> element are used to create the super and subscripts, e.g, H20 or 1st.
In the past people would often use images to display mathematical formulas, but those images weren't always accessible.