Last week, we were talking about the impact of HTML 5 on modern web design and the flexibility it provides to web designers to do more with limited resources. Today I am going to show you some basic HTML 5 tags and some implementation which will greatly improve your web design experience.
!DOCTYPE
In any html file, the item on top of the list is definitely the doctype declaration. When I first started writing html code, I was so confuse with the types of doctype available such as: HTML 4.01 Transitional, XHTML 1.0 Strict etc. I was befuddled by all the declarations, thus I resolved to using Dreamweaver which let me handpick any declaration without the need to copy from W3C website. In order to use HTML 5, you only need this declaration below:
<!DOCTYPE html>
Header
Here is a comparison of a web design done in HTML 4 compared to HTML5.
HTML 4
<div id="header">
<h1>This is a header</h1>
</div>
HTML 5
<header>
<h1>This is new header</h1>
</header>
If you think the banner in your web design is the only elements that can be used under the <header> tag, then you are seriously wrong !According to the application of <header> by W3C specification:
“The header element represents a group of introductory or navi-
gational aids ... Note: A header element is intended to usually
contain the section’s heading (an h1–h6 element or an hgroup
element), but this is not required. The header element can also
be used to wrap a section’s table of contents, a search form, or
any relevant logos.”
gational aids ... Note: A header element is intended to usually
contain the section’s heading (an h1–h6 element or an hgroup
element), but this is not required. The header element can also
be used to wrap a section’s table of contents, a search form, or
any relevant logos.”
Let's wrap it up until here. Nest week, we will talk about <section>, <article> and other features. Before that, remember to visit my blog tomorrow to catch the latest plan for Jinified
No comments:
Post a Comment
Give us your a piece of your mind