Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The address element has been around for a long time now, but has always been rather ill-defined. In HTML 4, the address element was described as an element that may be used by authors to supply contact information for a document or a major part of the document, like a form. Now, in HTML5, the element is defined in a little bit more detail. So again, here I am in the spec and I've navigated to the address element, and let's read a little bit more about it. First things first: let's take a look at the content model. Notice that you can put inside the address element any flow content, but no heading content descendents, no sectioning content descendents, and no header, footer, or address element descendents.
So it's basically saying you have to have a pretty flat structure inside the address element, even though you can put more than just one element in it. So if I scroll down to look at the description of it, it says, "The address element represents the contact information for its nearest article or body element ancestor." Now if that's the body element, then the contact information applies to the document as a whole. So you could, for example, supply address information for one article, another article, and then the entire body. That's a big change from HTML 4, when you really only had one address element per page.
So that's another big change. If I go down a little bit further, I can see that the address element must not-- now, not 'may not', but 'must not'--be used to represent arbitrary addresses like postal addresses, unless those addresses are in fact the relevant contact information. So it mentions how the paragraph element is the appropriate element for marking up postal addresses in general. The address element must also not contain information other than the contact information. Now, that's actually a little broader than you think. Notice that what they're showing you here in terms of a nonconforming use, inside this address element they have a last modified and then a date.
Well, obviously that has nothing to do with the contact information. However, you can have a much larger section where the contact information is addressed, and then use the address tag for that. So you can sort of mix and match it with other structural elements, and you'll notice here, typically the address element would be included, along with other information in a footer, for example. So here we have a footer, we have an address that says, "For more details," and then the person's contact info, and then some legal data after that. So basically, it's typically found in a footer, although it doesn't have to be, and it must contain the contact information of that particular document.
That could be an author, or it could be an organization, so either of those would work. Okay, so with all that in mind, let's go into our Trails document and see where the address element can help us. So here we're back in our Trails file, and this one you can find in the 05_07 folder. I'm just going to scroll down to our main article because that is the section of the page that I want to pass along some contact information. If I keep going down, all the way down into the footer, I can see that I have a paragraph that says, "About the author: Jeff Layton lives in Ventura, California with his wife," and notice that that also includes his contact data.
So this is the information where devices would pull the contact information of the author for that particular article. So this is perfect for the address element. So what I'm going to do is just change the paragraph element right here to an address element, and I'm going to be sure to do the same thing for the closing paragraph tag as well. Now, I'm going to go ahead and save this. Then I want to test this in a browser, just to see kind of how this is working out for me. So I'm going to preview this in a browser.
As I scroll down, I can see that that is not the way I wanted that to look, and that's not the way that it used to look either. So changing it from a paragraph tag to an address tag has had an adverse affect on my styles, and I find that a lot of times people just forget that they've even used the address tag. They'll use it because they know, okay, semantically I'm supposed to use this. Then they start styling things, and then they just sort of forget that they've used it at all. So you have to pay attention to the usage of tags like the address tag when you're doing your styling. All right! So I'm going to go back into my page, and I want to open up the main.css file.
Now, you can find that file in the 05_07_css directory. So here's my main CSS file, and just to save you a little bit of time, go ahead and scroll down to about line 195, somewhere around in that area. You can see, this is the selector that was driving our text, so section#trailReviews paragraph. Obviously, it's not a paragraph anymore. So what I'm going to do is instead of writing a totally separate selector, I'm just going to group these selectors together. So I'm going to type in a comma, and then I'm going to do section#trailReviews address.
So now I'll save that, go back into my HTML file, and once again test this in my browser. As I scroll down, now that content looks a lot more like I was expecting. So, the address element, it's another element that you might not need to use that often. However, for things like blog posts, articles, or sectional contact information, it allows you to properly identify the contact information pertaining to that content. Remember, now in HTML5, we can have as many of these as we need, but you can only have one per article or per section, so keep that in mind too.
All in all, quite a handy element to have when you need it!
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 104262 Viewers
56 Video lessons · 116197 Viewers
71 Video lessons · 85412 Viewers
131 Video lessons · 40895 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.