HTML5 introduces several new semantic elements to help structure web pages in a more meaningful way. This includes header, footer, nav, section, and article elements. It also removes unnecessary attributes like type from script and link tags. The new HTML5 doctype is simpler to declare as <!DOCTYPE html>. Overall, HTML5 aims to simplify HTML and help make code more readable and structured through semantic tags.
HTML5 introduces several new semantic elements to help structure web pages in a more meaningful way. This includes header, footer, nav, section, and article elements. It also removes unnecessary attributes like type from script and link tags. The new HTML5 doctype is simpler to declare as <!DOCTYPE html>. Overall, HTML5 aims to simplify HTML and help make code more readable and structured through semantic tags.
HTML5 introduces several new semantic elements to help structure web pages in a more meaningful way. This includes header, footer, nav, section, and article elements. It also removes unnecessary attributes like type from script and link tags. The new HTML5 doctype is simpler to declare as <!DOCTYPE html>. Overall, HTML5 aims to simplify HTML and help make code more readable and structured through semantic tags.
HTML5 introduces several new semantic elements to help structure web pages in a more meaningful way. This includes header, footer, nav, section, and article elements. It also removes unnecessary attributes like type from script and link tags. The new HTML5 doctype is simpler to declare as <!DOCTYPE html>. Overall, HTML5 aims to simplify HTML and help make code more readable and structured through semantic tags.
Download as DOCX, PDF, TXT or read online from Scribd
Download as docx, pdf, or txt
You are on page 1/ 40
Old HTML:
New HTML5:
Getting rid of unnecessary stuff..
HTML5 Structural Elements HTML5 defines a consistent set of elements for the common structural blocks that appear on web sites.
Some of them include the header, footer, section, article, aside, nav and so on. let's learn about the most commonly used structural/semantic tags - header, section, nav and footer that help in organizing the content on web pages and make the code more readable.
Structural Tags Tag Description
<a> Defines a hyperlink.
<article> Defines an article.
<aside> Defines some content loosely related to the page content.
<body> Defines the document's body.
<br> Produces a single line break.
<details> Represents a widget from which the user can obtain additional information or controls on- demand.
<div> Specifies a division or a section in a document.
<h1> to <h6> Defines HTML headings.
<head> Defines the head portion of the document that contains information about the document.
<header> Represents the header of a document or a section.
<hgroup> Defines a group of headings.
<hr> Produce a horizontal line.
<html> Defines the root of an HTML document.
<footer> Represents the footer of a document or a section.
<nav> Defines a section of navigation links.
<p> Defines a paragraph.
<section> Defines a section of a document, such as header, footer etc.
<span> Defines an inline styleless section in a document.
<summary> Defines a summary for the <details> element.
Metadata Tags Tag Description
<base> Defines the base URL for all linked objects on a page.
<basefont> Obsolete Specifies the base font for a page.
<link> Defines the relationship between the current document and an external resource.
<meta> Provides structured metadata about the document content.
<style> Inserts style information (commonly CSS) into the head of a document.
<title> Defines a title for the document.
Form Tags Tag Description
<button> Creates a clickable button.
<datalist> Represents a set of pre-defined options for an <input> element.
<fieldset> Specifies a set of related form fields.
<form> Defines an HTML form for user input.
<input> Defines an input control.
<keygen> Represents a control for generating a public-private key pair.
<label> Defines a label for an <input> control.
<legend> Defines a caption for a <fieldset> element.
<meter> Represents a scalar measurement within a known range.
<optgroup> Defines a group of related options in a selection list.
<option> Defines an option in a selection list.
<select> Defines a selection list within a form.
<textarea> Defines a multi-line text input control (text area).
Formatting Tags Tag Description
<abbr> Defines an abbreviated form of a longer word or phrase.
<acronym> Defines an acronym.
<address> Specifies the author's contact information.
<b> Displays text in a bold style.
<bdi> Represents text that is isolated from its surrounding for the purposes of bidirectional text formatting.
<bdo> Overrides the current text direction.
<big> displays text in a large size.
<blockquote> Defines a long quotation.
<center> Obsolete ,p. contents in the center of the enclosing block.
<cite> Indicates a citation or reference to another source.
<code> Specifies text as computer code.
<del> Specifies a block of deleted text.
<dfn> Specifies a definition.
<em> Specifies emphasized text.
<font> Obsolete Defines font, color, and size for text.
<i> Displays text in an italic style.
<ins> Defines a block of text that has been inserted into a document.
<kbd> Specifies text as keyboard input.
<mark> Represents text highlighted for reference purposes.
<output> Represents the result of a calculation.
<pre> Defines a block of preformatted text.
<progress> Represents the completion progress of a task.
<q> Defines a short inline quotation.
<rp> Provides fall-back parenthesis for browsers that that don't support ruby annotations.
<rt> Defines the pronunciation of character presented in a ruby annotations.
<ruby> Represents a ruby annotation.
<s> Obsolete Displays text in strikethrough style.
<samp> Specifies text as sample output from a computer program.
<small> Displays text in a smaller size.
<strike> Obsolete Displays text in strikethrough style.
<strong> Indicate strongly emphasized text.
<sub> Defines subscripted text.
<sup> Defines superscripted text.
<tt> Displays text in a teletype style.
<u> Obsolete Displays text with an underline.
<var> Defines a variable.
<wbr> Represents a line break opportunity.
List Tags Tag Description
<dd> Specifies a definition for a term in a definition list.
<dir> Obsolete Defines a directory list.
<dl> Defines a definition list.
<dt> Defines a term (an item) in a definition list.
<li> Defines a list item.
<ol> Defines an ordered list.
<menu> Represents a list of commands.
<ul> Defines an unordered list.
Table Tags Tag Description
<caption> Defines the title of a table.
<col> Defines attribute values for one or more columns in a table.
<colgroup> Specifies attributes for multiple columns in a table.
<table> Defines a data table.
<tbody> Groups a set of rows defining the main body of the table data.
<td> Defines a cell in a table.
<tfoot> Groups a set of rows summarizing the columns of the table.
<thead> Groups a set of rows that describes the column labels of a table.
<th> Defines a header cell in a table.
<tr> Defines a row of cells in a table.
Scripting Tags Tag Description
<noscript> Defines alternative content to display when the browser doesn't support scripting.
<script> Places script in the document for client-side processing.
Embedded Content Tags
Tag Description <applet> Obsolete Embeds a Java applet (mini Java applications) on the page. Use the <object> element instead.
<area> Defines a specific area within an image map.
<audio> Embeds a sound, or an audio stream in an HTML document.
<canvas> Defines a region in the document, which can be used to draw graphics on the fly via scripting (usually JavaScript).
<embed> Embeds external application, typically multimedia content like audio or video into an HTML document.
<figcaption> Defines a caption or legend for a figure.
<figure> Represents a figure illustrated as part of the document.
<frame> Defines a single frame within a frameset.
<frameset> Defines a collection of frames or other frameset.
<iframe> Displays a URL in an inline frame.
<img> Displays an inline image.
<map> Defines a client-side image-map.
<noframes> Defines an alternate content that displays in browsers that do not support frames.
<object> Defines an embedded object.
<param> Defines a parameter for an object or applet element.
<source> Defines alternative media resources for the media elements like <audio> or <video>.
<time> Represents a time and/or date.
<video> Embeds video content in an HTML document.
10 useful and important HTML5 tags and attributes:
1. A new DOCTYPE declaration
Having problem remembering long and complicated HTML4 / XHTML 1.0 doctype like below?
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
In HTML5, you don’t have to specify the MIME type value for your <script> and <link> tag. All scripts and styles are assumed to be type="text/javascript" and type="text/css" . You can simply write your code as:
1 <link rel="stylesheet" href="style.css" />
2 <script src="script.js"></script>
#Tips: HTML5 has added new attribute for <script> tag, which is async. With this attribute, the script will be executed asynchronously as soon as it is available.
3. Semantic Structure – header , footer & nav Previously, we added an id or classes to HTML structure and perhaps, it can be serve as pseudo-semantic structure. But by nature, div have no semantic structure even after added an id .
1 <div id="header"> 2 ...
3 </div>
4 <div id="nav">
5 <ul>...</ul>
</div> 6 <div id="footer"> 7 8 ...
9 </div>
Hereby, HTML5 were created to help us better explain the semantic
structure. New HTML5 tags like <header> , <nav> and <footer> can be used to replace the mark-up above, with provide semantic structure to content.
1 <header> 2 ... 3 </header>
4 <nav>
5 <ul>...</ul>
6 </nav>
<footer> 7 ... 8 </footer> 9
4. Semantic Structure – article vs section HTML5 also offers new <article> and <section> tags to help us create semantic content.
1 <section> 2 ...
3 </section>
<section>tag defines sections in a HTML such as headers, footers, or
any other sections of content.
1 <article>
2 ...
3 </article>
The <article> tag is used to specify independent and self-contained
content.
=== Find out more about HTML5 <article> and <section> tags from links below! === http://oli.jp/2009/html5-structure1/ ( div vs section vs article ) http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article
5. New HTML5 Form Input Types
and Attributes HTML5 has introduced 13 new input types and several new attributes for <form> and <input> tags. However, not all browsers are fully support HTML5 new input types and attribute. By the way, you might have to try out these amazing HTML5 form, some new features has been added for instance the browser-based validation, build-in placeholder and new input types.
like email, url and number, and new HTML5 input attributes like required, pattern(regexp), min, max and placeholder.
By the way, you can always check the full list of new HTML5 input types and attributes here.
#Tips: At this time, we cannot depend on browser validation. A
server/client side solution must still beimplemented. – by tutsplus.com
6. HTML5 Canvas The most exciting feature, HTML5 <canvas> tag allows us to render 2D shapes or graphics on web page with help of JavaScript. Moreover, we’re able to create an animation using HTML5 Canvas. The HTML below shows a simple HTML5 Canvas declaration and use JavaScript to draw a blue rectangle on it.
Support Previously, to embed an audio or video file on web page we have to rely on third party plugin like Flash through <object> and <embed> tags. To view the media, user requires administrator privileges to install this plugin as well as the browser has to be able to support this plugin.
the <audio> and <video> tags. With HTML5, at least we don’t have to worry about plugins problem. But for the time being, not all browsers but most recent version of browsers offer support for HTML5 <audio> and <video> tags.
HTML5 <video> and <audio> tags in order to provide different formats for different browsers.
#Tips: It is a good practice to insert text content between <video> tags
for browsers that do not support the <video> tag.
8. Editable HTML5 Content
HTML5 has offers another cool new attribute – contenteditable . You can make your content editable with adding the contenteditable attribute to it. This feature will be more useful if paired with HTML5 Local Storage (will be explain in below).
1 <div contenteditable="true">
2 Any content here will be editable...
3 </div>
#Tips: You can add contenteditable attribute to your CSS styles to
make it editable. – by css-tricks.com
9. HTML5 Local Storage
Now, no more web browser’s cookies storage needed (perhaps, depend on your usage)! This is because HTML5 has introduces a new way to store the data in user’s browser, known as client-side storage. HTML5 offers two new methods for storing data on user’s browser, which are localStorage and sessionStorage .
1 <script>
2 localStorage.variableName = "value";
3 alert(localStorage.variableName);
4 localStorage.removeItem("variableName");
5 alert(localStorage.variableName);
</script> 6
The localStorage stores the data with no time limit, which means the data can be accessible at anytime and any windows/tabs (with some conditions like same domain and same browser) even if the browser is restarted.
1 <script>
2 sessionStorage.variableName = "value";
3 alert(sessionStorage.variableName);
4 sessionStorage.removeItem("variableName");
5 alert(sessionStorage.variableName);
</script> 6
10. HTML5 Custom Data- Attribute
Have you ever use custom attributes inside a tag to store arbitrary data for the purpose of JavaScript? Or store these arbitrary data using class or rel attribute rather than creating custom attributes for the purpose of valid HTML markup.
Extra: HTML5 Fix for Internet Explorer Internet Explorer up to version 8.0 can’t read HTML5 tags properly, you can’t style them. Thankfully, Remy Sharp and John Resig have found a fix for this.
Simply include this script in the <header> tag and you will be able to style the HTML5 elements in IE.
Input Control Types
HTML5 has added a number of new Input Types like email, color, date, etc. And New Form Elements like datalist, keygen, and output which simplify addition of some functionalities which in the past required a lot of JavaScript code. Audio Embedding an HTML5 Audio Player is easy and simple to make. However, it's important to know that not all browsers support the same format. Control Audio Elements The audio element can be programmatically controlled from JavaScript code. Here is a sample code to add a Play button to control the audio file:
<audio id=""demo"" src=""audio.mp3""></audio>
<div> <button onclick=""document.getElementById('demo').play()""> Play the Audio </button> </div> Video HTML 5 allows you to do is embed video players. A lot of people are leaning away from Flash and are using HTML 5.
Custom Video Player
Custom media controls can be created and styled to match the theme by using JavaScript, CSS and the HTMLMediaElement interface.
HTMLMediaElement interface defines a number of properties, methods, and events to
gather information about the media elements and control their behavior. HTML5 Graphics SVG and Canvas are two impressive graphics features introduced by HTML5 to address a range of graphic scenarios on the modern web.
What is HTML5 Canvas?
Canvas is an HTML5 element that offers a blank canvas to draw graphics. JavaScript code may access this area through a full set of drawing functions allowing for dynamically generated graphics.
You can create very promising animations or even interactive games using Canvas.
Introduction to HTML5 Canvas
HTML5 element 'Canvas' gives an easy and powerful way to draw graphics, make photo compositions and do simple animations using JavaScript. This video gives a brief introduction to the element 'Canvas'. Also, Canvas is now being used for building some of the interactive games as well. Visit www.html5games.com to see some of the cool games created using HTML5. Animation: Scalable Vector Graphics (SVG) HTML5 API;
Modernizr
Modernizr is a cool library that tests and detects browser support for a particular feature WebStorage API Cache API HTML5 presents application cache. In other words, a web application is cached with the help of a manifest file, to make the application accessible without an internet connection. Web Worker Web Workers offer uncomplicated ways for web content to run scripts in background threads without affecting the performance of the page. Geolocation API A lot of applications and websites include location-aware features like finding local businesses or showing users location on a map. Geolocation API helps in enabling such features. File API HTML5 ultimately offers a standard way to communicate with local files, through the File API specification. Here, File API is utilized to generate a thumbnail preview of images while the images are being uploaded, verify uploads mime type matches its file extension or restrict the size of an upload.
