Individual words or entire passages can easily be marked in italics and bold. Let's start with the bold variant. There are basically two HTML elements available for this: b and strong.
Welcome to <b>PSD-Tutorials.de</b>! <br /> Welcome to <strong>PSD-Tutorials.de</strong>!
A look at the result in the browser provides the following picture:
Obviously, both elements provide an identical display. But why are there two different elements? In fact, there are other forms of display for websites than those of the familiar standard browsers. Think, for example, of readers for blind people or mobile devices. The HTML elements offered by the W3C are intended to support semantics. For example, the b element no longer actually means that something should be displayed in bold. Rather, b means a visibly emphasized text that does not have increased importance. This could be product names or keywords in documents, for example.
The strong element previously stood for a stronger emphasis. em, on the other hand, was used for emphasized, important text (emphatic). strong was the enhancement of em in earlier HTML versions. Both elements are given a different meaning in HTML5.
First a text with normal emphasis.
<p> Cats are cute animals </p>
Now the same text again, but this time with the emphasis on the first word.
<p> <em>Cats</em> are cute animals.</p>
By using em, the emphasis is placed on the word cats. This would be conceivable in a discussion about whether dogs or cats are cuter.
In this example, the em element could also be applied to the word are.
<p> Cats <em>are </em> cute animals.</p>
This could be a response in a discussion where someone claims that cats are not cute at all.
In fact, passages marked with em are displayed in italics in the browser. The same visual effect is achieved with the i element.
According to the HTML5 working draft, the i element no longer stands for italics.
<p> Welcome to <i>PSD-Tutorials.de</i> </p>
Instead, this element now means that you want to use it to convey a different mood. The i element is interesting for marking technical expressions or taxonomic designations, for example.
This is all terribly theoretical, I know. In principle, you should try to adhere to the HTML5 specifications. On the other hand, nobody will tear your head off if you use strong instead of b.
<p> <em>Line with em</em><br /> <i>Line with i</i><br /> <strong>Line with strong</strong><br /> <b>Line with b</b> </p>
Ultimately, the browser manufacturers must take action here.
CSS is ultimately responsible for the actual design of the texts equipped with these elements anyway.
Acronyms with abbr
To mark up an acronym, the same element is used that was previously used for abbreviations, namely abbr.
The German-Austrian office of the <abbr title="World Wide Web Consortium">W3C</abbr> has been based at the Potsdam University of Applied Sciences since April 2009.
Browsers that interpret the abbr element correctly display the text enclosed in the abbr element underlined.
You should also assign a title attribute to abbr. The complete expression for the acronym is usually noted there. If the visitor moves the mouse pointer over the acronym, the expression is displayed in a tooltip window.
Address details with address
The address element can be used to mark up address information.
<address> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck<br /> </address>
Browsers usually display the contents of the address element in italics.
Marking up program code with code
The code element is used to mark up program code. In this sense, nothing has changed compared to earlier HTML versions. Code is still used for this purpose.
<pre> This is an HTML header: <code> <html> <head> <title></title> </head> </code> </pre>
Code is usually combined with the pre element in order to obtain the indentations used in the program code.
The HTML5 specification recommends the use of the class attribute in connection with the code element. The language used within the code element can be assigned to this attribute. Here are some typical examples of how such markup can look:
- language-html
- language-css
- language-javascript
- language-php
- language-pascal
Whether and how browsers implement these instructions is not specified by the W3C.
<pre> This is an HTML header: <code class="language-html"> <html> <head> <title></title> </head> </code> </pre>.
At the moment, the class attribute has no visible effect in the browser. However, human viewers can use it to recognize which language the program code is based on if they take a look at the source code of the page.
Lower case with small
The small element was originally used to display text smaller than normal. In HTML5, small is explicitly there for small print. This small print could be the following, for example:
- Copyright information
- disclaimers
- License terms
- TERMS AND CONDITIONS
The W3C expressly points out that small should not be used for long text passages.
<small> Copyright by PSD-Tutorials.de<br /> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck </small>
Underline texts
You can underline words using the u element. Here is an example:
<p>Welcome to <u>PSD-Tutorials.de</u></p>
The result appears in the browser as follows:
If you look at the result, this is indeed the desired effect. However, there is a catch. On the Internet, underlined texts are known to stand for hyperlinks. If you underline a text or a word, visitors may think that it is a hyperlink. The attempt to click on it will of course fail. You should therefore do without the underline.
