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

CHAPTER 2: BASICS OF HTML5

HTML (Hyper Text Markup Language) is a language used for creating web pages. In fact, this language has been in use since the first webpage was made. However, the functionality has evolved as newer and better versions of the language were introduced. The language is known to have originated from SGML (Standard Generalized Markup Language), which was earlier used for document publishing. HTML has inherited the concept of formatting features and their syntax from SGML.

One of the most interesting and beneficial facet of HTML usage, as far as browsers are concerned, is that browsers support both backward as well as forward compatibility. While backward compatibility is usually easy to achieve, forward compatibility is tricky as the problem domain, in this case, is infinitely large. However, in order to implement this, browsers were designed to ignore tags that it did not recognize.

For years, HTML remained all that people wanted. However, with time, people felt the need for more, which was catalyzed by the presence of another technology called XML (eXtensible Markup Language). Although, XML shares a lot of similarities with HTML, there exist many fundamental differences between the two. Firstly, XML requires tag matching in the sense that for every starting tag, a closing tag must inevitably exist. Besides this, XML allow you to create your own tags as it does not possess a fixed set of tags like HTML.

The tags used in XML are meta-tags or tags that describe the data that is included between the starting and closing tag. In order to ensure the validity of the XML document, a technology called XSD (XML Schema Definition) is used. However, this technology cannot be used for validating HTML documents because HTML documents lack a well-defined structure.

The W3C (World Wide Web Consortium) introduced XHTML as an attempt to fix the flaws of HTML. According to the XHTML specification, HTML documents were forced to adhere to the format specifications used for XML. Therefore, this allowed the use of XSD tools for validation of HTML documents. Although, the integration of XML in the framework fixed some issues, some issues continued to crop up. One of the staggering issues of the modern times was the growing need for integration of multimedia. While CSS did perform formatting of some level, it was becoming inadequate for the growing demands of users.

In order to provide support for interactivity and animated visuals, a programmable support called JavaScript was added to this ensemble. However, initial versions of this support were difficult for programmers to understand and slow on execution time incurred. This led to the introduction of plug-ins like Flash to get the attention that it did. These plugins did what was expected of them, but the browser-multimedia integration was still loose in nature.

HTML5 is not an evolved form of XHTML. On the contrary, HTML5 can be better described as the reinvented form of HTML 4.01 and how HTML, CSS and JavaScript can be used together to solve the growing needs of the user base.

Semantic Markup

The fundamental feature of HTML5 is that it stresses on separation of behaviour, presentation and structure. The semantic markup of a website development specifies the structure of the document. In other words, it specifies the meaning of tags and what they will do for you. On the other hand, behaviour and presentation are governed by CSS and JavaScript respectively.

HTML5 Elements

In HTML, an element is simply a statement that contains a beginning tag, content and a closing tag. Therefore, when you write,

<div>

<b>This is my world!</b>

</div>

In this example, the div elements includes everything from <div> to </div>. therefore, the <b></b> tag is also a part of the div element.

It is important to state here that HTML5 is not case sensitive. Therefore, regardless of whether you write <B> or <b> for the bold tag, the browser will consider the two same. However, the use of lower case for tags is recommended by the W3C standards.

Working with Elements in HTML5

HTML5 defines more than a 100 elements. These elements, with their definitions are provided in Appendix.

How to add attributes to elements?

Additional data can be added to the begin tag in the form of attributes. An attribute can be generally represented as, name=”value”. The value for the attribute name is enclosed within quotes. There is no restriction on the number of attributes that can be added to the begin tag. For these attributes, the attribute has a name, but it does not have a value.

Example:

Here, id and class are attributes where id uniquely identifies the element and class specifies the CSS style to which this div belongs.

Boolean Attributes

Several types of attributes can be used. One of the most commonly used types is Boolean attribute. The Boolean attribute can take a value from the allowable set of values. Some possible values include:

● Checked

● Disabled

● Selected

● Readonly

There are two ways to indicate the value of a Boolean attribute.

