MyBlogHelp– A Blog for Digital Marketing, Affiliate Marketing, Organic Lead Generation.
  • Home
  • About
  • Contact
  • Privacy
  • Sitemap
  • BLOG
  • AFFILIATE MARKETING
    • LeadsArk
  • MORE
    • MAKE MONEY
      • ONLINE BUSINESS
      • ADSENSE
      • AFFILIATE MARKETING
    • BLOGGING
      • SEO
      • BlogSpot
      • WORPRESS
      • GOOGLE
      • COMPUTER TIPS
    • WEB DESIGN
      • HTML
      • CSS
      • BOOTSTRAP
      • JAVASCRIPT
      • JQUERY
    • WEB DESIGN
      • HTML
      • CSS
      • BOOTSTRAP
      • JAVASCRIPT
      • JQUERY
    • WEB DEVELOPMENT
      • PHP
      • WORDPRESS
  • DOWNLOADS
    • Blogger Template
    • Wordpress Theme
    • PDF

Thursday, December 20, 2018

How to use aside tag in html5?

 MyBlogHelp     December 20, 2018     html     5 comments   

aside-tag-in-html5
ASIDE-TAG-IN-HTML5


<aside> Tag in HTML5

  • Introduction of <aside> tag 
  • Syntax of <aside> tag
  • Attributes of <aside> tag
  • Example of <aside> tag 


Introduction of <aside> Tag in HTML5

In <aside> tag of HTML5, content is shown which is related to the surrounding content. This tag is mostly used as a sidebar. It is defined inside the <body> tag.

For example, there is an article on your webpage. You can create an <aside> element with it and show other links and images related to this article. This tag can also be used to show an advertisement or a profile of the author.

The <side> tag is also defined in the <article> tag. In that situation, the article related content is shown in this tag. As if something that has been emphasized in the article is shown as a quote.

The content of the <aside> tag is related to the surrounding content but is not important. It depends on the user whether he wants to use it or not.

The behavior of the <aside> tag is similar to the <div> tag both look the same. But their meanings are different. Content within the div is not necessarily related to main page content. But the contents of the <aside> tag are related to the main page content.

Syntax of <aside> Tag

The general syntax of the lower <aside> tag is given below.

<aside>
// Other block level
</ aside>

<aside> is a block level element. In this tag you can use the second block level (<p>, <h1> etc.) and inline elements (<span>, <a> etc.).

Here, you can also apply CSS styles to the <aside> element.

                 aside
             {
                         position: fixed;
                         top: 20%;
                         left: 0;
                         background-color: #ccc;
                         color: white;
               }

As you can see in the syntax which is given above, the position property has been applied to the <aside> tag. Similarly, you can apply other properties on this tag and design it accordingly.

Attributes of <aside> Tag

There are no attributes available specifically for <aside> tags. You can also use all global attributes such as id and class with <aside>.

               <aside id = "author-profile">
             ....
             ....
               </aside>
             ....
             ....
              <aside id = "related-links">
             ....
             ....
              </aside>

Events Related to <aside> Tag

<aside> tag supports all event attributes of HTML such as onclick, onmouseover, etc.

             <aside onmouseover = "script-code">
            ....
            ....
             </aside>

How to use aside tag in html5?

Example of <aside> tag 



In the above example, Some links related to the content of the tag are represented as a sidebar by the <aside> tag. The <aside> tag is fixed by CSS, close to the content in the left. 

This script generates the output as below.


ASIDE-TAG-HTML5-EXAMPLE
ASIDE-TAG-HTML5-EXAMPLE
       


Previous:- How to use details tag in html5?

Next:- How to use figure tag in html5?

  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

5 comments:

  1. james johnOctober 11, 2019 at 5:31 PM

    The article was up to the point and described the information very effectively. Thanks to blog author for wonderful and informative post.
    website designing Pakistan

    ReplyDelete
    Replies
      Reply
  2. Arya SteveOctober 15, 2019 at 11:23 AM

    I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article.
    website development consultant

    ReplyDelete
    Replies
      Reply
  3. Insight Communication & DesignDecember 17, 2019 at 12:22 PM

    This blog is really helpful to deliver updated affairs over internet which is really appraisable. Brand Design

    ReplyDelete
    Replies
      Reply
  4. Insight Communication & DesignDecember 17, 2019 at 12:27 PM

    I found one successful example of this truth through this blog. I am going to use such information now. Packaging Design Perth

    ReplyDelete
    Replies
      Reply
  5. Insight Communication & DesignDecember 26, 2019 at 11:17 AM

    Several many thanks for share your blog website right here. Brand Design

    ReplyDelete
    Replies
      Reply
Add comment
Load more...

Thank you for reading this post. Please do not enter any spam link in the comment box.

Followers

Blog Archive

  • ►  2020 (4)
    • ►  October (1)
    • ►  September (1)
    • ►  August (2)
  • ►  2019 (52)
    • ►  December (1)
    • ►  November (2)
    • ►  October (1)
    • ►  August (1)
    • ►  July (1)
    • ►  May (11)
    • ►  April (10)
    • ►  March (6)
    • ►  February (3)
    • ►  January (16)
  • ▼  2018 (54)
    • ▼  December (27)
      • How to use html5 nav tag?
      • How to install Google Fonts on your Blogger Blog?
      • How to use section tag in html5?
      • How to use meter tag in html5?
      • How to use time tag in html5?
      • How to use header tag in HTML5?
      • How to use figure tag in html5?
      • How to use aside tag in html5?
      • How to use details Tag in HTML5?
      • How to use wbr tag in html5?
      • How to use article tag in HTML 5 ?
      • How to use menu tag in html?
      • How to use base tag in HTML?
      • How to use HTML hr and br Tag?
      • How to use HTML address tag?
      • How to use HTML Meta Tags?
      • How to use HTML script & noscript Tag?
      • How to use DOCTYPE declaration in HTML?
      • How to use Form Tag in HTML?
      • How to use Block and Inline Tags in HTML?
      • How to use Lists in HTML?
      • How to use Image Tag in HTML?
      • How to use Table Tag in HTML?
      • How to use anchor Tag in HTML?
      • How to Format & Style in HTML?
      • How to use Heading in HTML?
      • What is Attribute in HTML?
    • ►  November (5)
    • ►  May (5)
    • ►  April (4)
    • ►  February (3)
    • ►  January (10)
  • ►  2017 (17)
    • ►  December (9)
    • ►  November (8)

Popular Posts

  • How to use the main tag in html5?
  • How to use keygen tag in html5?
  • How to use html5 mark tag to highlight text?
  • How to start Online Business without money from home?
  • What is a search engine?

Contact Us

Name

Email *

Message *

About MyBlogHelp

Most of the posts, we share on this blog related to Affiliate Marketing, Organic Lead Generation, Digital Marketing, Social Media Marketing, Make Money Online, SEO, and web design.

Featured Post

LeadArk - Affiliate Marketing | Qualified Organic Lead Generation | LeadsArk Review

Copyright © MyBlogHelp– A Blog for Digital Marketing, Affiliate Marketing, Organic Lead Generation.
Design by Md. Abdussamad | MyBlogHelp.com