A much of the excitement has been seen so far about HTML5 new “Section” element introduced to improve the document structure. It has long been dubbed a game changer for structuring and presenting content for the World Wide Web and helps to streamline the overall web development process up to a great extent.
HTML5 new “Section” element seems a great solution to a common problem faced by most of the web developers while dividing a web page into various visible sections comprising of blocks, areas, boxes, regions. The problem started with the underlying structure assembled roughly together from unsemantic helper elements as well as numbered headings.
HTML5 section elements : A Brief Introduction
The element introduced within a comprehensive set of new section HTML5 elements that comes handy for assigning sections of document content at the time of Psd to Html5 conversion. A common use of HTML5 new “Section” element is to signify the section of a document that comes with a specific heading.
The W3C says: “The <section> element represents a generic section of a document or application.”
In simple words, it gains much hypeamongst web developers when it comes to dividethe content of a web page into related chunks namely an introduction. It helps you to change the look of a particular part of a web page that you want to look separate from the rest of the page. With the use section elements (a generic section), you can give your web page a “semantic” distinction. Oftentimes, theelement is also known as a semantic element. The reason is simple – it serves both user agents and humans about what the content enclosed in a particular section of the document.
Unfortunately, many people misunderstood the prime use of the elements like – it is not meant for outlining content that needs to be styled visually because it can be done easily by using semantical divs. However, you can use the element of HTML5 in conjunction with an element for providing a semantic structure of your web page content.
How To Structure HTML5 Content With The Element, Header, footer, section, article, nav and aside are the new section elements introduced by HTML5. By implementing the HTML5’s new sectioning elements, you can get explain the structure of a content into the web page efficiently. The power of sectioning helps in enhancing Psd to XHTML coding structure of a web page without breaking accessibility.
Dos & Don’ts of HTML5 “Section” Element
There are various things which we need to do as well as avoid while using the HTML5 section Element. Below, I have discussed when to use the “Section” Element of HTML5 and also, a complete list of Don’ts is also mentioned. Let’s have a look:
Dos of the “Section” Element …
1) For individual section representing a tab switcher or content slider
2) To divide a lengthy page of “terms and conditions” into numbered sections
3) For a product description (a photo, add to cart button, etc.)
4) For individual biographies on a corporate info page
5) To divide one-page website or portfolio into the different sections
2) To divide a lengthy page of “terms and conditions” into numbered sections
3) For a product description (a photo, add to cart button, etc.)
4) For individual biographies on a corporate info page
5) To divide one-page website or portfolio into the different sections
Don’s of the “Section” Element …
1) When it comes to divide content from the header and footer. You can use div tags for the same.
2) For sidebar related content boxes because you can use “Aside” for this.
3) To add a border or drop shadow.
4) Nest elements to avoid IE6′s float double-margin bug.
5) For an individual author summary on a blog post or news article
2) For sidebar related content boxes because you can use “Aside” for this.
3) To add a border or drop shadow.
4) Nest elements to avoid IE6′s float double-margin bug.
5) For an individual author summary on a blog post or news article
Comments
Post a Comment