A SIMPLE START TO JQUERY, JAVASCRIPT, AND HTML5 FOR BEGINNERS (2014)

CHAPTER 5: HTML5 EXPLAINED

The chapter focuses on the basics of HTML5 and how they can be used for creating high performance, new-generation pages. However, most of the elements explained in that chapter included elements that HTML5 has received from its predecessors. This chapter takes you a step further in your quest of learning HTML5, introducing concepts that are newly added to this technology.

In the previous chapter on CSS, we introduced the concept of <div> element to you. This element is preferred over all its alternatives as far as page layout creation is concerned. While some people also use the <table> element, it is usually not a recommended solution as it is difficult to maintain as well use. However, both the concepts are elaborated upon this chapter.

Semantic Markup

The <div> and <span> elements are the most commonly used and recommended elements for positioning and formatting content. However, it is recommended that you should use different <div> elements for specifying different sections of the page like header and footer. This shall allow you to position them individually and in a more organized manner. Therefore, the W3C has named these new elements with names like <footer> and <header>.

Browser Support

It is true that your HTML code will not be read by any of your users. However, there are other tools and machines that are constantly parsing your code. These tools include web crawlers, which indexes webpages for searching and NVDA (Non-Visual Desktop Access) devices, which are used by many users with special needs as an alternative for reading and comprehending web pages. Therefore, they require you to use tags that are understandable.

How to Create HTML5 Documents

Although, the above discussion clearly mentions the importance of using meaning tags and prohibits the use of tags like <div> and <span>, you may still have to use them for styling purposes. As you read on, you will realize how semantic tags must be supplied for providing meaning to your tags. It is important to mention here that semantic tags should be used carefully, and if you realize that there is a need to define custom elements, then go ahead and use the <div> and <span> elements. However, be sure to add an ID and class-name to the elements that describe their meaning as well as possible.

How to Create HTML5 Layout Container

A layout container, as the name suggests, is a container that entails the layout of a page. In other words, the container contains the different sections of the layout or its children in such a manner that they can be positioned in a flexible manner. As a developer, you can easily distinguish between <div> elements on the basis of their class names and IDs. However, this is not true for browsers.

Therefore, there has got to be a way by which you can ask the browser to interpret elements. For instance, you may want to ask the browser to focus on a certain <div> element upon opening. All this and more can be done with the help of layout containers that express elements in such a manner that they are understandable to both the browser and the user.

Some of the commonly used elements for creating a layout container include:

● <header>

It is used to define the header section or the topmost section of the HTML document. This element can also be defined inside the <article> element.

● <footer>

It is used to define the footer section or the bottom-most section of the HTML document. This element can also be defined inside the <article> element.

● <nav>

It is used to define the section that contains all the navigational links.

● <aside>

This element is generally used for sidebars and separates the content in the <aside> element from the content that is outside this element.

● <section>

This element defines a part of the whole section and is named with the elements <h1>, <h2>, <h3>, <h4>, <h5> and <h6>.

● <article>

This element defines a complete unit of content, which you can copy from one location to another. An example of such a unit is a blog post.

Using Roles

The role attribute can be declared inside the <div> and <aside> elements. The role class hierarchy and the usage of roles for providing specific meanings, as far as far as accessibility is concerned, is defined in WAI-ARIA (Web Accessible Initiative - Accessible Rich Internet

Applications).

One of the parent role classes is the landmark role class, which defines the navigational landmarks on the webpage. The child classes of the parent role class include:

● banner

This defines website specific content that is not expected to change from one webpage to another like headers.

● application

This defines that the specified area is a web application.

● contentinfo

This defines the information included in the webpage about the webpage like copyright information. This information is mostly a part of the footer content.

● complementary

This defines a section of the page that is meaningful when detached from the page as well.

● main

The main web page content is defined using this child role class.

● form

This defines the area of the webpage that is expected to take webpage inputs.

● search

This child role class is used to define the location on the webpage that is used for getting the search query from the user and displaying the results of the search.

● navigation

The area containing navigational links is a part of this child role class.

These roles can be used for providing meaning. However, the new elements included in HTML5 are meaningful themselves. Yet, there are some utilities that are not available in HTML5 and for these, role attribute can be used.