In the first case, the value is not given and is assumed. Although, the latter seems like a redundant form, it is the more preferred form, particularly if you are using jQuery.

Global Attribute Reference

There is a set of named attributes available in HTML5, which can be used with any element. Examples of these attributes include accesskey, spellcheck and draggable, in addition to several others.

Void Elements

Some elements do not have to contain content under any circumstance. These elements include <link>, <br> and <area>, in addition to many others.

Self-closing Tags

If you are using an element that does not contain any content, then you can use a self closing tag. An example of this tag is <br/>. However, please note that other tags like <div> have to be written as <div></div> even if they do not have any content.

How to Add Expando Attributes

Any attribute that you as the author define is known as expando attribute. You can give this custom attribute a name and assign a value to the same as and when required.

How to Add Comments

Comments can be added using a ! and two hyphens (-). The syntax for adding comments is as follows:

<!—text -->

You can also add conditional comments using the following syntax:

This comment determines if the browser being used is an earlier version released earlier than IE7.

How to Create HTML Document

An HTML document can simply be described as a frame that contains metadata, content and a structure.

The HTML document must start with the tag <!DOCTYPE html>. In HTML5, the declaration is an indication to the browser that it should work in no-quirks mode or HTML5 compliant mode.

The next tag should be <html>. This element includes within itself the elements <head> and <body>. The <head> element can contain the metadata for the HTML document, which is declared and defined using the <meta> tag. The <head> element also contains the <title> element, which serves the following purposes:

● Used by search engines

● This content is displayed in the browser toolbar

● Gives a default name to the page.

The <body> element includes any other information that is to be displayed on the HTML document.

A sample HTML document is given below:

<!DOCTYPE html>

<html>

<head>

<title>TITLE OF DOC</title>

</head>

<body>

CONTENT

</body>

</html>

Note:

1. Special character like ‘>’ or ‘<’, which are a part of the HTML syntax, can be used on the HTML doc using their name or number. The syntax for their usage is:

&entity_name or &entity_number

The appendix contains the table of entity names and numbers to be used.

2. White space created using tabs, line breaks and spaces is normalized by HTML into a single space. Therefore, if you want to use multiple spaces, you must use the non-breaking space character. For example, if you want to display 10 mph such that 10 and mph are not separated by a newline, you can write 10 mph.

How to Embed Content

Now that you know how to create HTML documents with your content, you may want to embed content into the document from other sources. This content may be text from another HTML document or flash applications.

Inline Frames

Inline frames are used to embed HTML documents inline with the content of the current HTML document. Therefore, in a way, this element creates nested browsers as multiple web page are loaded in the same window. These are implemented using the <iframe> element. Nested browsing contexts can be navigated using:

● window.parent – This WindowProxy object represents the parent browsing context.

● window.top – This WindowProxy object represents the top-level browsing context

● window.frameElement – This represents the browsing context container and if there is no context container, it returns null.

The syntax of the <iframe> element is as follows:

Here the name of the attribute defines the name of the browsing context. This name can be any string like ‘sample.html’. However, the strong should not start with an underscore as names starting with underscore are reserved for special key names like _blank.

Sandboxing

Sandboxing is used for avoiding the introduction of pop-ups or any other malware in your HTML document. In order to implement this, the attribute ‘sandbox’ is used. You can use this attribute in the following manner:

</iframe>

When you use sandboxing, several restrictions are imposed on the called context. These restrictions include disabling forms, scripts, plugins and any frame other than itself. You can force the system to override these restrictions using keywords like:

● allow-same-origin

● allow-scripts

● allow-forms

● allow-top-navigation

Multiple keywords can be used by separating them using a space.

Seamless Embedding

The seamless attribute can be used in the <iframe> element for embedding of content in a manner than this content appears to be part of the main content. This attribute can be used in the following manner:

This attribute may not be supported by many browsers. Therefore, you can use CSS to achieve a similar effect.

Hyperlinks

Hyperlinks can be implemented using the <a> element. This element can be used to link both external (a different HTML document) as well as internal (another location in the same HTML document) links.

All links are underlined and depending upon the nature of the link, the colour of the link changes.

