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
1.6:Asides
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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
1.7:Detail:
Likely at one point or another you found yourself building maybe a sort of a quarry in or maybe a frequently asked questions section where you have all of the headings and then when I click on them it will show the answer and we use JavaScript or maybe you use some jQuery to do this.And it troggle every time you click.
Image may be NSFW.
Clik here to view.
So here is very sloppy way that you would do it with JeQuery.
Image may be NSFW.
Clik here to view.
But the html5 they give us the ability to a big this into the browser.Now it should bring up a lot of people feel that were infringed upon what she’d done with JavaScript.They feel Pats doing something like this with HTML that’s not what it’s for that’s the purpose of JavaScript.HTML should be focused on different things.You know what I can see it from both sides but I also see it from the vantage point of this is something that we do all the time and if it makes it easier who really cares if its 100% the job of a HTML,it allows us to get the job done much more quickly and without depending upon JavaScript.
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.
But now when I click on it you can see that it toggles in the arrow.Accordingly isn’t that need something that we would have had to use javascript for a week and now they can the browser and then again in the older browsers like Internet Explorer will simply just look like this without the arrow.
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.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
And then you can go ahead and style these however you want.So make up your own mind on what you think of this this is the fun part of html5 is making up your own mind to use think this fits in html5 do you think effects like this should be accomplished with JavaScript it’s up to you.
That’s all For lesson 3..In our lesson We will talk about the HTML5 Shim and the Figures tag.
The post Html5 Tutorial – Lesson 3 appeared first on DevsTrend.