Here is our third lesson of HTML5 Tutorial courses.In this post we will discuss about Asides tag and Detail tag.So let’s start.
Html5 Tutorial – Lesson 3
The most obvious use for the aside tag is when you wanna replace the sidebar and this is a perfect situation when you could use a side.So the idea behind aside tag,we take a look at this speck is a represents a section of a page that consists of content that is directly related to the content around the side.So its content that’s not one-hundred-percent applicable but its still related to it.So the most obvious you still see is a sidebar of your website and this is a page sidebar.
Maybe you have some sponsor information maybe you have an additional set of sub navigation in here.You can replace this with an aside tag. And that will work because the sidebar is tangentially related to the rest of the website the rest of the content.But that’s not the only use for it. If we refer back to the spec and scroll down.
But then they also had may be a little popout to the side where they give you a little bit of history about Switzerland.In the case of this example in that case decide makes sense because the history of Switzerland is not 100% related to the news item but it still tangently related. So an easy way to think about this again is if you go back to news papers if there is a section may be where you would have a call out in a posting.That is not be free quote tool use a block quote for that.But if there’s additional maybe something with a heading like did you know that could be placed within a side because it’s not entirely related what is tangently related.
So when you send these on your own project, the best advice I can give is just use your best judgment nothing’s going to happen the world will not end if you incorrectly use an aside tag.You can always go back and change it later but that said when you do use it make sure that you can justify it in your mind why am I using this aside tag instead of a div or a section.In the answer should always be because this content is tangently related to the main content.
So here is very sloppy way that you would do it with JeQuery.
So I make up your own mind on that one.All right get rid of all of thisbecause we are going to do it with simple HTML.And to do this let’s wrap our content within the new details tag.What’s that about this is a will simply ignore it.So you don’t have to worry too much about it. is he will see the definition or the content display their rather than hidden in the page load.Now we have our summary and the summary tag,this is your heading and this is what the the user will see.Ans then when I click on it it will show the content after the summary.
Now one issue that often comes out is what if I want style that arrow tag because it’s one of those invisible features hasn’t how would you target that you might think- okay we’ll set the color maybe on summary tag.But let’s open up the inspector and if I click on the sparrow you can see it doesn’t really seem like there an easy way for me to target that.I click on details how do I target that where are some ways by using extensions in what we refer to it as is WebKit details marker.So you would want to replace that with Mazda’s details marker accordingly.It’s not ideal,is it? I worry about that a little bit it’s getting hard to style the features.Though for the time being if you want to style the arrow maybe you wanted a different colour,you would preference summary and then WebKit details marker and then maybe I could set the color to green and if I come back and reload now can you see that arrow is now Green.
It’s not ideal but it’s helpful to have this baked into the browser.But I do not like the idea that it is too much more difficult to have control over that.So the last thing for this lesson is let’s repeat ourselves just a bit I am gonna remove the last two li tag and copy the first li tag a couple of times.And again remember you don’t have to place the details within the list items.Now we can specify the fault state.So if we want to see open that means these two will only show who goes to college but the one that’s open we’ll show that content after the summary as well because it’s in an open state.Now can you see your second one we can see it but not on any other and then it’s still the same type of functionality that you might be used to.
That’s all For lesson 3..In our lesson We will talk about the HTML5 Shim and the Figures tag.