HTML 5 – Swati Lathia

Table of Contents

Introduction

HTML5 is the latest and most extended version of HTML. Before learning HTML5, you should know HTML & its tags.

New Features

HTML5 introduces a number of new elements and attributes that can help you to develop modern & advanced websites. Here is a set of some of the most important features introduced in HTML5.

<header>, <footer>, <nav>, <section> etc, are new semantic elements
New attributes introduced in <form> tag like, type=”date” , type=”time” etc.
HTML5 allows for dynamic, scriptable rendering of 2D shapes and bitmap images with the use of <canvas> element & JavaScript.
You can embed <audio> & <video> element on your web page without any third party plugins

Document Structure

HTML5 Document always starts with <!DOCTYPE html> which tells the browser that the document is of HTML5. Some main elements of HTML5 are as follows.

<section> − It defines a section in a document. It can be used together with <h1> to <h6> to indicate the document structure.
<article> − It represents an independent piece of content of a document, such as a blog or newspaper article.
<aside> − It defines a piece of content that is only slightly related to the rest of the page.
<header> − It represents the header of a section.
<footer> − It represents a footer for a section and can contain information about the author, copyright information, etc.
<nav> − It represents a section of the document intended for navigation.
<dialog> − It defines a dialog box or subwindow that uses to create popup dialogs and modals on a web page or as converssation.
<figure> − It is used to associate a caption together with some embedded content, such as a graphic or video.

HTML5 document structure will look like follows

<!DOCTYPE html> 
<html>  
   <head> 
      <title>...</title> 
   </head> 
   <body> 
      <header>...</header> 
      <nav>...</nav> 
      <article> 
         <section> 
            ... 
         </section> 
      </article> 
      <aside>...</aside> 
      <footer>...</footer> 
   </body> 
</html>

Example

<!DOCTYPE html>  
<html>  
   <head> 

      <title>My First Web Page using HTML5 document structure</title> 
   </head> 
   <body> 
      <header> 
         <h1>Example : HTML 5 Document Structure</h1> 
         <p>Hello Students, let's check the structure of HTML5</p> 
      </header> 
      <nav> 
         <ul> 
            <li><a href = "https://swatilathia.wordpress.com/assignments-html/html-tutorial/">HTML Tutorial - Basic Tags</a></li> 
             <li><a href = "https://swatilathia.wordpress.com/javascript-tutorial-3-built-in-functions/">JavaScript Tutorial - Built in functions</a></li> 
         </ul> 
      </nav> 
      <article> 
         <section> 
            <p>This content is a part of section element</p>
         </section> 
      </article> 
      <aside> 
         <p>This is  aside part of our web page</p> 
      </aside> 
      <footer> 
         <p>Created by <a href = "https://swatilathia.wordpress.com/">Swati Lathia</a></p> 
      </footer> 
   
   </body> 
</html>

Attributes

Autocomplete : The autocomplete attribute specifies whether a form or an input field should have autocomplete on or off. Autocomplete allows the browser to predict the value. This attributes sets inside <form>
When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values. The autocomplete attribute works with <input> types: text, search, url, email, password, datepickers, range, and color.

Example : Make autocomplete=on & then off to check the differences

<form method=post autocomplete=on>
	Enter your name:
	<input type=text name=txtname><br>
	<input type=submit>
</form>

Autofocus : The autofocus attribute is a boolean attribute. When it is present, it specifies that the element should automatically get focus when the page loads. The autofocus attribute can be used on : button, input, select, textarea.

Example

<!DOCTYPE html>
<html>
<body>
       <h1>This is an example of autofocus attribute</h1>
       <button type="button" onclick="alert('Hello Students!!')" autofocus>Click Me!</button>
</body>
</html>

Contenteditable : contenteditable is a new attribute for text elements. Default value of contenteditable is false. To edit a paragraph or text, add contenteditable=”true”.

Example : <h1 contenteditable=”true”>This element is editable. Click here to see the difference</h1>

