Saturday, December 29, 2018
HOW TO USE ARTICLE, SECTION AND ASIDE ELEMENTS
Hi, in today’s lesson I will be discussing with you some important HTML 5 elements which include: <article>, <section> and <aside> element. I don’t want to waste your time on endless preambles, so let’s get to walk.
1. THE <ARTICLE> ELEMENT
This element provides you with a large and independent section that is usually reserved for entries such as blog posts, comments and other pieces of content. If you are building a website or a blog for instance, <article> element is what you will use to create space for entry of contents. In HTML 4, <div> element was what website builders used before the advent of HTML 5. In other words, <article> element is the replacement of <div> element.
Let’s consider an example to clearly understand how <article element works.
<article>
<h1>Welcome To Codinglegit<h1>
<p>enter the content of your article</p>
</article>
It will look like this on your text editor
Save and open it, the result will look exactly like this
2. THE <SECTION> ELEMENT
The <section> element segmentally contains the blog post or page of a website. It is used to partition contents of an article or blog post. It is important to note that <section> element is used inside the <article> element.
Carefully observe the example below:
<article>
<h1>Welcome To Codinglegit<h1>
<section>
<h1>Our services</h1>
<p>enter here what you offer</p>
</section>
</article>
It will look like this
Save it and then open it, the result will resemble this
3. THE <ASIDE> ELEMENT
The word ‘’word’’ aside is not unfamiliar especially to literature students. Aside in this context is used to refer to contents that are separate but indirectly related to the main content. For instance, contents in the sidebar of a website can be regarded as an aside. More so, <aside> tag can be used within an <article> tag. If you want to use it with article tag, make sure that the content within the <aside> tag is not unconnected to the main content.
Let us consider an example
<article>
<h1>Welcome To Codinglegit</h1>
<p>In this website you will be learning HTML, CSS, PHP, etc</p>
<aside>
<p>All the lessons on this website are free access</p>
</aside>
</article>
It will look like this on your text editor
Save and open it, the result will look like this
WRAPPING UP
In our next lesson, we’ll be looking at Scalable Vector Graphics (SVG), alongside <audio>, <video> and <progress> elements. Till then, keep investing in yourself. In case you have any question, inquiries, etc, feel free to use the comment box below.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment