The Ultimate Cheat Sheet on HTML5

Developing modern, usable and more responsive websites can quite a jungle because of numerous and confusing web development technologies. Of course the original HTML—which was based on SGML—has become obsolete. Therefore, you can’t rely on it to develop a modern website.

That HTML5 is the next generation language for web development is no longer in doubt. Besides eliminating the need for installation of several plug-in in most browsers, HTML5 has also helped to create an interactive platform that has allowed web developers to design and create responsive websites using minimal effort.

However, there’s a caveat whenever you’re using HTML5: it’s confusing to differentiate older versions of HTML and HTML5— it’s not easy to learn a new programming language. That’s why it’s important to master new elements in HTML5 to be at the forefront when it comes to developing usable and responsive websites.

So, what’s new in HTML5?

Below is a list of all the tags that in HTML5:

● <article>. Defines an article.
● <aside>. Defines content outside the main flow of the narrative.
● <datagrid>. References dynamic data in a tree or tabular data form.
● <datalist>. Defines a list of dropdown pre-defined options surrounding <input> tag.
● <footer>. Defines a footer section of web document.
● <header>. Defines a header for section or document.
● <hgroup>. Defines a group of headings tags (<h1> to <h6>).
● <section>. Defines a section in document.
● <dialog>. It is used to define a dialog box on a web page.
● <figcaption>. It is used to specify the caption for the figure element on a web page.
● <main>. It defines the main HTML content of.
● <mark>. It specifies marked or highlighted text on a web page.
● <menuitem>. It specifies a menu item that a web user can invoke from the pop-up menu on a web page.
● <meter>. It indicates a scalar measurement which is contained in a specific known range.
● <nav>. It specifies the navigation links on a web page.
● <progress>. It defines the progress of a given task on a web page.
● <time>. It defines the date and time on a web page.
● <AUDIO>. It defines the sound content on a web page.
● <VIDEO>. It defines the video content on a web page.
● <BUTTON>. It defines the button for autofocus, disabled and forms on a web page.
● <CODE>. It defines the computer code in a HTML document.
● <IFRAME>. It defines the height, the name and sandbox for HTML5 documents.
● <INPUT>. It’s used to specify formnovalidate, formtarget, height, required, size, src and step attributes of HTML documents.
● <OPTION>. It defines an option group in a drop-down list.
● <SOURCE>. It defines media resources for content on a web page.
● <SPAN>. It defines a section of a document on a web page.
● <MAP>. It defines an image map on a web page.

What about existing tags?

The existing tags are those tags that are found in both HTML4 and HTML5. Here’s a list of those tags:

● <DOCTYPE>. It specifies the HTML5 document type.
● <A>. It species an anchor tag that can be used with href, hreflang and media attributes.
● <ABBR>. It defines an abbreviations used on a web page.
● <ADDRESS>. It defines an address.
● <AREA>. It defines the area that’s inside the image map on a web page.
● <article>.It’s used to describe an article
● <bdo> It’s used to override text direction
● <blockquote> It’s used to define a section that is quoted from other sources
● <canvas> It is used for drawing canvas
● <cite> It specifies the title of table or image.
● <code> It specifies a computer code
● <div> It’s used to segment a given section in HTML document
● <em> It’s used to emphasize the HTML text
● <Embed>. Describes the container for an external applications
● <fieldset>. It defines groups that occur for related HTML elements.
● <form> . It defines the HTML form
● <hr> It defines the horizontal rule
● <iframe>.It define an inline frame on a web page
● <img>. It adds images in web pages
● <input> It’s used for adding an input control