Disabled: The disabled attribute is a boolean attribute. When it is present, it specifies that the element should be disabled.
The disabled attribute can be set to keep a user from using the element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the element usable again. The disabled attribute can be used on : button, input, option, select, textarea

Example

<form>
    First name:
    <input type="text" name="fname"><br>
    <input type="submit" value="Submit" disabled>
</form>

Download: Download attribute is used hyperlinks to download the file. Without download attribute, the file will open in browser tab. The download attribute specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink.
The optional value of the download attribute will be the new name of the file after it is downloaded. There are no restrictions on allowed values, and the browser will automatically detect the correct file extension and add it to the file (.img, .pdf, .txt, .html, etc.). If the value is omitted, the original filename is used.

Example : <a href=”AppointmentReciept.pdf” download=”Demo PDF”>Download PDF</a>

draggable : It is used if an element is draggable using HTML5 drag and Drop Events. draggable shows a placeholder of draggable element.
By default, only selected text, images and hyperlinks are draggable, but using draggable=”true”, any html5 element can be draggable.

Example : <p draggable=true>This Paragraph is draggable</p>

This Paragraph is draggable

<Form> elements

Number Control

<input> elements of type number are used to let the user enter a number.
They include built-in validation to reject non-numerical entries.

<input type=”number”>

Value: A Number representing the value of the number entered into the input
You can set a default value for the input by including a number inside the value attribute
<input type=number value=”10”>
Max: The maximum value to accept for this input
Min: The minimum value to accept for this input
Placeholder: It is a string that provides a brief hint to the user as to what kind of information is expected in the field.
Step: By default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1. You can change this by providing a step attribute, which takes as its value a number specifying the step amount.
<input type=”number” step=”10” placeholder=”Multiple of 10”>
You can also allow decimals here
<input type=number step=”0.01″>

Date Control

It is used to define a date picker or control field. The value will be the year, month and day.

Syntax

<input type="date">

Value: It is a date that can be entered by user. Date representation in YYYY-MM-DD format.
Name: It is used to represent the name of the associated element submitted to the server.

<input type="date" name="d1" value="2000-06-12">

Min: The earliest date to accept
Max: The latest date to accept

<html>
<body>
	<form>
		Choose date of assignment:
		<input type="date" 
		 name="d1" 
		min="2017-04-01" 
		max="2017-04-15">
	</form>
</body>
</html>

Time Control

It is used to enter a time (hours and minutes, and optionally seconds) by the user.

Syntax

<input type="time">

Value: A String containing the value of the time entered into the input element.

<html>
<body>
	<form>
		<input type="time" name="t1" value="14:30">
	</form>
</body>
</html>

Datetime-local Control

It is used for entering a date and time (hour, minute, second, and fraction of a second).
Value: It represents the value of the date entered into the input.

Syntax:

<input type="datetime-local" value="2000-06-12T05:30">

Month Control

It is used to enter a month and year by the user. The value is a string whose value is in the format “YYYY-MM“, where YYYY is the four-digit year and MM is the month number.
Value:
It represents the value of the month and year entered into the input, in the form YYYY-MM.
Min: The lowest month value to accept
Max: The highest month value to accept

<html>
<body>
	<form>
	Select a Month:
	<input type="month" name="start" min="2018-02" max="2018-10">
	</form>
</body>
</html>

Week Control

It creates input fields allowing easy entry of a year plus the week number during that year
Value: It represents the value of the week/year entered into the input.

<html>
<body>
	<form>
		Select Week:
		<input name="w1" type="week" value="2021-W01">
	</form>
</body>
</html>

Max: The latest (time-wise) year and week number to accept
Min: The earliest year and week to accept.

<html>
<body>
	<form>
		Select Week to start:
		<input type="week" name="week" min="2017-W01" max="2017-W52">
	</form>
</body>
</html>

Email Control

