This is our second lesson of HTML5 Tutorial courses.In our first lesson we told you about the doctype and HTML Document.In this lesson we will discuss about the header,footer,navigation,Section and Article.So let’s start..
Html5 Tutorial – Lesson 2
In today’s lesson I like to show you some of the new html5 elements.So now again we are using a nice HTML template but still using some tags that can be replaced for more Symantec inappropriate element.So the first step is we come to the div with an id of container.To notice we have id container,id header,id main and id footer.
This is something that’s quickly falling out of favour because when we’re working in CSS there’s a certain weight or specificity that is applied to an id.So it means is if you ever been in your style sheet and you find yourself doing things like body, container, header because you’re desperately trying to override some styling that look like before.And you just keep applying more weight trial and there’s just so much weight there that you have to overpower it with other id so much.
I want you to try getting the habit of using classes for most of these.And its still okay to use them.But you only use your id when you need that extra power maybe you’ll make your writing id container supply energy to the body or the HTML element.
Next we come to div class header.A few years ago and what they found was of the most commonly used id and classes the ones were very top of the list.So what they decided to do was to create html5 elements that we can use instead.That way it describes two trials Green reader to any user exactly what that section is.And it’s safe to say the least with the element makes so and then we are simple as that cleaner more this trial.
Next we’re going to come all the way down to div class calls footer and once again one of the most commonly used id or class name are footer.So we’re instead going to use the footer tag.Now it’s important to note though while we are using header and footer as the page header and footer they’re not limited to that and not limited to one usage to.Think about it maybe you have a blog posting and for the blog posting you have the title and maybe some social information about the post.When it was published what category is in. All of that information could also go within a header because it’s the header of the blog posting.The same is true for the footer.So try not to get into the habit of thinking header and footer it’s only for the page header and page footer.
Now we’re going to come to the main section and you might be thinking there’s going to be a main element in there really isn’t in the reason why it hasn’t been added.Some people think it should other people think it’s implied that this is the main sections simply by the fact that it is not the header and not the footer.It’s got to be the main section.So whatever the reason why it was not included you can still use this div here and that’s in a transaction to make.Html5 does not mean you never use a div tag again.What it does mean though is don’t use a div tag if there is a better tag for the job and that’s always been true.
So when you need a div for positioning or layout that’s perfectly fine.But if you can use a different tag or one of the new html5 tags and that’s more appropriate then incorrectly using active.Now we’re going to keep that a way now I’ll give you one tip and we’re not going to go into this too much yet but there’s something on my area and this is a way to make sure that our websites are as successful as possible specifically things like screen readers and so there are ways where we can apply for roles to our elements that provide more description as to what they are known the truth is html5 has removed the need for a lot of these roles.But there is a row called main and not just provides a little bit more description which also need about this is if you want you can get rid of the class entirely.
So now we are providing is much accessibility is possible because we are describing where are main section is.And then you can also use that as a hook with in your CSS.So I can say div across Maine dry and then we could say color is red and now you have another hook you can use and you don’t have to rely on ids or classes.
Next let’s take a look at this unorder list in this is obviously the navigation for our website and you’re probably used to doing something like id call snacks.Well you have learned try not to use id Chester used to stick with class but also it is very difficult for a screen reader to determine where your navigation section is.
You could say well look for the element with an id of nav and that’s always going to be the navigation.Well that’s true but not everyone will do at the same way not everyone is going to mark up the navigation the same way.Some people may use string of anchor tag.Some people might apply classic navigation.So it’s better if we have 1 elements that describes where are main navigation section is.
Now we can use nav. When I first learn this I thought oaky I can just nest list items because the nav accepts list items.No,the Nav still needs to wrap the ul.So I’m going to bring that back in and now that’s more appropriate.So you might be thinking though I add more markup we had the Ul or not replacing it with adding more on and yes this is true but always remember your mark is about describing your content as bestest possible.So for accessibility reasons and screen readers.
In this is why you want to be a little careful don’t always place a list of links within an app element that’s not what it’s for.You want a navigation your main navigation and maybe if you have sub navigation for your website.Anything else don’t use in nav element because then I imagine if you have 10 nav elements on the page what we’re back at square one can wear the screen reader has no idea which one is specifically the main site navigatio.Well this is gonna do it for this lesson we’ve covered.When you need to use header element,footer element little bit conscious about the roll.
Here we’re going to take a look at section and article elements.And you won’t be penalized if this is confusing to you.To be honest people still having trouble figuring out when would use the article and when would use the section element.So let me see if I can decipher some of this for you going to visit the spec this should always be your first spot when your trying to decipher some of the new html tag.And we can go to (what wt.org.)and we can see right here section element represents a generic section of the document or application.A section in this context is a mattock group of contents typically with a heading.
Now we had this footer area and this is where we’re going to happen if the four columns and you have seen this with lots of portfolios where you have a list of tweets some recent posts,categories maybe some contact information.
So it makes sense that when you’re using the section element there should always be a heading associated with it.This is helpful because when you use a section there is a distinct connection between the heading in the content that follows it. So may be the easiest way to understand the section element is by what you would normally be may be a sections of a newspaper.
So you have a sports section you have an entertainment section.Each of those would be placed with their own section because they have their own related heading and thematically related contact.If I scrole up,another situation when we could use section.So we have with a blog posting will get to all that but then maybe below on the page you have a few extra may be a book you are working on.
This is where you could use a sectional method and its important to note that the section should not be use for styling purposes.So if you need to wrap it with in a section for the sole purpose of styling it and you’re not doing it correctly.In that case you would want to use a div.But here perfect section makes perfect sense.So I will wrap each 1 and part in them so fix it shortly.So now notice that were used in this section elements we are not relying on them because we need to style anything specifically we’re doing it because it create separation and it creates a connection between the heading within in the continent.It is section chapter 1,this section is chapter 2 in this section is chapter 3.
Now also we can use heading 1 tag.If I return back to the speck in a notice of section means that the author can use h1 elements to route without having to worry about whether a particular section is at the top level and that’s because when the sickness included it’s heading will be interpreted as the next level down of its parent having.
That’s definetly confusing but it makes a little more sense if you think about it we use things like outlines a paper outline to compare is how we would do it on the web.So if you had an outline you would have the top level in that would be maybe what your assignment is.Then you have a headings below it that would represent and what you’re going to speak about.But the problem is that doesn’t 100 percent convert over to the web because lots of time we don’t really have control over the headings.
So maybe you’re pulling in a list of facebook status messages and some tweets and not heading has already been predefined and you cannot change it because your dynamically pulling that end.So they can kind of money do with a little bit.So the section can help solve this because if you wrap the with an section elements then you can use h1 and that will automatically represent a specific level in the hierarchy.
With that in mind I could then select this h3 and switch them over h1.So this brings in a new question though is if we have all of these h1 how can we style of them independently of maybe the h1 of top level page.So within your CSS file you have situations where you have section h1 potentially section h1 this could get really confusing and will made-up your style sheets.A one thing a lot of people do if you come into this situation where you need to sell this differently remember you should not use the section for that purpose.So we could do though is you can apply a class to be sectioned.You’ll see some book I recommends you do things like Alpha Omega beta while others recommend just keep it simple and class equals h1 or something like that and that way within yourself that you can target each specifically without having any problem.Let’s scrole up a bit and we come to the article section and it’s obviously be a blog you have blog posting wrap it in a div with a class of article here start title, met information and then posting for short.
Really the idea behind the article element is that it should represent content that could potentially be syndicated.
So what you can think of is blog postings could always be syndicated so you will want to wrap those within articles.But then also think of things like comments.Each comment could be syndicated as well as you could have a feed for comments.So in those cases you would also want to write each comment within an article as well so I don’t think you spell you don’t immediately okay the article elements for the article of my blog posting or the news item.
There is so many different uses for them.Next within the article because we do have some information for the header we could wrap that within a header tag as well.Next if you had me be social networking links to share that was trying to put that depending on the situation you could put that within a footer or I might be more inclined to place that within an asside element.We take a look at the asside tag in the next lesson.I want you to take a look what we have here in the footer.Whether or not we could use section elements or article element. Comes down to a few things one, will this content have a heading associated with it.So if it will lots of time you can get away in this section.
The idea behind the section is the medically related content.Two, its only purpose for wrapping your content within a tag or is for styling purposes then that is exactly what the div is for.So never use the section with the intention of.I am gonna wrap this with an section so i can style this.
I know you probably won’t use a div tag for that.You would only use section as I noted here when the styling isn’t the issue,it’s separating the content.On this case with the footer honestly it’s okay to keep it with a div.In my situation I might use a section,I might not.Again it just depends on how I intend to use this content.Now will this be syndicated,maybe you could Indicate this section or maybe you could use an article there. In this is what you’re going to find is were also trying to figure out when the ideal time start to use an article or a div or a section.So don’t feel that I struggle with it to myself if I’m honest.But for now let’s keep it as a div because I want you to remember just because you’re with html5 doesn’t mean you’re never using a div again and div absolutely has a purpose.Many times it’s just more for positioning and styling sake.And when there’s not a better tag for the job okay and that’s going to do it for this episode in the next lesson I’m going to teach you about a side tags.
That’s all for this Lesson.Connect with us for our next lesson.