Pub Pixel Avatar Image

The Importance Of Using The <article> Element In HTML5 If You Publish Articles, Tutorials And Other Types Of Independent Content

Published:

Rate Article (Sign in and be the first to rate this article.)

Article Details

Views: 1644

First Published:

Word Count: 1385

Edition: 1

For people who post articles, blog entries or any other type of independent content. You should be aware of the new HTML5 <article> element created just for people like you. The new HTML5 <article> element is a semantic element which basically means the <article> element will clearly describe the meaning of the content contained inside the <article> element to the developer as well as user-agents like robots and browsers for example. The benefits of using semantic elements like the <article> element varies. But some of the benefits include giving your html code some structure by giving some meaning to your html code, improved search engine rankings for your web pages, improved accessibility to your web pages for users with disabilities or for your users who are using mobile devices are just some of the benefits of using semantic elements.

The <article> element, which is a block-level element is used to represent a complete, or self-contained, piece of writing that forms an independent part in a document, application, page, or site that should make sense on its own when distributed independently from the rest of the site, document, application, or page. For example, an article, tutorial, forum post, blog post, comment, or any other type of independent item of content is perfect for the <article> element.

The <article> element is allowed to contain any of the flow and phrasing element's, like for instance the <a>, <h1> and <h6> element's, except the <main> element. The <main> element cannot appear as a descendant of the <article> element, in-other words you cannot place a <main> element inside the <article> element.

The <article> element also requires an end tag, for example </article>. You are also allowed to have more then one <article> element on a web page.

It's also important to remember that the <article> element cannot appear as a descendant of the <address> element, in-other words you cannot place an <article> element inside the <address> element.

You may also nest another <article> element within another <article> element, in-other words you may place an <article> element inside another <article> element. When nesting <article> element's inside one another the inner <article> element's content should represent articles that are related to the contents of the outer <article> element. For example, a blog post with comments can have each individual comment contained inside its very own <article> element which can be nested within the blog posts very own <article> element. I will show you how to nest <article> element's later on in this tutorial.

The <article> element is allowed to use any global attribute, you can learn more about global attributes and how to use them in an earlier tutorial that was published called "What The Heck Are Global Attributes In HTML?".

The <article> element is also allowed to use any event attribute, which are basically attributes that can trigger certain actions to occur in your browser. For example, like starting a client-side scripting language such as JavaScript when a user clicks on a mouse or when a web page is finished loading are some examples of what event attributes can be used for. I will explain more about event attributes in a future tutorial.

Here is how to code the <article> element for HTML5 in the example below.


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <article>  
  <h1>PlayStation</h1>  
  <p>The PlayStation also abbreviated as PS is a series of video game systems created and developed by Sony Computer Entertainment.</p>  
 </article>  

</body>
</html>

And here is how to code the new <article> element for HTML5 to create our XHTML5 web page.


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <article>  
  <h1>PlayStation</h1>  
  <p>The PlayStation also abbreviated as PS is a series of video game systems created and developed by Sony Computer Entertainment.</p>  
 </article>  

</body>
</html>

Now that you know how to code in the <article> element. Let me now show you how to nest <article> element's inside another <article> element, using a blog post with comments as an example.

Here is how to nest <article> element's for HTML5 in the example below.


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <article>  
  <h1>PlayStation</h1>  
  <p>The PlayStation also abbreviated as PS is a series of video game systems created and developed by Sony Computer Entertainment.</p>  
  
  <section>  
  <h2>Comments</h2>  
   <article>  
    <h3>Posted by: The Game</h3>  
    <p>Comment 1.</p>  
   </article>  
   
   <article>  
    <h3>Posted by: PSX</h3>  
    <p>Comment 2.</p>  
   </article>  
   
   <article>  
    <h3>Posted by: GTA4life</h3>  
    <p>Comment 3.</p>  
   </article>  
  </section>  
 </article>  

</body>
</html>

And here is how to nest <article> element's for XHTML5 in the example below.


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <article>  
  <h1>PlayStation</h1>  
  <p>The PlayStation also abbreviated as PS is a series of video game systems created and developed by Sony Computer Entertainment.</p>  
  
  <section>  
  <h2>Comments</h2>  
   <article>  
    <h3>Posted by: The Game</h3>  
    <p>Comment 1.</p>  
   </article>  
   
   <article>  
    <h3>Posted by: PSX</h3>  
    <p>Comment 2.</p>  
   </article>  
   
   <article>  
    <h3>Posted by: GTA4life</h3>  
    <p>Comment 3.</p>  
   </article>  
  </section>  
 </article>  

</body>
</html>

As you can see in both examples of how to nest <article> element's for both HTML5 and XHTML5 I used the <section> element to contain all the comments for the blog post. The reason for using the <section> element, although it is not required was to group all the comments related to the blog post to bring more semantic meaning to the code. I will explain more about the <section> element in a future tutorial.

When using the <article> element for an article, tutorial, forum post, blog post, comment and so on, the following element's are usually used in combination with the <article> element but are not required which include the <header>, <footer> and <time> element's. You can learn more about the <time> element and how to use it in an earlier tutorial that was published called "How To Identify A Specific Date And Time In Your Web Pages Using HTML5". I will explain more about the <header> and <footer> element's in a future tutorial.

Article Tags

Tag Article (Sign in if you want to tag this article.)

Share This Article

Send To Facebook Link

Tweet This Link

Send To LinkedIn Link

Send To StumbleUpon Link

Digg This Link

Send To Google Plus One Share Link

Send To Reddit Link

Send To Tumblr Link

Send To Delicious Link

Send To FriendFeed Link

Send To Diigo Link

Email Link

AddThis Link

0 Comments

Leave Comment (Sign in and be the first to comment on this article.)

Important

This site cannot guarantee the accuracy of articles, comments, answers and other types of content or media submitted by members or anonymous users and guests, and we recommend that you use common sense when following any advice or information found on this site. Read our full Content Disclaimer Agreement for further information.