It is used to let the user enter and edit an e-mail address. The input value is automatically validated to ensure that it’s either empty or a properly-formatted e-mail address.
Value: It contains a string which is automatically validated as conforming to e-mail syntax. Valid email format is username@domain or username@domain.com.
Maxlength: The maximum number of characters the user can enter into the email input.
Minlength: The minimum number of characters the user can enter into the email input.
Size: It indicates how many characters wide the input field should be. It must be greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact. So it may be narrower or wider than specified number of characters.
It does not indicates how many characters to enter, rather it indicates approximately how many characters can be seen at a time.
Pattern: It is used to set the pattern for email validation to restrict the user to enter valid email pattern. It is a valid JavaScript regular expression.
Placeholder: It is a string that provides an idea to the user as to what kind of information is expected in the field.
Readonly: It is a boolean attribute. If it is present, then this field cannot be edited by the user.

<html>
<body>
	<form>
		Enter your Email:
		<input type="email" maxlength=30
		placeholder="swatilathia@gmail.com">
	</form>
</body>
</html>

Range Control

It represents a dial control or slider control which specify a numeric value. It must be no less than a given value, and no more than another given value.
Value: It contains a string representation of the selected number.
Min: The lowest value in the range of permitted values.
Max: The greatest value in the range of permitted values.

<html>
<body>
	<form>
		Set your volume:
		<input type="range" min="-10" max="10">
	</form>
</body>
</html>

URL Control

It is used to let the user enter and edit a URL.
Value: It contains a string which is automatically validated as conforming to URL syntax.
Maxlength: The maximum number of characters the user can enter into the URL input.
Minlength: The maximum number of characters the user can enter into the URL input.
Placeholder: It is a string that provides an idea to the user as to what kind of information is expected in the field.
Readonly: It is a boolean attribute. If it is present, then this field cannot be edited by the user.
Size: It indicates how many characters wide the input field should be. It must be greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact. So it may be narrower or wider than specified number of characters.
Required & pattern attributes do the same as earlier

<html>
<body>
	<form>
		<input type="url" placeholder="https://example.com"
                size="30" required>
                <input type="submit">
	</form>
</body>
</html>

<audio> – The Embed Audio element

It is used to embed sound content in web page. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one.
autoplay: It is a Boolean attribute. If it is specified, the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading.
controls: If it is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback.
loop: It is a boolean attribute. If it is specified, the audio player will automatically seek back to the start upon reaching the end of the audio.
muted: It is boolean attribute that indicates whether the audio will be initially silenced. Its default value is false.
src: The URL of the audio to embed. This is subject to HTTP access controls. This is optional; you may instead use the <source> element within the audio block to specify the audio to embed.

<audio controls autoplay loop muted>
  <source src="myaudio.mp3" type="audio/mpeg">
</audio>

Check the above example in every browser – chrome, firefox & internet explorer , so that you will get the output in any one/two/three of them

<source> – The Media or Image Source element

It specifies multiple media resources for the <picture>, <audio> & <video> elements. It is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a wide range of browsers given their differing support for image file formats and media file formats.
src : It is required for <audio> and <video>, address of the media resource.
type: The MIME media type of the resource like video/mp4, video/webm, audio/mpeg, audio/mp4 etc.

<video> – The Video Embed element

The <video> HTML element embeds a media player which supports video playback into the web page. You can use <video> for audio content as well, but the <audio> element may provide a more appropriate user experience.
Autoplay: It is a Boolean attribute. If it is specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.
Controls : If this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.
Height : The height of the video’s display area, in CSS pixels
Loop: It is a Boolean attribute. If it is specified, the browser will automatically seek back to the start upon reaching the end of the video.
Muted : It is a Boolean attribute that indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is false, meaning that the audio will be played when the video is played.
Src : The URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed.

<video controls autoplay loop>
  <source src="myvideo.mp4" type="video/mp4">
</video>

Output:

Check the above example in every browser – chrome, firefox & internet explorer , so that you will get the output in any one/two/three of them.