10 Things you need to know about HTML5 What I Did!

10 Things you need to know about HTML5 What I Did!

The old way, who would want to remember that?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

New way So much cleaner

<!DOCTYPE html>

Did you that it is unnecessary for HTML5, but it is used for current and older browsers that require specific doctype. It’s because browsers do not understand doctype, it will render the markup to standard mode. So feel free to use this without any worries

2. The Figure Element

The old way

<img src="#url to image" alt="about"/>
<p>here some texts7lt;/p>

The new way

<figure>
<img src="#url to images" alt="about"/>
<figcaption>
<p>here some text too!</p>
</figcaption>
</figure>

There unfortunately isn’t any easy or semantic way to associate the caption, wrapped in a paragraph tag, with the image element itself. HTML5 rectifies this, with the introduction of the <figure> element. When combined with the <figcaption> element, we can now semantically associate captions with their image counterparts.

3. One of my favs is the <small>little</small>

this element has been redefined and can be used for small print such as copy right. this is a great tools to unitilize for anyone

4. No More Types for Scripts and Links

You possibly still add the type attribute to your link and script tags.

 <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />  
 <script type="text/javascript" src="path/to/script.js">

This is no longer necessary. It’s implied that both of these tags refer to stylesheets and scripts, respectively. As such, we can remove the type attribute all together.

    <link rel="stylesheet" href="path/to/stylesheet.css" />  
    <script src="path/to/script.js">

5. HTML5 nifty things with your list items

Web browsers have understand NEW attribute that can be applied to elements, called contenteditable. They allow a user to edit content within the element

<ul contenteditable="true">  
<li>list item 1</li>	
<li>list item 2</li>	
<li>list item 3</li>	
</ul>

6. Form Fields with ease

We are also going to use some of HTML5’s new input types and attributes to create more meaningful fields and use less unnecessary classes and ids:

  • email, for the email field
  • tel, for the telephone field
  • number, for the credit card number and security code
  • required, for required fields
  • placeholder, for the hints within some of the fields
  • autofocus, to put focus on the first input field when the page loads
<form id=payment>
<fieldset>
<legend>Your details</legend>
<label for=name>Name</label>
<input id=name name=name type=text placeholder="First and last name" required autofocus>
<abel for=email>Email</label>
<input id=email name=email type=email placeholder="example@domain.com" required>
<label for=phone>Phone</label>
<input id=phone name=phone type=tel placeholder="Eg. +447500000000" required>
<button type=submit>Buy it!</button>
</fieldset>
</form>

7. The Semantic Header and Footer

No more <div> crazy

<div id="header"></div>
<div id="container"></div>
<div id="footer"></div>

Divs, the no semantic structure even when you assign an ID or class. With HTML5 header, section and footer mark-up to make it look nice

<header></header>
<section></section>
<footer></footer>

8. Internet Explorer and HTML5

Unfortunately, that dang Internet Explorer requires a bit of wrangling in order to understand the new HTML5 elements. All elements, by default, have a display of inline. In order to ensure that the new HTML5 elements render correctly as block level elements, it’s necessary at this time to style them as such.

header, footer, article, section, nav, menu, hgroup {  
display: block;  
}

Unfortunately, Internet Explorer will still ignore these stylings, because it has no clue what, as an example, the header element even is. Luckily, there is an easy fix:

document.createElement("article");  
document.createElement("footer");  
document.createElement("header");  
document.createElement("hgroup");  
document.createElement("nav");  
document.createElement("menu");

Strangely enough, this code seems to trigger Internet Explorer. To simply this process for each new application, Remy Sharp created a script, commonly referred to as the HTML5 shiv. This script also fixes some printing issues as well.

<!--[if IE]>  
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>  
<![endif]-->

9. hgroup

Imagine that, in my site’s header, I had the name of my site, immediately followed by a subheading. While we can use an <h1> and <h2> tag, respectively, to create the mark-up, there still wasn’t, as of HTML4, an easy way to semantically illustrate the relationship between the two. Additionally, the use of an h2 tag presents more problems, in terms of hierarchy, when it comes to displaying other headings on the page. By using the hgroup element, we can group these headings together, without affecting the flow of the document’s outline.

<header>  
<hgroup>  
<h1> Recall Fan Page </h1>  
<h2> Only for people who want the memory of a lifetime. </h2> 
</hgroup>

10. HTML Snippet

<div id="myDiv" data-custom-attr="My Value"> Bla Bla </div>

Retrieve Value of the Custom Attribute

var theDiv = document.getElementById('myDiv');  
var attr = theDiv.getAttribute('data-custom-attr');  
alert(attr); // My Val

It can also even be used in your CSS, like for this silly and lame CSS text changing example.

<!DOCTYPE html>  	  
<html lang="en">  
<head>  
<meta charset="utf-8">  
<title>Sort of Lame CSS Text Changing</title>  
<style>  	  
h1 { position: relative; }  
h1:hover { color: transparent; }  	
h1:hover:after {  
    content: attr(data-hover-response);  
    color: black;  
    position: absolute;  
    left: 0;  	  
}  
</style>  
</head>  
<body>  
<h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me  </h1>    
</body>  
</html>
© 2025 - Polished Designs