Article Element in HTML5
The article element was introduced in HTML5 to help produce better page structure in HTML documents for those authors who require heavy editing features.
The code:
<article></article>
Represents an independent piece of content of a document, such as a blog entry ,newspaper article, forum post, a magazine article, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
The article element can enclose headers, sections, footers and other document structure tags, as well as other articles.
Example of code:
<body>
<article>
<style>
Define style for enclosed elements
</style>
<header>
<hgroup>
<h1>Article Title</h1>
</hgroup>
<p>A slogan or something related</p>
</header>
<section class="general">
<h1>Title of Section</h1>
<p>related information about section.</p>
</section>
<section class="appendix">
<h1>Title of Appendix</h1>
<p>Appendix information.</p>
</section>
<footer>
footer information
</footer>
</article>
</body>
*Use of the new elements article, section, header, footer, hgroup, nav and aside is a matter of the taste or the need of the author.
The article element accepts Global Attributes.
Note: Some of these new elements overlap in purpose.
For a complete list of New HTML5 Elements visit W3C.org
Free Tools We Recommend
- Free Ebook How to Code in HTML5 and CSS3
- "How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
- Free Logo Generator Turbologo.com
- If you are building a website for business you need to begin thinking about creating a brand identity. An unforgettable logo could be just the start you need. You can create it free at Turbologo.com. They also provide generators for business cards and letterheads.
- FREE HTML Editor (Windows): NoteTab Light
- All the features of a commercial HTML editor.
- FREE Apache Server (Windows): IndigoAmpp
- Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
- Linux Users
- If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.
- For image resizing we've found the easiest Linux tool to be Krita.
Have you tried our free mobile ready website template kit? Download Template #402 - 6 Page Kit