<\/span>Introduction<\/strong><\/span><\/h2>\n\n\n\n
HTML5 is the latest and most extended version of HTML. Before learning HTML5, you should know HTML & its tags.<\/p>\n\n\n\n
New Features<\/strong><\/p>\n\n\n\n
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.<\/p>\n\n\n\n
\n
<header>, <footer>, <nav>, <section> etc, are new semantic elements<\/li>\n\n\n\n
New attributes introduced in <form> tag like, type=\u201ddate\u201d , type=\u201dtime\u201d etc.<\/li>\n\n\n\n
HTML5 allows for dynamic, scriptable rendering of 2D shapes and bitmap images with the use of <canvas> element & JavaScript.<\/li>\n\n\n\n
You can embed <audio> & <video> element on your web page without any third party plugins<\/li>\n<\/ol>\n\n\n\n
<\/span>Document Structure<\/strong><\/span><\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
\n
<section><\/strong>\u00a0\u2212 It defines a section in a document. It can be used together with <h1> to <h6> to indicate the document structure.<\/li>\n\n\n\n
<article><\/strong>\u00a0\u2212 It represents an independent piece of content of a document, such as a blog or newspaper article.<\/li>\n\n\n\n
<aside><\/strong>\u00a0\u2212 It defines a piece of content that is only slightly related to the rest of the page.<\/li>\n\n\n\n
<header><\/strong>\u00a0\u2212 It represents the header of a section.<\/li>\n\n\n\n
<footer><\/strong>\u00a0\u2212 It represents a footer for a section and can contain information about the author, copyright information, etc.<\/li>\n\n\n\n
<nav><\/strong>\u00a0\u2212 It represents a section of the document intended for navigation.<\/li>\n\n\n\n
<dialog><\/strong>\u00a0\u2212 \u00a0It\u00a0defines a\u00a0dialog\u00a0box or subwindow that uses to create popup dialogs and modals on a web page or as converssation.<\/li>\n\n\n\n
<figure><\/strong>\u00a0\u2212 It is used to associate a caption together with some embedded content, such as a graphic or video.<\/li>\n<\/ol>\n\n\n\n
HTML5 document structure will look like follows<\/p>\n\n\n\n
<!DOCTYPE html> \n<html> \n <head> \n <title>...<\/title> \n <\/head> \n <body> \n <header>...<\/header> \n <nav>...<\/nav> \n <article> \n <section> \n ... \n <\/section> \n <\/article> \n <aside>...<\/aside> \n <footer>...<\/footer> \n <\/body> \n<\/html> <\/code><\/pre>\n\n\n\nExample<\/strong><\/p>\n\n\n\n <!DOCTYPE html> \n<html> \n <head> \n\n <title>My First Web Page using HTML5 document structure<\/title> \n <\/head> \n <body> \n <header> \n <h1>Example : HTML 5 Document Structure<\/h1> \n <p>Hello Students, let's check the structure of HTML5<\/p> \n <\/header> \n <nav> \n <ul> \n <li><a href = \"https:\/\/swatilathia.wordpress.com\/assignments-html\/html-tutorial\/\">HTML Tutorial - Basic Tags<\/a><\/li> \n <li><a href = \"https:\/\/swatilathia.wordpress.com\/javascript-tutorial-3-built-in-functions\/\">JavaScript Tutorial - Built in functions<\/a><\/li> \n <\/ul> \n <\/nav> \n <article> \n <section> \n <p>This content is a part of section element<\/p>\n <\/section> \n <\/article> \n <aside> \n <p>This is aside part of our web page<\/p> \n <\/aside> \n <footer> \n <p>Created by <a href = \"https:\/\/swatilathia.wordpress.com\/\">Swati Lathia<\/a><\/p> \n <\/footer> \n \n <\/body> \n<\/html><\/code><\/pre>\n\n\n\n<\/span>Attributes<\/span><\/h2>\n\n\n\n\nAutocomplete<\/strong> : The autocomplete<\/strong>\u00a0attribute 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><\/li>\n\n\n\n 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.<\/li>\n<\/ul>\n\n\n\nExample<\/strong> : Make autocomplete=on & then off to check the differences<\/p>\n\n\n\n <form method=post autocomplete=on>\n\tEnter your name:\n\t<input type=text name=txtname><br>\n\t<input type=submit>\n<\/form><\/code><\/pre>\n\n\n\n\nAutofocus :<\/strong> The autofocus<\/strong> 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.<\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n <!DOCTYPE html>\n<html>\n<body>\n <h1>This is an example of autofocus attribute<\/h1>\n <button type=\"button\" onclick=\"alert('Hello Students!!')\" autofocus>Click Me!<\/button>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\nContenteditable : <\/strong>contenteditable is a new attribute for text elements. Default value of contenteditable is false. To edit a paragraph or text, add contenteditable=\u201dtrue\u201d.<\/li>\n<\/ul>\n\n\n\nExample<\/strong> : <h1 contenteditable=\u201dtrue\u201d>This element is editable. Click here to see the difference<\/h1><\/p>\n\n\n\n \nDisabled:<\/strong> The disabled attribute is a boolean attribute. When it is present, it specifies that the element should be disabled. <\/li>\n\n\n\n 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<\/li>\n<\/ul>\n\n\n\nExample <\/strong><\/p>\n\n\n\n <form>\n First name:\n <input type=\"text\" name=\"fname\"><br>\n <input type=\"submit\" value=\"Submit\" disabled>\n<\/form><\/code><\/pre>\n\n\n\n\nDownload: <\/strong>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. <\/li>\n\n\n\n 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.<\/li>\n<\/ul>\n\n\n\nExample<\/strong> : <a href=\u201dAppointmentReciept.pdf\u201d download=\u201dDemo PDF\u201d>Download PDF<\/a><\/p>\n\n\n\n \ndraggable : <\/strong>It\u00a0is used if an element is draggable using HTML5 drag and Drop Events.\u00a0draggable\u00a0shows a placeholder of draggable element.<\/li>\n\n\n\n By default, only selected text, images and hyperlinks are draggable, but using\u00a0draggable=\u201dtrue\u201d<\/strong>, any html5 element can be draggable.<\/li>\n<\/ul>\n\n\n\nExample :<\/strong> <p draggable=true>This Paragraph is draggable<\/p><\/p>\n\n\n\n This Paragraph is draggable<\/p>\n\n\n\n <\/span><Form> elements<\/strong><\/span><\/h2>\n\n\n\n<\/span>Number Control<\/strong><\/span><\/h3>\n\n\n\n\n<input> elements of type number are used to let the user enter a number.<\/li>\n\n\n\n They include built-in validation to reject non-numerical entries.<\/li>\n<\/ul>\n\n\n\n\n<input type=\u201dnumber\u201d><\/li>\n<\/ul>\n\n\n\n\nValue:<\/strong>\u00a0A Number representing the value of the number entered into the input<\/li>\n\n\n\n You can set a default value for the input by including a number inside the value attribute<\/li>\n\n\n\n <input type=number value=\u201d10\u201d><\/li>\n\n\n\n Max:\u00a0<\/strong>The maximum value to accept for this input<\/li>\n\n\n\n Min:\u00a0<\/strong>The minimum value to accept for this input<\/li>\n\n\n\n Placeholder:\u00a0<\/strong>It is a string that provides a brief hint to the user as to what kind of information is expected in the field.<\/li>\n\n\n\n Step:\u00a0<\/strong>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.<\/li>\n\n\n\n <input type=\u201dnumber\u201d step=\u201d10\u201d placeholder=\u201dMultiple of 10\u201d><\/li>\n\n\n\n You can also allow decimals here<\/li>\n\n\n\n <input type=number step=\u201d0.01\u2033><\/li>\n<\/ul>\n\n\n\n<\/span>Date Control<\/strong><\/span><\/h3>\n\n\n\n\nIt is used to define\u00a0a date picker or control field. The value will be the year, month and day.\u00a0<\/li>\n<\/ul>\n\n\n\nSyntax<\/strong><\/p>\n\n\n\n <input type=\"date\"><\/code><\/pre>\n\n\n\n\nValue:\u00a0<\/strong>It is a date that can be entered by user. Date representation in YYYY-MM-DD format.<\/li>\n\n\n\n Name:<\/strong> It is used to represent the name of the associated element submitted to the server.<\/li>\n<\/ul>\n\n\n\n<input type=\"date\" name=\"d1\" value=\"2000-06-12\"><\/code><\/pre>\n\n\n\n\nMin:<\/strong> The earliest date to accept<\/li>\n\n\n\n Max: <\/strong>The latest date to accept<\/li>\n<\/ul>\n\n\n\n<html>\n<body>\n\t<form>\n\t\tChoose date of assignment:\n\t\t<input type=\"date\" \n\t\t name=\"d1\" \n\t\tmin=\"2017-04-01\" \n\t\tmax=\"2017-04-15\">\n\t<\/form>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\n\t\tChoose date of assignment:\n\t\t\n\t<\/form> \n\n\n\n<\/span>Time Control<\/strong><\/span><\/h3>\n\n\n\n\nIt is used to enter a time (hours and minutes, and optionally seconds) by the user.<\/li>\n<\/ul>\n\n\n\nSyntax<\/strong><\/p>\n\n\n\n <input type=\"time\"><\/code><\/pre>\n\n\n\n\nValue:<\/strong> A\u00a0String<\/code>\u00a0containing the value of the time entered into the input element.<\/li>\n<\/ul>\n\n\n\n<html>\n<body>\n\t<form>\n\t\t<input type=\"time\" name=\"t1\" value=\"14:30\">\n\t<\/form>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\n\t\t\n\t<\/form> \n\n\n\n<\/span>Datetime-local Control<\/strong><\/span><\/h3>\n\n\n\n\nIt is used for entering a date and time (hour, minute, second, and fraction of a second). <\/li>\n\n\n\n Value:<\/strong> It represents the value of the date entered into the input.<\/li>\n<\/ul>\n\n\n\nSyntax<\/strong>: <\/p>\n\n\n\n <input type=\"datetime-local\" value=\"2000-06-12T05:30\"><\/code><\/pre>\n\n\n\n\n\n<\/form>\n \n\n\n\n<\/span>Month Control<\/strong><\/span><\/h3>\n\n\n\n\nIt is used to enter a month and year by the user. The value is a string whose value is in the format \u201cYYYY-MM<\/code>\u201c, where\u00a0YYYY<\/code>\u00a0is the four-digit year and\u00a0MM<\/code>\u00a0is the month number.<\/li>\n\n\n\n Value:<\/strong><\/li>\n\n\n\n It\u00a0represents the value of the month and year entered into the input, in the form YYYY-MM.<\/li>\n\n\n\n Min:<\/strong> The lowest month value to accept<\/li>\n\n\n\n Max:<\/strong> The highest month value to accept<\/li>\n<\/ul>\n\n\n\n<html>\n<body>\n\t<form>\n\tSelect a Month:\n\t<input type=\"month\" name=\"start\" min=\"2018-02\" max=\"2018-10\">\n\t<\/form>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\n\tSelect a Month:\n\t\n\t<\/form> \n\n\n\n<\/span>Week Control<\/strong><\/span><\/h3>\n\n\n\n\nIt creates input fields allowing easy entry of a year plus the\u00a0week number\u00a0during that year<\/li>\n\n\n\n Value:<\/strong> It\u00a0represents the value of the week\/year entered into the input.\u00a0<\/li>\n<\/ul>\n\n\n\n<html>\n<body>\n\t<form>\n\t\tSelect Week:\n\t\t<input name=\"w1\" type=\"week\" value=\"2021-W01\">\n\t<\/form>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\nMax:<\/strong> The latest (time-wise) year and week number to accept<\/li>\n\n\n\n Min:<\/strong> The earliest year and week to accept.<\/li>\n<\/ul>\n\n\n\n<html>\n<body>\n\t<form>\n\t\tSelect Week to start:\n\t\t<input type=\"week\" name=\"week\" min=\"2017-W01\" max=\"2017-W52\">\n\t<\/form>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\n\t\tSelect Week to start:\n\t\t\n\t<\/form> \n\n\n\n<\/span>Email Control<\/strong><\/span><\/h3>\n\n\n\n\nIt is used to let the user enter and edit an e-mail address. The input value is automatically validated to ensure that it\u2019s either empty or a properly-formatted e-mail address.<\/li>\n\n\n\n Value<\/strong>: It contains a string\u00a0which is automatically validated as conforming to e-mail syntax. Valid email format is username@domain or username@domain.com.<\/li>\n\n\n\n Maxlength:<\/strong> The maximum number of characters the user can enter into the email input.<\/li>\n\n\n\n Minlength:<\/strong> The minimum number of characters the user can enter into the email input.<\/li>\n\n\n\n Size:<\/strong> 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.<\/li>\n\n\n\n It does not indicates how many characters to enter, rather it indicates approximately how many characters can be seen at a time.<\/li>\n\n\n\n Pattern<\/strong>: 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.<\/li>\n\n\n\n Placeholder:<\/strong> It is a string that provides an idea to the user as to what kind of information is expected in the field.<\/li>\n\n\n\n Readonly:<\/strong> It is a boolean attribute. If it is present, then this field cannot be edited by the user.<\/li>\n<\/ul>\n\n\n\n<html>\n<body>\n\t<form>\n\t\tEnter your Email:\n\t\t<input type=\"email\" maxlength=30\n\t\tplaceholder=\"swatilathia@gmail.com\">\n\t<\/form>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\n\t\tEnter your Email:\n\t\t\n\t<\/form> \n\n\n\n<\/span>Range Control<\/strong><\/span><\/h3>\n\n\n\n\nIt 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. <\/li>\n\n\n\n Value:<\/strong> It\u00a0contains a string representation of the selected number.<\/li>\n\n\n\n Min:<\/strong> The lowest value in the range of permitted values.<\/li>\n\n\n\n Max:<\/strong> The greatest value in the range of permitted values.<\/li>\n<\/ul>\n\n\n\n<html>\n<body>\n\t<form>\n\t\tSet your volume:\n\t\t<input type=\"range\" min=\"-10\" max=\"10\">\n\t<\/form>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\n\t\tSet your volume:\n\t\t\n\t<\/form> \n\n\n\n<\/span>URL Control<\/strong><\/span><\/h3>\n\n\n\n\nIt is used to let the user enter and edit a URL.<\/li>\n\n\n\n Value:<\/strong> It contains a\u00a0string\u00a0which is automatically validated as conforming to URL syntax.\u00a0<\/li>\n\n\n\n Maxlength:<\/strong> The maximum number of characters the user can enter into the\u00a0URL<\/code> input.<\/li>\n\n\n\n Minlength:<\/strong> The maximum number of characters the user can enter into the\u00a0URL<\/code>\u00a0input.<\/li>\n\n\n\n Placeholder:<\/strong> It is a string that provides an idea to the user as to what kind of information is expected in the field.<\/li>\n\n\n\n Readonly:<\/strong> It is a boolean attribute. If it is present, then this field cannot be edited by the user.<\/li>\n\n\n\n Size:<\/strong> 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.<\/li>\n\n\n\n Required & pattern attributes do the same as earlier<\/em><\/strong><\/li>\n<\/ul>\n\n\n\n<html>\n<body>\n\t<form>\n\t\t<input type=\"url\" placeholder=\"https:\/\/example.com\"\n size=\"30\" required>\n <input type=\"submit\">\n\t<\/form>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\n\t\t\n \n\t<\/form> \n\n\n\n<\/span><audio> \u2013 The Embed Audio element<\/strong><\/span><\/h2>\n\n\n\n\nIt 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.<\/li>\n\n\n\n autoplay<\/strong>: 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.<\/li>\n\n\n\n controls<\/strong>: If it is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause\/resume playback.<\/li>\n\n\n\n loop<\/strong>: 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.<\/li>\n\n\n\n muted:<\/strong> It is boolean attribute that indicates whether the audio will be initially silenced. Its default value is false.<\/li>\n\n\n\n src:<\/strong> 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.<\/li>\n<\/ul>\n\n\n\n<audio controls autoplay loop muted>\n <source src=\"myaudio.mp3\" type=\"audio\/mpeg\">\n<\/audio><\/code><\/pre>\n\n\n\n