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 HTML, an element is simply a statement that contains a beginning tag, content and a closing tag. Therefore, when you write,
<b>This is my world!</b>
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.
<div id=”main” class=”mainContent”></div>
Here, id and class are attributes where id uniquely identifies the element and class specifies the CSS style to which this div belongs.
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:
There are two ways to indicate the value of a Boolean attribute.
<input type="checkbox" name="vegetable" value="Broccoli" checked='' />
<input type="checkbox" name="vegetable" value="Broccoli" checked='checked' />
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.
Some elements do not have to contain content under any circumstance. These elements include <link>, <br> and <area>, in addition to many others.
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:
You can also add conditional comments using the following syntax:
<!--[if lte IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
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:
<meta charset="utf-8" />
<title>TITLE OF DOC</title>
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 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 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 sandbox=”keywords” src="name">
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:
Multiple keywords can be used by separating them using a space.
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:
<iframe seamless="" src="name"></iframe>
<iframe seamless src="name"></iframe>
<iframe seamless="seamless" src="name"></iframe>
This attribute may not be supported by many browsers. Therefore, you can use CSS to achieve a similar effect.
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:
This opens the link in a new browser window.
This opens the link in the parent window.
This opens the link in the current window and is the default setting.
This opens the link in the topmost frame of the current window.
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:
<a href="mailto:email address">Text</a>
When the user clicks on the link, an email will be sent to the specified email address.
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.
<img src=”address” target=”alternative text”>
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 – x1, y1, x2, y2, … , xn, yn
● circle – x, y, radius
● rect - x1, y1, x2, y2
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.
<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" />
<area shape="default" href="InvalidCountry.html" alt="Please Try Again" />
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
<embed src="Flash.swf"> </embed>
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:
<embed src="Flash.swf" >
<a href="link for downloading flash player">
<img src=”address of the image for download flash player”
alt="Download Adobe Flash player" />
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.
<param name="autoplay" value="false" />
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.