24 HTML5 Tips



html5 new features

Everyone is talking about the new HTML5. web designers, developers, bloggers, directors, marketing managers ,

HTML5 has introduced many brand new tags and elements as well as attributes and features. Some of these are really useful and helpful for building web site. I want to share with you some common HTML5 tags and features that I have used. Some of them is cross browser compatible and some of following is not compatible with all browsers but is a good start good starting point to know HTML5.

Semantic Structure

Have a semantic structure will make your code more meaningful and easily to adjust or change. HTML5 is semantic the new set of tags and attributes will make your codes more easily understandable when you look back into it to make changes. Lets take a quick look at some of the new HTML5 tags and attributes.

1. DOCTYPE Declaration

Tell the browser the that this page is HTML 5 Document type.

<!DOCTYPE html>

Note : you should put this at the very beginning of your html codes example : minimum requirement to start your first html5 page.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Your contents goes here ...
</body>
</html>

2. <Header>

This is usually the head of the document. With HTML5 you can define each section with a tag. The header tag would be used for very beginning of your html contents.

<header>
... some codes here ...
</header>

3. <Footer>

I would use the footer tag at the very end of the document.

<footer>
.. some codes here...
</footer>

4. <Nav>

The Nav tag I would use this as a main menu.

<nav>
... some codes here ....
</nav>

Content-specific elements

5. <article>

Defines an article in the document

<article>
<h3>Sample article heading</h3>
<p>Replace this with any contents</p>
</article>

 

6. <section>

Defines a section in the document

<section>
<h3>Sample section </h3>
<p> replace this with any contents</p>
</section>

 

7. <aside>

Defines content aside from the page content, very useful for defining a sidebar.

<aside>
<h3>Sample Sidebar contents</h3>
<p>This is the sample text you can replace this.</p>
</aside>

 

8. <video>

Older html will not play any video or audio. With HTML5 now its so easy to play and media files. Add the video tags structured as below and start playing video on your html page.

<video width="640" height="480" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

 

9. <audio>

Link your audio file defined with the Audio tags to play audio in web browsers. You can use a bit of Jquery or javascript to make this compatible with most browsers.

 <audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>

10.< figure>

The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document

<figure>
  <img src="your-pic.jpg"alt="Your-pic-here"></figure>

11.< figcaption>

The figcaption element represents a caption for the contents.

 

<figure>
  <img src="your-pic.jpg"alt="Your-Pic-Here">
  <figcaption>Your pic captions goes here.</figcaption></figure>

 

Forms

The <form> tag is used to create an HTML form for user input. You can input attributes to control your forms.

Example below :

12. input email type

<form action="email.php">
  Your E-mail: <input type="email" name="email">
  <input type="submit">
</form>

13. input number type

<form action="quantity.php">
  Quantity: <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>

14. range input type

<form action="range.php" method="get">
Points: 0<input type="range" name="points" min="1" max="10">10
<input type="submit">
</form>

15. color input type

<form action="color.php">
  Select a color: <input type="color" name="color"><br>
  <input type="submit">
</form>

I thought ill add this new input color type I think is very useful but its not compatible with some browsers.

 

Form Attributes

In the past we used javascript to add attributes like autofocus and placeholders. Now you can add this to your html5 forms.

16. Placeholder

Add this to your input will display text or message in your input field before you enter the value.

<input type="text"name="username"id="username"placeholder="Enter your Username">

 

17.Autofocus

Add this to your input will automatically get focus when the page loads.

<input type="text"name="name"id="name"autofocus>

18. Required

Add a required in your input, this will make your input field a compulsory input , user must enter before submitting the form.

E-mail: <input type="email" name="email" required>

 

19. Min and max values

You can set input with a minimum and maximum values.

Enter your birthday : you must be over 18 years old.
<input type="date" name="birthday" max="1996-12-31">

Enter a date after 2014-01-24:
<input type="date" name="booking" min="2014-01-24">

Enter Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

 

20. File upload with multiple upload

Selecting multiple files with a file upload input using multiple attribute.

Select images: <input type="file" name="img" multiple>

 

21. Autocomplete

The autocomplete attribute helps users complete form inputs automatically by typing in the field and a dropdown menu of options will display.

<input type="text"name="username" id="username" autocomplete="off">

 

22. Pattern

The pattern makes it easy for us to implement specific validation for product codes, invoice numbers, and whatever you can think of.

<label>Product Number:
<input pattern="[0-9][A-Z]{3}"name="product"type="text"title="Enter a number and two capital letters."/></label>

23. Validate

Client-side form validation

<input type="submit" validate type="email">

24. Nonvalidate

The opposite to validate novalidate works with the form. the default is on. to turn it off with the code below.

<form novalidate>
  <input type="email" id="email">
  <input type="submit" value="Subscribe">
</form>

These 24 html5 coding tips to help you gain better understanding and how it can be used. Stay tuned for HTML5 tutorial at D24 we will show you how to put them all together and create your own html5 web app.

Tags: , , ,


Leave a Reply

You must be logged in to post a comment.