Sumangal 's blog
Html for beginners to advanced

Photo by Jackson Sophat on Unsplash

Html for beginners to advanced

Html 5 introduction

Sumangal karan's photo
Sumangal karan
·

10 min read

Table of contents

#Html5

HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a programming language, but rather a markup language. In this tutorial, we will discuss the features of HTML5 and how to use it in practice.

This blog has been designed for beginners in HTML5 to make them understand the basic-to-advanced concepts of the subject.

New Features

HTML5 introduces a number of new elements and attributes that can help you in building modern websites. Here is a set of some of the most prominent features introduced in HTML5.

1New Semantic Elements − These are like <header>, <footer>, and <section>.

2Forms 2.0 − Improvements to HTML web forms where new attributes have been introduced for <input> tag.

3Persistent Local Storage − To achieve without resorting to third-party plugins.

4WebSocket − A next-generation bidirectional communication technology for web applications.

5Server-Sent Events − HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE).

6Canvas − This supports a two-dimensional drawing surface that you can program with JavaScript.

7Audio & Video − You can embed audio or video on your webpages without resorting to third-party plugins.

8Geolocation − Now visitors can choose to share their physical location with your web application.

9Microdata − This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics.

10Drag and drop − Drag and drop the items from one location to another location on the same webpage.

HTML5 - Syntax

The DOCTYPE

DOCTYPEs in older versions of HTML were longer because the HTML language was SGML based and therefore required a reference to a DTD.

HTML 5 authors would use simple syntax to specify DOCTYPE as follows −

<!DOCTYPE html>

The above syntax is case-insensitive.

Character Encoding

HTML 5 authors can use simple syntax to specify Character Encoding as follows −

<meta charset = "UTF-8">

The above syntax is case-insensitive.

The <script> tag

It's common practice to add a type attribute with a value of "text/javascript" to script elements as follows −

<script type = "text/javascript" src = "scriptfile.js"></script>

HTML 5 removes extra information required and you can use simply following syntax −

<script src = "scriptfile.js"></script>

The <link> tag

So far you were writing <link> as follows −

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML 5 removes extra information required and you can simply use the following syntax −

<link rel = "stylesheet" href = "stylefile.css">

Html 5 elements

HTML5 elements are marked up using start tags and end tags. Tags are delimited using angle brackets with the tag name in between.

The difference between start tags and end tags is that the latter includes a slash before the tag name.

Following is the example of an HTML5 element −

<p>...</p>

HTML5 tag names are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase.

Most of the elements contain some content like <p>...</p> contains a paragraph. Some elements, however, are forbidden from containing any content at all and these are known as void elements. For example, br, hr, link, meta, etc.

Here is a complete list of HTML5 Elements.

Tag Description

<!--...--> Specifies a comment

<!DOCTYPE> Specifies the document type

<a> Specifies an anchor

<abbr> Specifies an abbreviation

<acronym> Deprecated:Specifies an acronym

<address> Specifies an address element

<applet> Deprecated: Specifies an applet

<area> Specifies an area inside an image map

<article> New Tag: Specifies an independent piece of content of a document, such as a blog entry or newspaper article

<aside> New Tag:Specifies a piece of content that is only slightly related to the rest of the page.

<audio> New Tag:Specifies an audio file.

<base> Specifies a base URL for all the links in a page

<basefont> Deprecated: Specifies a base font

<bdo> Specifies the direction of text display

<bgsound> Specifies the background music

<blink> Specifies a text which blinks

<blockquote> Specifies a long quotation

<body> Specifies the body element

<br> Inserts a single line break

<button> Specifies a push button

<canvas> New Tag:This is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.

<caption> Specifies a table caption

<center> Deprecated: Specifies centered text

<col> Specifies attributes for table columns

<colgroup> Specifies groups of table columns

<command> New Tag:Specifies a command the user can invoke.

<comment> Puts a comment in the document

<datalist> New Tag:Together with the a new list attribute for input can be used to make comboboxes

<dd> Specifies a definition description

<del> Specifies deleted text

<details> New Tag:Specifies additional information or controls which the user can obtain on demand.

<dir> Deprecated: Specifies a directory list

<div> Specifies a section in a document

<dl> Specifies a definition list

<dt> Specifies a definition term

<embed> New Tag:Defines external interactive content or plugin.

<fieldset> Specifies a fieldset

<figure> New Tag:Specifies a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.

<b> Specifies bold text

<big> Deprecated:Specifies big text

<i> Specifies italic text

<small> Specifies small text

<tt> Deprecated:Specifies teletype text

<font> Deprecated: Specifies text font, size, and color

<footer> New Tag:Specifies a footer for a section and can contain information about the author, copyright information, et cetera.

<form> Specifies a form

<frame> Deprecated:Specifies a sub window (a frame)

<frameset> Deprecated:Specifies a set of frames

<head> Specifies information about the document

<header> New Tag:Specifies a group of introductory or navigational aids.

<hgroup> New Tag:Specifies the header of a section.

<h1> to <h6> Specifies header 1 to header 6

<hr> Specifies a horizontal rule

<html> Specifies an html document

<isindex> Deprecated: Specifies a single-line input field

<iframe> Specifies an inline sub window (frame)

<ilayer> Specifies an inline layer

<img> Specifies an image

<input> Specifies an input field

<ins> Specifies inserted text

<keygen> New Tag:Specifies control for key pair generation.

<keygen> Generate key information in a form

<label> Specifies a label for a form control

<layer> Specifies a layer

<legend> Specifies a title in a fieldset

<li> Specifies a list item