How to Control format using <div> element?

As mentioned previously, the <div> element is essentially invisible and does not provide any meaning to the element. However, if you wish to use it for formatting purposes only, then it is perfect for this purpose.

How to Add Thematic Breaks?

The void element <hr/> can be used for adding thematic breaks, which are used for denoting a transition from one set of content to another.

How to Annotate Content?

There are several elements available for annotation. These include <b> and <i>, which you have been using for ages. However, they have new meanings now, in addition to the style that they denote. For instance, the <b> element denotes the style ‘bold’. In addition to this, HTML5 adds the meaning ‘span of text with special focus, but no change in mood, importance level or implication.’

Although, the use of the bold style makes more sense in this context, but you can still use this element for denoting names of products in reviews or keywords. Similarly, the element <strong> indicates the relative importance of content and <i> denotes a change in mood or implication of the content concerned. Besides this, the <em> element is used for text that will be alternatively pronounced by the reader.

How to Use <abbr> for Acronyms and Abbreviations?

In the previous versions of HTML, the <acronym> element was used for this purpose. However, this element has become obsolete and the new element used for this purpose is <abbr>. It is an inline element, which is generally used with other inline elements like <em> and <strong>.

Element - <address>

This element is used for defining the contact information of the owner or the author of the webpage.

Quotations and Citations

You can indicate that a particular text is a quote by using the element <blackquote>, which is used for a long quotation, and <q>, which is used for an inline quotation. You can mention the source of the quotation using the cite attribute or the <cite> element. However, using the <cite> element inside <q> and <blackquote> elements is considered a better approach. Please remember that the <cite> element can only mention the name of the work and other information elements like author’s name and location of publishing, are not included here.

How to Document Code in HTML5?

There are two elements, <code> and <samp>, are used for documenting code. While the element <code> is used for documenting the source code, the element <sample> is used for the output of the code. A sample HTML for how this is done is given below:

echoContent('Screen');

function echoContent(name)

{

alert('This is' + name + '.');

}

</code>

This is Screen.

</samp>

The <pre> Element

It is important to mention here that these elements do not preserve the whitespace. Therefore, a class needs to be implemented for this purpose. This class should look like:

style rule.

.maintainWhiteSpace {

white-space: pre;

}

Some browsers may not support this style rule. Therefore, for such browsers, it is advisable to use the element <pre>. Therefore, <pre> element can be used for defining the pre-formatting rules.

The <var> Element

This element is used to declare that the text specified inside it, is a variable. Example:

<p>

The variable <var>i</var> represents the number of iterations for the loop to perform.

</p>

The <br /> and <wbr /> Elements

The <br/> element implements a line break. On the other hand, the <wbr/> implements a word break.

The <dfn> Element

There may be occasions when you wish to define a term. This can be done using the <dfn> element, which takes title as one of its attributes.

Working with Figures

Images and figures are an integral part of any web page content. Therefore, every figure can also be viewed as a unit of content, which may consist of a caption and a reference from the page to which it may belong. In order to define one or more images, the <figure> element is used. The element <figurecaption> can be used for defining the caption of the figure.

However, it is important to mention here that the <figure> element does not give any importance to the position of the figure and the same is included along with the content. However, if the position and location of the figure is of importance to you., then you must consider using the <div> element.

The <summary> and <details> Elements

The element <summary> contains the summary of the content of the webpage, which can be displayed in the form of a collapsible list using the <details> element. Therefore, when you load a page, only the contents of the <summary> element will be displayed, while the contents of the <details> element are displayed when the user clicks on the summary.

Other Annotations

In addition to the above mentioned, there are a few more annotations available, which include:

● <s> - Used for striking out text

● <u> - Used for underlining text

● <mark> - Used for highlighting text

● <ins> - Used for indicating that the text has been inserted

● <del> - Used for indicating that the text has been deleted

● <small> - used for indicating that the text must be printed in fine letters

● <sub> - Indicates that the text is a subscript

● <sup> - Indicates that the text is a superscript

● <time> - Used for indicating that the text denotes time and date

● <kbd> - used for indicating that the text is a user input

Language Elements

