The new version of
html is htlm5. In it advance features are include which are easy to learn and
access. We can accept more new advantages from the HTML5. So let’s discuss on
it. HTML5 is a new standard of HTML
WHAT ARE THE BASICS?
WHAT ARE THE BASICS?
When we start the coding
in HTML we face firstly doctype. Which is very common and everyone knows that
why it is use?
The <!doctype>
tell us what version of HTML page is written in. in simple words we can say
which version of HTML we use. It is written before the <html> tag. In
HTML5 the new DOCTYPE is small, meaningful, and maybe easy to be able to remember.
In <!DOCTYPE> when taking backwards compatibility into consideration <!DOCTYPE html> is
a pretty great choice.
NEW ELEMENTS YOU SHOULD
KNOW
In HTML5 quick
reference of elements that are new or have been redefined in HTML5. For each element
there is a short description. We have as it same elements in HTML5 like
<header> and <footer> to other like<canvas> and
<audio>.
API is powerful and
which is allows us the freedom to create more user-friendly application. API
stands for Application Programming Interface that is specification used by
software components to communicate with each other. An API may describe the
ways in which a particular task is performed.
THE NEW STRUCTURE
ELEMENTS
<header> ---
The <header> tag specifies a
header for a document or section. It is also used as a container for
introductory content or set of navigational links. Header elements contain
information section or page.
<nav>
The <nav> tag defines a section of
navigation links. It <nav> tag contain only for major block of navigation
links. Not all link groups need to be contained within the <nav> element,
just primary navigation.
<section>
The <section> tag defines
sections in a document. In simple words the <section> tag definition in a document which section like chapter,
headers, footer or any other section is start and end.
<article>
The article element represents a section of
content that forms an independent part of a document or site like a magazine or
newspaper article, or a blog entry. An article should make sense on its own and
it independently from the rest of the site.
<aside>
The <aside> tag defines some content
that are related to the surrounding content. The <aside> content could be
placed as a sidebar in an article. It give the hint that what will be in the
content.
<footer>
The <footer>
tag defines end of the page. <footer> tag define end not only for the current
page it also for document or every section. You can have several <footer>
elements in one document.
When you make a web
page and use these elements and the it will be look on web page it took like
they’re just replacing our common DIV IDs; and in a way, it’s true. The diagram
shown below by using these elements.
The main work of
<header> tag and <footer> tag is not only the top and bottom of the
page it also contain the <header> and <footer> of each documents
and section.
The main uses of
these structural elements they are extremely well defined and provide a great
way to semantically structure your documents.
FURTHER READING ON STRUCTURAL HTML5
Steve Smith on
Structural Tags in HTML5
Lachlan Hunt’s Preview
of HTML5
Elliot Harold on New
Elements in HTML5
Bruce Lawson’s HTML5
Form Demo
*Steve Smith on Structural Tags in
HTML5-----
<!DOCTYPE
html>
<html>
<head>
<title>Standard Blog</title>
</head>
<body>
<header>
<h1><a href="#">Standard
Blog</a></h1>
</header>
<nav>
<ul>
<li><a
href="#">Home</a></li>
<li><a
href="#">Archives</a></li>
<li><a
href="#">About</a></li>
<li><a
href="#">Contact</a></li>
</ul>
</nav>
<section>
<article>
<header>
<h1><a
href="#">Title</a></h1>
</header>
<section>
<p>Lorem ipsum...</p>
</section>
</article>
<article>
<header>
<h1><a
href="#">Title</a></h1>
</header>
<section>
<p>Lorem ipsum...</p>
</section>
</article>
<article>
<header>
<h1><a
href="#">Title</a></h1>
</header>
<section>
<p>Lorem ipsum...</p>
</section>
</article>
</section>
<footer>
<p>Copyright © 2008 All
Rights</p>
</footer>
</body>
</html>
This is the little
example for the simplicity of the content….
As you can see, in
this example simply providing id attribute to a div. this also gives the added benefit of a descriptive closing
tag as </article> is much more understandable that wondering which
<div id=”something”> goes with a given </div>.
SO, I CAN USE THIS
NOW?
Actually, yes, with a
few extra steps. And it will work in all modern brewers by the reason of few a
little quirks.
Most browsers don’t understand new HTML5
doctype, they don’t know about these new tags in HTML5. Auspiciously, due to
the give of browsers, they deal good with unknown tags. there is problem
unknown tags have no default style, and treated as inline tags. In HTML5 tags
are structural, and should obviously be block level elements. so when we style
them with css, we need to be sure to include display:block; in our attribute/value pairs
EASING THE TRANSITION
FROM XHTML
Transition of HTML
4.01, XHTML 1.0, &HTML are very simple just apply simple syntax differences
that can, very easily, slip past anyone and invalidate code. But keep in mind;
HTML5 has some built-in “stack” to make the transition a little easier.
Example:-
1—
<input type=”text”
id=”name”>
This is the proper
syntax to input text element
But this is also
accepted as valid code in an attempt to ease the pain for avid XHTML
coders(like myself) who are used to self-closing elements:
<input type=”text”
id=”name”/>
Same rules apply to
<meta> and other self closing elements.
.jpg)
.jpg)
.jpg)
.jpg)
0 comments:
Post a Comment