Introduction
I am a freelancer. Previously, I didn’t think much about how and what coders do. I was responsible for the server, and my friend was coding and managing with the content. Quite recently I wanted to try to understand “what’s what”. A couple of days ago I came across the material that I liked very much. It was a clear example of what and how to write. Unfortunately, I cannot share the link, because I don’t remember where this manual is situated. Though, it was possible to memorize it, I went another way – I summarized it and made some notes. So, you are welcome to look through my notes.
New Doctype
Do you still use this old, decrepit, covered with wrinkles doctype?
<source lang=«html> <!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“ „www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
If yes, then why? It is the time to move to the new doctype, which came to us together with HTML5:
<!DOCTYPE html>
Now you don’t need to rush in search of correct doctype (and, as a result, the mode of compatibility). HTML5 allows no more worrying about it, and it’s not your headache anymore. If new doctype will meet the old browser, then it will simply remain in the standard mode of compatibility. Start using it and feel the difference!
<figure> element
I’ve already used the similar markup before:
<img src="path/to/image" alt=" You can't see it? Make the viewing of images available in the settings!" />
<p>Image of Mars. </p>
But, unfortunately, here we do not see an easy method to add heading to our image. When developing the standard of HTML5 it was taken into account, and this problem was decided by addition of figure element. In combination with figcaption we can easily add heading or signature to our image without any additional efforts. For example:
<figure>
<img src="path/to/image" alt="Don’t you see it? Make the viewing of images available in the settings!" />
<figcaption>
<p>Something very interesting is displayed here.</p>
</figcaption>
</figure>
Let’s move on.
No more types for script and link elements
Previously, a lot of people were doing the following markup:
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>
You don’t have to do this anymore. It meant that first we had the addition of style, and then the implementation of the script. Now it’s obviously that there is no necessity to specify the type.
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>
With or without quotes – that’s the question
Remember that HTML5 it not XHTML. You don’t have to turn your attributes in quotation marks, if you don’t want to do this. There is nothing shameful and wrong, especially, if when coding you feel yourself “like a duck in water”:
<p class = myClass id= someId>What the heck are you doing?</p>
Make your content easily editable
HTML5 presents new, not less wonderful possibility to the web developers. Such possibility is a changeable content. Just imagine, we read Wikipedia and suddenly notice, that some author made (well, it can happen to anyone) a mistake. With the use of this possibility we can simply tap on the text and literally correct this text in two clicks. Here’s the example of markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<h2> To-Do List </h2>
<ul contenteditable="true">
<li> Get up. </li>
<li> Drink coffee. </li>
<li> Finally do something! </li>
</ul>
</body>
</html>
Or to do it in the tables of style:
<ul contenteditable = true>
Voilà!
Submit form for entering your e-mail
Formerly, all of us had to place the ordinary fields for an input and check the data adequacy on a server side. Now it is done on a client side, not loading the server with superfluous queries. Old browsers (all of you probably guess what I mean) when meeting the new type of input will render the ordinary text input. It can be done very easily. So, for example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<form action="" method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email" />
<button type="submit"> Submit Form </button>
</form>
</body>
</html>
And it will look like this:
Or like this…
This field at once will alert you that you’ve entered a not valid email address. In case if all is well (and in IE everything is always well), the data is being sent to us on a server.
Dark horse aka placeholders
Again, before we did a prompt in textbox by means of scripting on JavaScript. When pushing on a textbox the prompt disappeared. Today we do not need to take care of it – in fact we have placeholders.
Like this:
<input name="email" type="email" placeholder="You can type something here!" />
Header and footer
Now we do not need to do anything with id, to specify, where is the header of our web-site (or heading, that’s the same thing), and where is the footer. Like this:
<div id="header">
<p>Nothing</p>
</div>
<div id="footer">
<p>still nothing</p>
</div>
And how about legal, literate from the point of view of semantics and, accordingly, valid code. Why not?
<header>
3000 kilometres above earth.
</header>
<footer>
-3000 kilometres under. Under earth.
</footer>
Try not to confuse these elements once on your web-site. Well, everything can happen.
Internet Explorer and HTML5 — reality or fiction?
The old versions of IE don’t want to be friends with HTML5. Our task is to make them friends.
First method – to use JavaScript and CSS. At first it is needed stylize new elements. For example:
header, footer, article, section, nav, menu, hgroup {
display: block;
}
But now, unfortunately, IE still cannot be influenced, therefore it will ignore these tags. We will create them by means of JavaScript:
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");
Now we can use these tags where ever we want. Not to repeat this all over again, Remy Sharp offered to simplify this process with IE. We should add this script to our project in the following way:
<!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Now IE updates and in some Developer Preview versions you can already test support of HTML5 in Internet Explorer. Yes, yes, you did not got it wrong – exactly HTML5.
<hgroup> element
Again semantics. Imagine that you have a block with the blog’s categories on your web site, and the themes below. Certainly, when pushing on a block with categories the existent themes come out. It’s easy to notice that these blocks are in relationship.
Now, at the level of semantics, we can prove it. Like this:
<header>
<hgroup>
<h1> Bla bla... </h1>
<h2> How I spent this summer. </h2>
</hgroup>
</header>
No comments.
Required attribute
Let’s assume that we have a registration form. We certainly need to let the user understand that there are the fields of input that must be necessarily filled.
Before, it was done in this way: a user entered data, sent it to the server by pressing the button, and then it was up to the script that checked the validity of the entered data, and if some of the obligatory fields were not filled the user was informed about mistake.
Now it’s easily done on the client’s side of the client. Simply add the required attribute to the textbox. So, for example:
<form method="post" action="">
<label for="someInput">Your name: </label>
<input type="text" id="someInput" name="someInput" placeholder="Bill" required>
<button type="submit">OK</button>
</form>
Conclusion
In this topic I wanted and I gave some advices to the beginning web-programmers, and if to be more precise to the coders, on how to write a code. Hope, they’ll be useful for you!
You might also be interested in..
HTML5 Essentials Resources
On the Sails of HTML5: How New Technologies Change Modern Web
HTML5: New Functions Of The Old Tags
Content editable Feature in HTML5
HTML5 Placeholder stylization with the help of CSS
How to Make Your Own Video Player On HTML5 Video
15 Handy HTML5/CSS3 Frameworks For Web Developers
20 Free HTML5 Games
Meet The Future – HTML5 Demos
HTML5 video players