A Look Into: HTML5 <article> and <section> Elements
HTML5 comes with a bunch of new elements and more will be recommended in the future. However, there are some elements that might be a little confusing in their implementation, including the following two new elements: <article> and <section>.
Some most frequently asked question I found in the forums are: In what circumstances should we use these elements? And similarly How do we use this elements, correctly?
Section Element
This is probably one of the most ambiguous elements. How is it different to <div> element? All these years we have used <div> element for sectioning in our web structure, so when we should you this element apart from <div> element. To demystify it, we need to refer to the official documentation. According to WHATWG documentation the <section> is described as follows:
“The <section> element represents a generic section of a document or application. ~ WHATWG”
From that description we can conclude that the <section> element is definitely intended for sectioning, more or less like a <div> element. But there is an exception for it. The documentation added some specific extra note that said:
“When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead…A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly… ~ WHATWG”
At this point, things got lighter and we can summarize that description in two points:
- First, although the section element is technically style-able, but it is suggested to instead use <div> when we are more likely will apply heavy styles or script to the element.
- Secondly, similar to <li> element, the general idea of section element is to list content.
So in real cases, one of sensible reason to use <section> element is to structure list of blog post content, as shown in the following code snippet:
<div class="blog"> <section class="post"> <h2 class="post-title">Blog Post Title</h2> <p class="post-excerpt">Ice cream tart powder jelly-o. Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p> </section> <section class="post"> <h2 class="post-title">Blog Post Title</h2> <p class="post-excerpt">Ice cream tart powder jelly-o. Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p> </section> <section class="post"> <h2 class="post-title">Blog Post Title</h2> <p class="post-excerpt">Ice cream tart powder jelly-o. Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p> </section> </div>
This is just an example, we can use this element for other purpose.
Article Element
The name itself is quite self explanatory, but let’s see how the official documentation describe it:
“A self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.“
From the above explanation, we can conclude that <article> element is exclusively recommended to be used for structuring article, especially the article that most likely we are going to syndicate, such as a blog post, page content or forum posts.
The following example shows how we structure a blog post content with <article>.
<article class="post"> <header> <h1>This is Blog Post Title</h1> <div class="post-meta"> <ul> <li class="author">Author Name</li> <li class="categories">Save in Categories</li> </ul> </div> </header> <div class="post-content"> Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps. Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah gummies danish biscuit applicake gingerbread jelly-o pastry. </div> </article>
Furthermore, the <article> element can be used in conjunction with section element, so the article can be divided into several sections with <section> element when the case is reasonable to do so, such as the example below.
<article class="post"> <header> <h1>This is Blog Post Title</h1> <div class="post-meta"> <ul> <li class="author">Author Name</li> <li class="categories">Save in Categories</li> </ul> </div> </header> <div class="post-content"> <section> <h2>This is the Sub-Heading</h2> Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps. Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah gummies danish biscuit applicake gingerbread jelly-o pastry. </section> <section> <h3>This is another Sub-Heading</h3> Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon. Cheesecake gummi bears dragée jujubes dragée dragée brownie jelly biscuit. Powder croissant jelly beans pastry. </section> </div> </article>
Conclusion
All the new elements in HTML5 are invented to make the web structure more Semantic as how the founder of World Wide Web and the director of W3C has prevised. There are still being debated among web developers and designers, thought, on how to apply these elements more correctly, some say this, other might say different.
However, don’t get confused with the idea. As I have mentioned above, as long as, the case is reasonable to use them and you see that the structure is quite meaningful when you examine it, then go for it. After all, it does not matter at the end.
so when we should you this element apart from <div> element
→ 이 문장은 좀 잘못쓰여진듯하여 다음과 같이 바꾸었습니다.
so when should we use this element apart from <div>element?
more or less = almost
사전보기
things got lighter
일이 간단해 졌다.
when we are more likely apply heavy styles or script to the element.
→ 이 문장에서는 will이 좀 잘못 쓰여진듯 하여 빼고 해석해 보았습니다.
heavy styles이나 스크립트를 적용할 가능성이 더 높을 때...
most likely 는 going to syndicate를 꾸며주는 부사와 같은것이라고 생각하고, 해석하기 애매하다면 따로 떼어 놓고 이해해보는것도 좋은 방법이다.
syndication : to sell newspaper articles, photographs, television programmes etc to organizations so that they can be published or shown in many dirrerent places.