You may need to use characters of Chinese, Japanese or Korean origin in your text. In order to support this inclusion, the element <ruby> can be used. Inside this element, other elements like <bdi> and <bdo>, for defining the isolation and direction of text. Besides this, <rt> and <rp> elements can also be used for placing notation or parentheses in the text of <ruby> element.

Working with Lists

In HTML5, several elements for defining unordered, ordered and descriptive lists exist. A fourth category of ‘Custom lists’ is also present to allow customization by the developer. The list items for all these are declared using the <li> element. Moreover, all the three types of lists support list nesting.

Ordered Lists

Ordered lists are declared using the element <ol> and the elements of ‘order’ in this list are brought about by an automatic numbering of the elements that are included in this list. The attributes that can be used with ordered lists include:

● start - Used to set the starting number of the list

● reversed - Used for declaring if the list has to be ordered in an ascending or descending order

● type – Used for declaring the type of the list, which can be A, a, 1 or I.

Unordered Lists

This type of a list is declared using the <ul> element and there is no numbering of elements in this case. The elements of the lists are simply represented as bullet points.

Description Lists

This type of a list is declared using the <dl> element. Using this element, you can give a description containing zero or more terms. Besides this, the elements of the list are declared using the <dt> element, which specifies the term, and <dd>, which gives a description of the term.

Custom Lists

The developer can make use of CSS styles to create custom lists. In this case, a different style rule can be created for each level of a nested list.

Working with Tables

Another format for arranging and presenting data in webpages is tables. Tables are declared using the <table> element and represents data in a rows-columns format. The cells of the tables are defined using the <tr> and <td> elements. While <tr> is used for rows, <td> is used for columns.

Despite that fact that HTML5 tables are one of the most powerful constructs available to the developer, it is important to understand how and where tables can be most appropriately used. Here are the reasons why tables should not be used:

● The table created for a web page is not rendered until the </table> tag is read. On the other hand, if the same construct is created using the <div> element, the content will be rendered as it is read.

● Tables are extremely difficult to maintain.

● Tables are difficult to interpret for accessibility devices.

Sample Implementation:

<table>

<tr>

<td>Frank</td>

</tr>

<tr>

<td>David</td>

</tr>

<tr>

</table>

The table created above will look like:

Frank	1978
David	1967
Alex	1989

As you observe the table, you must have realized that the table is not complete unless we define what is called the table headers. This can be done using the <th> element. You can create table headers both vertically and horizontally. For example, we can define the following table header in the code used above.

<table>

<tr>

<th>Year of Birth</td>

</tr>

<tr>

<td>Franky</td>

</tr>

<tr>

<td>David</td>

</tr>

<tr>

</table>

The resulting table for this code will look like this:

Name	Year of Birth
Franky	1978
David	1967
Alex	1989

In the above case, the table headers are simply of a larger font size. However, you can style these as you want by style rules. This can be done in the following manner:

th {

background-color: black;

color: white

}

This style rule will color the cells of the table headers with black color and the text will be written in white.

The normal behavior of most browsers is to automatically place all the <tr> elements in the <tbody>, indicating that this is the body of the table. However, it is a good practice to define the <tbody> explicitly. Besides this, the <thead> and <tfoot> can also be explicitly defined. The header, body and footer of the table can be individually styled using CSS. As a rule, you can have one header element, one or more body elements and one footer element.

The next important content feature that must be added to the table created above is the table caption. In order to define the table caption, the <caption> element is used.

In some cases, you may feel the need to style individual columns. This may seem like a difficult task considering the fact that tables are essentially row centric in HTML. While you have <tr> elements to identify rows, there are no <tc> elements for identifying columns. The <td> element identifies a cell. However, you can still style individual columns using the <colgroup> or <col> elements. The <table> element can have the <colgroup> element, which includes the <col> elements for columns that are a part of this group of elements. In addition, the <col> element also has aspan attribute for defining the columns that are a part of this group. A sample implementation to explain how this works is given below:

</colgroup>

The CSS style rule for styling this group of columns can be something like this –

.vHeader {

color: red;

}

While the tables discussed till now are regular tables, HTML5 also supports irregular tables, which can be described as tables that have a different number of columns for each row. The rowspan and colspan attributes can be used for managing the layout of the table.