In this article we will look into new features in HTML5. HTML is now more simpler then before and there are number of improvements in it like
- New doctype definition;
- The “type” attribute of elements such as <link> or <script> are now optional;
- The syntax constraints that have been relaxed;
- New structural elements that have been added, etc.
Consider following HTML structure.
<link rel="stylesheet" href="customCSS.css">
See the simple
Next it is good to declare the character set in our document that is UTF-8
Linking CSS now we can omit type=”text/css” attribute, and it is no longer necessary.
More simplified syntax
We can omit quotes (not always, but most of the time) and can use uppercase or lowercase or a mix of the both. Many elements do not need a closing tag anymore like
</li>, </dt>, </dd>, </tr>, </th>, </td>, </thead>, </tfoot>, </tbody>, </option>, </optgroup>
,</p> </head> </body>, </html>
But please make a habit to close tags for better practice
It is not necessary to include the attributes in double quotes if it has no space in between or have some non alpha numeric characters. now
<link rel="stylesheet" href="style.css">
can be written as
<link rel = stylesheet href = style.css>
but is is good practice to use quotes.
New structural elements added to HTML5
||header of page that generally appears on top of each page. or it can be or a header of a long <article> or of a long <section>
||Can contain the footer of website or a long <article>, or a long <section>
||A section that contains the main navigation links
||A section with independent content, which can be individually extracted from the document or can be a blog post
||A section element is used to group articles or define the different sections of a single article. Can be used with a header.
||Used for times and dates.
||Can be used as a side menu or can provide additional information possibly not related to main article
|<figure> and <figcaption>
||Used to encapsulate a figure as an item, and a caption for the figure.
||This element represents main content of the body of a document or application. There can be only one <main> element in a document. It must not be a descendant of an <article>,<aside>, <footer>, <header>, or <nav> element.
<title>HTML5 CSS3 Blog</title>
<h1>HTML5 <span>CSS3</span> blog</h1>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
alt="Example of HTML5 structural tags" />
<li><a href="" rel="tag" class="w8">Ajax</a></li>
<li><a href="" rel="tag" class="w3">JQuery</a></li>
<p>2015 - HTML 5 CSS3 Blog</p>
Difference between an article and section
- The <article> element can work as stand-alone parts of a document.
- <section> elements can be used to divide a logical part into subparts.
<h2>Introduction to article</h2>
<h2>History of HTML5</h2>
<h2>HTML5 Structural Elements</h2>
Can we use div element still
This is a figure form http://html5doctor.com/ . This explains when to use the div tag.
That’s it for this article, In our next post we would look in to more detail features of HTML5.