[HTML5] Building Documents : Text-level Symantics

 

I am going to summarize the tags that break up the document and give content some semantic meanings. New elements or new changes in HTML5 will be marked specifically. Please note that all new features are not supported by major browsers.

1. Lists

There are 3 types of lists in HTML:

  • Unordered List: <ul> and <li>
  • Ordered List: <ol> and <li> 
  • Definition List: <dl>, <dt>, and <dd>

[Note 1] New Changes in HTML5 – Unordered List <ul>

  • The “type” attribute is deprecated: use CSS instead

[Note 2] New Changes in HTML5 – Ordered List <ol>

  • The “start” and “type” attribute was deprecated in HTML4 but are supported again in HTML5
  • The “reversed” attribute is added: specifies that the list order should be descending
<div>Top 3 SF Novels </div>
<ol reversed="reversed">
  <li>The Hitchhiker's Guide to the Galaxy</li>
  <li>Dune</li>
  <li>The Foundation Trilogy</li>
</ol>

The definition list is not used frequently but quite interesting to use. There’s no change in HTML5.

  • <dl> : definition list
  • <dt> : definition term
  • <dd> : definition description
<div>Cafe Menu</div>
<dl>
  <dt>Cappuccino</dt><dd>espresso, steamed milk, and foam</dd>
  <dt>Latte</dt><dd>espresso and milk</dd>
  <dt>Mocha</dt><dd>espresso, milk, and chocolate</dd>
</dl>

Usually the content in the <dd> element is indented in browsers.

 

2. Quotes

There are 2 types of quotes:

  • <blockquote> : specifies a section that is quoted from another source. Browsers usually indent this element.
  • <q> : defines a short quotation. Browsers often insert quotation marks around it.

[Note 1] There are no new changes in HTML5.

[Note 2] The <blockquote> element has the “cite” attribute that specifies the source of the quotation. Browsers usually ignores the “cite” attribute.

<div>Exodus 21</div>
<blockquote cite="en.wikiquote.org/wiki/The_Bible">
  Eye for eye, tooth for tooth, hand for hand, foot for foot.
</blockquote>
<div>Exodus 21 says
 <q>Eye for eye, tooth for tooth, hand for hand, foot for foot.</q>
</div>

 

3. Text-level HTML4 Elements

The following HTML4 elements in will be used in HTML5 too.

  • <em> : Emphasized text
  • <strong> : Important text
  • <dfn> : A definition term
  • <code> :  A piece of computer code
  • <samp> : Sample output from a computer program
  • <kbd> : Keyboard input
  • <var> : A variable of computer code

But the following tags are removed in HTML5 and are not valid anymore.

  • <acronym> : Use <abbr> in HTML5
  • <big> : Use CSS
  • <center> : Use CSS
  • <strike> : Use CSS
  • <tt> : teletype text, Use CSS

Note that when you create HTML5 documents, you only take care of semantic structure of the document. Leave off any presentational marks. Rely on CSS for any styling issues.

Finally, <b>, <i>, and <small> elements are redefined in HTML5. They should not be used for bold, italic, or smaller text any more.

  • <b> : a part of text that can be distinctive without any extra importance (keywords, names …)
  • <i> : a part of text in an alternate voice or mood (a technical term, a phrase from another language, or a thought)
  • <small> : small print such as legalese, disclaimers, conditions, terms, and copyrights

 

4. Acronyms and Abbreviations

The <acronym> element is deprecated and the <abbr> element needs to be used in HTML5. The “title” attribute is used to provide the definition. Good thing is that the “title” attribute is displayed as a tooltip in most browsers.

Let's study <abbr title="Hyper Text Markup Language 5">HTML5</abbr>.

 

5. Highlighting Text

The <mark> element is new in HTML5 and used to define marked text or highlight parts of a text.

Don't forget! Today is my <mark>birthday</mark>!

If you view this page in FireFox, you can see that the “birthday” is hightlighted.

 

6. Expanding and Collapsing

Collapsible areas using JavaScript became popular. HTML5 defines a new <details> element for the area that can be collapsible.

The <summary> element is used for the title of the area.

<details>
  <summary>HTML5</summary>
  <p>New HTML is comming!</p>
  <ul>
    <li>New semantic tags</li>
    <li>Canvas</li>
    <li>Video</li>
  </ul>
</details>

 

7. Marking Dates and Times

The <time> element is used to define a time and a date. It is new in HTML5.

You can set the time (24 hour clock) or date in the “datetime” attribute or as the element content.

  • YYYY-MM-DD (2013-10-31)
  • YYYY-MM-DDThh:mm:ss (2013-12-25T07:30:00)
  • hh:mm:ss (17:00:00)
<div>
2012 Store Hour: We open at <time>10:00</time> and close at <time>18:00</time> everyday except <time datetime="2012-12-25">Christmas day</time>.
</div>

The “pubdate” attribute is used to indicate that the specified time is the publication date/time for a web page or an article.

<p> Published : <time datetime="2013-01-12" pubdate="pubdate">Jan/12/2013</time>.</p>

 

8. Specifying a Value in a Range

The <meter> tag defines a measurement within a known range. It is new in HTML5.

The following attributes are available:

  • max : specifies the maximum value of the range
  • min : specifies the minimum value of the range
  • high : specifies the range that is considered to be a high value
  • low : specifies the range that is considered to be a low value
  • optimum : specifies what value is the optimal value for the gauge
  • value : specifies the current value of the gauge (Required)
User Rating: <meter max="100" min="0" value="60">60%</meter>
1: <meter max="100" min="-30" high="30" low="10" optimum="20" value="-30">-30 degree</meter> <br />
2: <meter max="100" min="-30" high="30" low="10" optimum="20" value="0">0 degree</meter> <br />
3: <meter max="100" min="-30" high="30" low="10" optimum="20" value="20">20 degree</meter> <br />
4: <meter max="100" min="-30" high="30" low="10" optimum="20" value="50">50 degree</meter> <br />
5: <meter max="100" min="-30" high="30" low="10" optimum="20" value="100">100 degree</meter> <br />

Browers which support this tag display a graphical representation. The following screenshot is from Google Chrome.

 

9. Displaying Progress

The <progress> tag represents the progress of a task and is new in HTML5.

It has 2 attributes:

  • max : specifies how much work the task requires in total
  • value : specifies how much of the task has been completed
1 of 5: <progress max="100" value="0">0 %</progress> <br />
2 of 5: <progress max="100" value="25">25 %</progress> <br />
3 of 5: <progress max="100" value="50">50 %</progress> <br />
4 of 5: <progress max="100" value="75">75 %</progress> <br />
5 of 5: <progress max="100" value="100">100 %</progress> <br />

The screenshot is from FireFox.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s