| layout | post |
|---|---|
| title | <strong>Inline</strong> semantics |
| subtitle | The small parts <em>within</em> a block of text |
| section | html |
While paragraphs and lists are meant to identify whole blocks of text, we sometimes want to provide meaning to a word (or a few words) within a text.
For important words, use the <strong> tag:
{% highlight html %}
This is important but this is not.
{% endhighlight %}This is important but this is not.
By default, <strong> elements are displayed in bold, but keep in mind that it is only the browser's default behavior. Don't use <strong> only to put some text in bold, but rather to give it more importance.
For emphasized words, use the <em> tag:
{% highlight html %}
This is emphasized but this is not.
{% endhighlight %}This is emphasized but this is not.
By default, <em> elements are displayed in italic, but keep in mind that it is only the browser's default behavior. Don't use <em> only to put some text in italic, but rather to give it stress emphasis.
Abbreviations like W3C or CD can use the <abbr> element:
{% highlight html %}
I just bought a CD.
{% endhighlight %}You can add a title attribute to specify the abbreviation's description, which will appear by hovering the element:
{% highlight html %}
I just bought a CD.
{% endhighlight %}I just bought a CD.
The <blockquote> element is a block-level element. It has an inline version: <q>:
{% highlight html %}
He said “Hello World”
and just left.
He said “Hello World”
and just left.
There are plenty of other inline semantic elements to choose from, but we've covered the most common ones.
*[CD]: Compact Disc *[W3C]: World Wide Web Consortium