● Blue - Unvisited link

● Purple - Visited link

● Red - Active link

The first attribute of the <a> element is href, which is given the value of the URL.

Syntax for external links:

Syntax for internal links:

The id here is the id of the tag to which you want the link to jump onto. However, if you use only the # value, the link jumps to the top of the page.

The other attribute used with the <a> element is target, which allows you to control the behaviour of the link. For instance, if you want the link to open in another window, then this requirement can be specified using this attribute. The following can be used:

● _blank

This opens the link in a new browser window.

● _parent

This opens the link in the parent window.

● _self

This opens the link in the current window and is the default setting.

● _top

This opens the link in the topmost frame of the current window.

● <iframe_name>

This opens the link in the <iframe> element of the specified name. This is generally used in menus.

Hyperlinks can also be used to send emails using the following syntax:

When the user clicks on the link, an email will be sent to the specified email address.

Embedding Images

The <img> element is used for adding images to the HTML document. The <img> tag is a void element and does not require a closing tag.

The required tag for this element is src, which specifies the absolute or relative address at which the image is stored. Another attribute than can be used with the <img> tag is target, which is used to specify the text that must be displayed in case the image is not available.

Syntax:

It is important to note that you only give references to images and they are not embedded into the HTML document, in actuality. The allowed image formats are jpeg, svg, png and gif.

How to Create Image Map

The <map> element can be used to create a clickable image map. In order to create a link between the map and image, you must set a name of the map and use this name in the usemap attribute of the img tag.

The area of the map element is defined using <area> element. This is a self-closing tag that is used to define the area of the map. The area of the map can be set using the attributes shape, href, alt and coords.

The shape attribute can be give the values poly, circle, rect or default. The default value sets the area as the size of the image. The href and alt attributes are used in the same manner as they are used in the <a> element. Lastly, the coords attribute are defined according to the shape chosen in the following manner:

● poly – x₁, y₁, x₂, y₂, … , x_n, y_n

● circle – x, y, radius

● rect - x₁, y₁, x₂, y₂

For the polygon, the starting and ending coordinates should be the same. In case a discrepancy in this regard exists, a closing value is added.

Example:

<img src ="worldmap.gif" width="145" height="126"

alt="World Map" usemap ="#country" />

<area shape="circle" coords="105,50,30"

href="China.html" alt="China" />

</map>

Embedding Plug-ins

Plugins can likewise be embedded into HTML documents using <embed> and <object> elements. Although, both these elements perform similar tasks, they were created by different browsers. As a result, they coexist in HTML5. While the <embed> element provides ease of use, the <object> element provides more functionality to the user. Syntax for these two elements is given below:

The <embed> tag

The src attribute specifies the url or address of the file to be embedded. Other attributes that are taken by the <embed> element includes:

● type - used to specify the MIME type of the content

● height – used to specify the content height in pixels

● width – used to specify the content width in pixels

As mentioned previously, some browsers may not support <embed> element. Therefore, if you are using it in your document, you must add fallback content specification. For instance, if you are embedding a flash file, you must redirect the user to the download link of flash player if the browser does not support it already.

You can do this in the following manner:

<img src=”address of the image for download flash player”

alt="Download Adobe Flash player" />

</a>

</embed>

The <object> tag

The <object> tag allows you to embed a variety of multimedia files like video, audio, PDF, applets and Flash. The element accepts the following attributes:

● type – used to specify the MIME type of data

● form – used to specify the form id or ids of the object

● data – used to specify the URL of the resources that the object uses

● usemap – used to specify the name of a client-side image map that the object uses

● name – used to specify the object name

● height – used to specify the height of the object in pixels

● width – used to specify the width of the object in pixels

Of all the attributes mentioned above, it is necessary to mention either the data or type attribute.

Data can be passed into the <object> element using the <param> tag, which is a combination of name and value attributes. Multiple parameters can be declared using this tag.

</object>

Note:

1. The <object> element must always be used inside the <body> element.

2. HTML5 supports only the attributes listed above and global attributes for the <object> element.