Notice: Undefined variable: user_id in /home/thetexvn/domains/thetexvn.com/public_html/blogs/follow.php on line 40
Introduction & Basics of HTML5 | by Zia | TEXVN

Conversation

Your input fuels progress! Share your tips or experiences on prioritizing mental wellness at work. Let's inspire change together!

Join the discussion and share your insights now!

Comments 0


advertisement

Introduction & Basics of HTML5

Introduction to HTML5


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 basic tags in HTML5. Different data types, attributes, and entities can be applied to tags in HTML5. All the tags are either classified as container tags or standalone tags. This classification uses 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 different data types, attributes, and entities in HTML5. Finally, the session explains the advantages of using HTML5 in mobile application development.


Elements

An element organizes content on 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.

HTML5 Element



Doctype

The DOCTYPE element informs the browser of the HTML version number of your document. It is the first declaration in an HTML5 document before any other HTML code is written. By using DOCTYPE, the browser can be more precise in the way it interprets and renders your pages. It is highly recommended to use 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 of HTML5, but it is also the DOCTYPE for all future versions of HTML. This DOCTYPE is compatible even with 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 a presentational markup language. Structural markup specifies the structure of the content, while 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 tags 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 on a Web page and are used by search engines to identify the Web page according to search criteria.

TITLE:
The TITLE element allows you to specify the title of the Web page under the <TITLE> and </TITLE> tags. The title is displayed in the title bar of the Web browser. The TITLE element is included in the HEAD element.

META:
The meta tag is used for displaying information about 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 with the information that is required to preview or acquire a summary of the relevant data in your document.

In HTML5, it is not very important to self-close tags with a slash at the end. Though self-closing 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 style sheets. Its type attribute is used to specify the type of link such as 'text/css' which points to a style sheet.

<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, Java Script is now the standard and default scripting language. Hence, you can remove the type attribute from 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:

<! 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 to the Web page specified under the <BODY> au </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>Welcome page</TITLE>
 </HEAD>
 <BODY>
  This web page will list the different Web technologies used to create websites... 
 </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. Different types of content include text, images, hyperlinks, video, and audio. Data types help in identifying types of formatting such as color and length of data.

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 between HTML elements. Length values can be in pixels, Length, or MultiLength. A pixel refers to the smallest dot on the screen. Length is specified as a percentage value of pixels or available space on the screen. Multi-Length can be specified as pixels or percentages.

  • 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 display format, and "video/mpg" for displaying a video file in .mpg format.

HTML data types



Attributes

HTML attributes help to provide some meaning and context to the elements. Some of the global attributes used in HTML5 elements are as follows:

  • Class - Specifies the class name for an element.

  • Context menu - Specifies the context menu for an element.

  • Dir - Specifies the direction of the text present in 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.


HTML Entities

Entities are special characters that are reserved in HTML. These entities can be displayed on an HTML5 website using the following syntax:

Syntax:

&entity_name;

OR

&#entity number;

HTML Entities



Container and Stand-alone Tags

There are two types of HTML elements namely, container and standalone elements. A container element includes the start tag, contents, sub-elements, and the 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 us 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. Smartphones with Apple iOS and Google Android as operating systems support HTML5-compliant browsers.

Due to the various mobile platforms available on mobile devices, the development of mobile applications is difficult. HTML5 has tried to integrate all the features to deploy mobile applications that would be compatible with all 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, up to 30% of the cost of development for different operating systems is saved. Also, there is a reduced dependency on third-party components, thus reducing licensing costs. All the required components will be readily available in the browser in HTML5.

Benefits of HTML5 for Mobile Development

The benefits of HTML5 for mobile development are as follows:

  • HMTL5 has included APLs, 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 compared to the other languages used for mobile development. Development is also faster in HTML5.

  • There is rising growth in 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 in browsers for Android, IOS, Windows Mobile, 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 in all 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.


HTML Introduction to HTML5 Basics of HTML5 What is HTML5 features of HTML5 HTML5 for mobile Elements in HTML Doctype in HTML Basic tags in HTML Data types in HTML Attributes in HTML HTML Entities Stand alone Tags in HTML

advertisement