Introduction
All elements in HTML5 are organized using tags. The basic tags in HTML5 include html, head, title, meta, link, script, and body. The DOCTYPE must be provided before inserting the basic tags in HTML5. There are different data types, attributes, and entities that can be applied to the tags present in HTML5. All the tags are either classified into container tags or standalone tags. This classification is based on the use of the end tag for a certain HTML element. HTML5 is also the preferred language for mobile application development because of its various benefits.
This session explains the basic tags that are present in HTML5. This session also lists the different data types, attributes, and entities of HTML5. Finally, the session explains the advantages of using HTML5 in mobile application development.
Elements
An element organizes the content in a Web page hierarchically, which forms the basic HTML structure. It consists of tags, attributes, and content. Tags denote the start and end of an HTML element.
A start tag includes an opening angular bracket (<) followed by the element name, zero or more space separated attributes, and a closing angular bracket (›). Attributes are name/value pairs that describe the element and content format. An end tag is written exactly as the start tag, but the forward slash (/) precedes the element name. Figure 2.1 shows an element in HTML tag.
NOTE:
Tags are referred to as the markup in an HTML document.
DOCTYPE
The DOCTYPE element informs the browser the HTML version number of your document.
It is the first declaration in the HTML5 document before any other HTML code is written.
By using a DOCTYPE, the browser is able to be more precise in the way it interprets and renders your pages. It is highly recommended to use a DOCTYPE at the beginning of all HTML documents.
The new HTML5 DOCTYPE declaration is as follows:
<! DOCTYPE html>
Not only is this syntax valid for the DOCTYPE for HTML5, but it is also the DOCTYPE for all future versions of HTML. This DOCTYPE is compatible even with the older browsers.
The following example shows the use of the new document type specification.
EXAMPLE
<! DOCTYPE html>
Basic Tags
An HTML document is made up of different elements, tags, and attributes, which specify the content and its format. Therefore, HTML is both a structural and presentational markup language. Structural markup specifies the structure of the content, while the presentational markup specifies the format.
An HTML page is saved with the . html extension. The basic structure of an HTML document mainly consists of seven basic elements. These are as follows:
HTML
The HTML element is the root element that marks the beginning of an HTML document. It contains the start and end tag in the form of <HTML>and</HTML> respectively. It is the largest container element as it contains various other elements.
HEAD
The HEAD element provides information about the Web page such as keywords and language used, which is not displayed on the Web page. Keywords are important terms existing in a Web page used by the search engines to identify the Web page with respect to the search criterion.
TITLE
The TITLE element allows you to specify the title of the Web page under the <TITLE>and </TITLE> tags. The title is displayed on the Title bar of the Web browser. The TITLE element is included within the HEAD element.
META
The meta tag is used for displaying information about the data. In HTML5, the content meta tag which was used for specifying the charset or character encoding has been simplified. The new ‹meta > tag is as follows:
<meta charset=”utf=8″ />
UTF-8 is the most commonly used character coding that supports many alphabets.
UTF-8 is also being promoted as the new standard.
There are several other attributes associated with the meta tag that can be used to declare general information about the page. This information is not displayed in the browser. Meta tags provide search engines, browsers, and Web services the information that is required to preview or acquire a summary of the relevant data of your document.
In HTML5, it is not very important to self-close tags with a slash at the end. Though self-enclosing is recommended for compatibility reasons.
LINK
The < link> tag is used to define the association between a document and an external resource. It is used to link stylesheets. Its type attribute is used to specify the type of link such as ‘text/css’ which points out to a stylesheet.
<link type=”text/css” rel=”stylesheet” href=first.css”>
The type attribute is not included in HTML5. The reason is that CSS has been declared as the default and standard style for HTML5. So, the new link is as follows:
<link rel=”stylesheet” href=”first.css”>
SCRIPT
With HTML5, JavaScript is now the standard and default scripting language. Hence, you can remove the type attribute from the script tags too. The new script tag is as follows:
<script src=”first.js”></script>
The following example shows the use of the script tag.
EXAMPLE
< I DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Webinar</title>
<link rel="stylesheet" href="first.css" >
<script src="first.js"></script>
</head>
</html >
BODY
The BODY element enables you to add content on the Web page specified under the <BODY> and </BODY> tags. Content can include text, hyperlinks, and images. You can display the content using various formatting options such as alignment, color, and background.
<html>
<head>
<title>WELLCOM PAGE </title> "TITLE TO BE DISPLAYED ON THE TITLE BAR OF THE BROSWER"
</head>
<body>
Hello users "CONTENT TO BE DISPLAYED ON A WEB PAGE"
</body>
</html >Data Types
A data type specifies the type of value assigned to the attributes and the type of content that is to be displayed on the Web page. The different types of content include text, images, hyperlinks, video, and audio. Data types help in identifying the type of formatting such as color and length of data.
The important basic HTML data types are as follows:
Text Strings
Specifies textual content, which is readable by the user.
Uniform Resource Identifiers (URIs)
Specifies the location of Web pages or network files.
Colors
Specifies the color to be applied to the content on the Web page.
Lengths
Specifies the spacing among HTML elements. Length values can be in Pixels, Length, or MultiLength. Pixels refer to the smallest dot on the screen. Length is specified as a percentage value of Pixels or available space on the screen. MultiLength can be specified as Pixels or percentage.
Content Types
Specifies the type of content to be displayed on a Web page. Examples of content types include “text/html” for displaying text using HTML format, “image/ gif” for displaying image of a gif format, and “video/mpg” for displaying a video file of •mpg format.
Attributes
HTML attributes helps to provide some meaning and context to the elements. Some of the global attributes used in HTML5 elements are as follows:
class –
Specifies classnames for an element.
contextmenu –
Specifies the context menu for an element.
dir –
Specifies the direction of the text present for the content.
draggable –
Specifies the draggable function of an element.
dropzone –
Specifies whether the data when dragged is copied, moved, or linked,
when dropped.
style –
Specifies the inline CSS style for an element.
title –
Specifies additional information about the element.
HTML Entities
Entities are special characters that are reserved in HTML. These entities can be displayed on a HTML5 Web site using the following syntax:
Syntax:
&entity_ name;
OR
&#entity_number;
Container and Standalone Tags
There are two types of HTML elements namely, container and standalone elements. A container element includes the start tag, contents, sub-elements, and end tag. All the basic HTML elements are container elements. A standalone element consists of the start tag and attributes followed by the end tag as /> without any content.
HTML5 and Mobile Devices
HTML5 has helped to create better and richer mobile applications. For this, APis are used in HTML5. These APIs support advanced Web application features for mobile browsers.
HTML5 is not supported by older mobile devices. New age smartphones with Apple iOS and Google Android as operating systems support HTML5 compliant browsers. Even Microsoft Windows 7 for Mobile will have a newly developed browser to support HTML5 developed Web sites and applications.
Due to the various mobile platforms available on mobile devices, development of mobile applications is difficult. HTML5 has tried to integrate all the features to deploy mobile applications that would be compatible in all the platforms. HTML5 provides features such as drag-and-drop functionality, video embedding in an application, and even offline capabilities.
As HTML5 is compatible with most mobile operating systems, upto 30% of the cost for development for different operating systems is saved. Also, there is a reduced dependency in third-party components, thus reducing the licensing costs. All the required components will be readily available through the browser in HTML5.
Benefits of HTML5 for Mobile Development
The benefits of HTML5 for mobile developments are as follows:
- HMTL5 has included APis, hence additional plug-ins are not required for mobile browsers.
- Mobile development is easier as knowledge of only HTML5, CSS, and JavaScript is majorly required. These are easier as compared to the other languages used for Mobile development. The development is also faster in HTML5.
- There is a rising growth for mobile applications and due to its enhanced compatibility, HTML5 forms the foundation for developing these mobile applications.
- HTML5 is compatible with most operating system platforms. The mobile applications developed on HTML5 can run on browsers of Android, iOS, Blackberry, Windows Phone, and other mobile operating systems.
- The development cost for creating applications in HTML5 is low.
- Applications based on location and maps will have greater support in HTML5. The plan is to support such applications on browsers, hence making them platform independent.
- Third-party programs are not required in HTML5. Hence, media functions such as audio and video have better functionality and improved support in HTML5.
Summary
- An element organizes the content in a Web page hierarchically, which forms the basic HTML structure.
- The DOCTYPE element tells the browser the type of your document.
- A data type specifies the type of value assigned to the attributes and the type of content that is to be displayed on the Web page.
- Entities are special characters that are reserved in HTML.
- A container element includes the start tag, contents, sub-elements, and the end tag.
- A standalone element consists of the start tag and attributes followed by the end tag as /> without any content.
- HTML5 provides features such as drag-and-drop functionality, video embedding in an application, and even offline capabilities for mobile devices.