In the previous instalment we introduced the concept of block-level tags, and inline tags. Block level tags define blocks of text like headers, paragraphs and lists, and starting a new block-level tag generally starts a new line in the page. Inline tags on the other hand effect a part of a block, and opening an inline tag generally doesn’t start a new line. In the previous instalment we looked at some of the most important block-level tags, in this instalment we’ll look at some of the most common inline tags.

Listen Along: Chit chat Across the Pond Episode 413

http://media.blubrry.com/nosillacast/traffic.libsyn.com/nosillacast/CCATP_2015_11_21.mp3

Drawing Attention to Text

I don’t want to sound like a stuck record, but remember that HTML is for marking up the semantics of a page, not defining the presentation. As such, you should’t think in terms of marking words as bold or italic, but making them strong, or emphasising them. To this end, the two relevant tags are <strong> and <em>.

By default, strong text is rendered in bold, but that default can be overridden using CSS. Similarly, emphasised text is renders in italics by default, but that too can be overridden using CSS. (We’ll cover CSS in future instalments). Old legacy tags for explicitly marking text as bold or italic do exist, but you should never use then, and we won’t be mentioning them in this series.

Sub-Scripts & Super-Scripts

The <sup> and <sub> tags are used to turn text into superscript and subscript respectively.

Highlighting Content Edits

Humans make mistakes, so it’s inevitable that if you write articles for the web, you’ll make mistakes, and have to make alterations. It’s good journalistic practice to make those changes in a transparent way, highlighting both old text that you’ve removed, and new text you’ve added to the article. Since HTML4, there have been dedicated tags for marking up these kinds of edits - <del>, for deleted text, and <ins> for inserted text.

By default, text inside <del> tags is rendered with a strike-trough, and text inside <ins> tags with an underline. Again, these defaults can be overridden with CSS, and it’s very common practice to make <del> tags red, and <ins> tags green.

The <code> Tag

By default, text on a web page is rendered in a variable width font. This is great for reading ordinary text, but terrible for reading precise technical terms. In variable width fonts, it is often very difficult to tell the difference between an upper-case i and a lower-case L, or the upper-case letter O and the digit 0. In situations where text needs to be rendered in such a way that each individual character can be clearly distinguished, you should use the <code> tag. It’s a tag I use a lot in these tutorials, for example, when writing the name of a tag.

By default code tags are rendered using a fixed-width font, but again, CSS can be used to alter the rendering of <code> tags. you’ll notice that the CSS for this site renders <code> tags in navy blue as well as in a fixed-width font.

Final Example

Create a folder called pbs4 in the document root of your web server, and save the following into that folder as a file called index.html:

HTML In-line Tags Demo

HTML In-line Tags Demo

The rm terminal command is very powerful, but very dangerous. Once you delete a file with rm, it is gone - there is no undo! If you use rm and make a mistake, you’ve lost your files - c’est la vie!

Do bear in mind though, that if you do lose data, you’ll be far from the 1st to do so!

This paragraph will be edited. This text was deleted. This text was added.

Once the file is saved, and your web server started, you should be able to browse to the page at http://localhost/pbs4/, and it should look something like:

PBS 4 - Example