<link> Specifies a resource reference

<map> Specifies an image map

<mark> New Tag:Specifies a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.

<marquee> Create a scrolling-text marquee

<menu> Deprecated: Specifies a menu list

<meta> Specifies meta information

<meter> New Tag:Specifies a measurement, such as disk usage.

<multicol> Specifies a multicolumn text flow

<nav> New Tag:Specifies a section of the document intended for navigation.

<nobr> No breaks allowed in the enclosed text

<noembed> Specifies content to be presented by browsers that do not support the <embed>tag

<noframes> Deprecated:Specifies a noframe section

<noscript> Specifies a noscript section

<object> Specifies an embedded object

<ol> Specifies an ordered list

<optgroup> Specifies an option group

<option> Specifies an option in a drop-down list

<output> New Tag:Specifies some type of output, such as from a calculation done through scripting.

<p> Specifies a paragraph

<param> Specifies a parameter for an object

<cite> Specifies a citation

<code> Specifies computer code text

<dfn> Specifies a definition term

<em> Specifies emphasized text

<kbd> Specifies keyboard text

<samp> Specifies sample computer code

<strong> Specifies strong text

<var> Specifies a variable

<plaintext> Deprecated: Render the raminder of the document as preformatted plain text

<pre> Specifies preformatted text

<progress> New Tag:Specifies a completion of a task, such as downloading or when performing a series of expensive operations.

<q> Specifies a short quotation

<ruby> New Tag:Together with <rt> and <rp> allow for marking up ruby annotations.

<script> Specifies a script

<section> New Tag:Represents a generic document or application section.

<select> Specifies a selectable list

<spacer> Specifies a white space

<span> Specifies a section in a document

<s> Deprecated: Specifies strikethrough text

<strike> Deprecated: Specifies strikethrough text

<style> Specifies a style definition

<sub> Specifies subscripted text

<sup> Specifies superscripted text

<table> Specifies a table

<tbody> Specifies a table body

<td> Specifies a table cell

<textarea> Specifies a text area

<tfoot> Specifies a table footer

<th> Specifies a table header

<thead> Specifies a table header

<time> New Tag:Specifies a date and/or time.

<title> Specifies the document title

<tr> Specifies a table row

<u> Deprecated: Specifies underlined text

<ul> Specifies an unordered list

<video> New Tag:Specifies a video file.

<wbr> New Tag:Specifies a line break opportunity.

<wbr> Indicate a potential word break point within a <nobr> section

<xmp> Deprecated: Specifies preformatted text

The following tags (elements) have been introduced in HTML5 −

Tags (Elements) Description

<article> Represents an independent piece of content of a document, such as a blog entry or newspaper article

<aside > Represents a piece of content that is only slightly related to the rest of the page.

<audio> Defines an audio file.

<canvas> This is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.

<command> Represents a command the user can invoke.

<datalist> Together with the a new list attribute for input can be used to make comboboxes

<details> Represents additional information or controls which the user can obtain on demand

<embed> Defines external interactive content or plugin.

<figure> Represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.

<footer> Represents a footer for a section and can contain information about the author, copyright information, et cetera.

<header> Represents a group of introductory or navigational aids.

<hgroup> Represents the header of a section.

<keygen> Represents control for key pair generation.

<mark> Represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.

<meter> Represents a measurement, such as disk usage.

<nav> Represents a section of the document intended for navigation.

<output> Represents some type of output, such as from a calculation done through scripting.

<progress> Represents a completion of a task, such as downloading or when performing a series of expensive operations.

<ruby> Together with <rt> and <rp> allow for marking up ruby annotations.

<section> Represents a generic document or application section

<time> Represents a date and/or time.

<video> Defines a video file.

<wbr> Represents a line break opportunity.

New types for <input> tag

The input element's type attribute now has the following new values −

Type Description

color Color selector, which could be represented by a wheel or swatch picker

date Selector for calendar date

datetime-local Date and time display, with no setting or indication for time zones

datetime Full date and time display, including a time zone.

email Input type should be an email.

month Selector for a month within a given year

number A field containing a numeric value only

range Numeric selector within a range of values, typically visualized as a slider

search Term to supply to a search engine. For example, the search bar atop a browser.

tel Input type should be telephone number.

time Time indicator and selector, with no time zone information

url Input type should be URL type.

week Selector for a week within a given year

HTML5 Document

The following tags have been introduced for better structure −

section − This tag represents a generic document or application section. It can be used together with h1-h6 to indicate the document structure.

article − This tag represents an independent piece of content of a document, such as a blog entry or newspaper article.

aside − This tag represents a piece of content that is only slightly related to the rest of the page.

header − This tag represents the header of a section.

footer − This tag represents a footer for a section and can contain information about the author, copyright information, et cetera.

nav − This tag represents a section of the document intended for navigation.

dialog − This tag can be used to mark up a conversation.

figure − This tag can be used to associate a caption together with some embedded content, such as a graphic or video.

The markup for an HTML 5 document would look like the following −

<!DOCTYPE html>

<html>

<head>

<meta charset = "utf-8">

<title>...</title>

</head>

<body>

<header>...</header>

<nav>...</nav>

<article>

<section>

. ...

</section>

</article>

<aside>...</aside>

<footer>...</footer>

</body>

</html>

Livedemo

https://www.tutorialspoint.com/online_html_editor.php

You’ve said everything you wanted, but you know you can’t finish your text without a proper conclusion. So, what you do? Despair, of course. But what you should do is read the tips we’ve listed here that are going to improve your writing skills!

HTML