address ... ⁄address
HTML5 address element
The address element allows you to mark up contact information for the whole web page or for an article inside it as follows: »video
- - for the whole web page IF address's nearest ancestor is the body element:
examples case A: body is the nearest ancestor of the address element
→ address nested inside body
→ address nested inside footer, footer nested inside body
→ address nested inside blockquote, blockquote nested inside body
- for an article on that web page IF address's nearest ancestor is the article element:
examples case B: article is the nearest ancestor of the address element
→ address nested inside article, article nested inside body
→ address nested inside footer, footer nested inside article, article nested inside body
All of the above are illustrated in this »video tutorial !
About address
- is an optional element
- multiple address elements allowed per HTML5 document case B and only 1 preferred in case A
Display & support address
- display in browser »video
- display type: block
Parents, children address
- address nested within elements »address parents
- elements nested within address »address children
»examples
Attributes address
- required: none
- optional: global attributes, event attributes
Warning
- mark up the followings using the element only if they represent contact information for the web page ⁄article, otherwise don't!:
the name of the person ⁄organization responsible for that web page ⁄ or for that article, publisher's name, work department, the web site, the phone number, the fax number, the postal address, the email, YIM, MSN, SKYPE id contact...
It means that you can have for example postal addresses on your web page that don't represent contact information for that page ⁄article, in which case use element to mark them up!
e.g. <p>Joe Smith lives in CA, 22AY Sunset Boulevard, West Hollywood ..<⁄p>
The contact information mentioned above belongs to Joe Smith; he is not responsible for the article ⁄ web page → it doesn't represent contact information for the article ⁄web page, hence should not be marked up using the element.
Syntax address
| 1 | <> ... </> »video |
Attributes and Values address (comma separated)
| < | attribute | = | "attribute_value(s)" | > | Video | Examples |
|---|---|---|---|---|---|---|
| 1. specific attributes | ||||||
| All Specific Attributes | ||||||
| 2. global attributes | ||||||
| 1. | accesskey | = | keyboard key | »img | < accesskey="h"> ... </> | |
| 2. | class | = | class name | »html »img | < class="class_name"> ... </> | |
| 3. | contenteditable | = | "", , true, false | »html | < contenteditable="true"> ... </> | |
| 4. | contextmenu | = | menu id value | »html | < contextmenu="menu_id_value"> ... </> | |
| 5. | data-* | = | value | - | < data-http-error="404"> ... </> | |
| 6. | dir | = | ltr, rtl, auto | »html | < dir="ltr"> ... </> | |
| 7. | draggable | = | true, , false | »img | < draggable="false"> ... </> | |
| 8. | dropzone | = | copy, move, link, string:, file: | - | < dropzone="copy"> ... </> | |
| 9. | hidden | = | "", , hidden | »html »img | < hidden="hidden"> ... </> | |
| 10. | id | = | id name | »html »img | < id="unique_id_name"> ... </> | |
| 11. | itemid | = | URL | - | - | |
| 12. | itemprop | = | string | »link »a | - | |
| 13. | itemref | = | string | - | - | |
| 14. | itemscope | = | "", , itemscope | - | - | |
| 15. | itemtype | = | absolute URL | - | - | |
| 16. | lang | = | language code | »html »head»title »img | < lang="en"> ... </> | |
| 17. | spellcheck | = | "", , true, false | »html | < spellcheck="true"> ... </> | |
| 18. | style | = | CSS property:value | »html »img | < style="color:red"> ... </> | |
| 19. | tabindex | = | integer | »img | < tabindex="3"> ... </> | |
| 20. | title | = | text | »html »link»style »abbr»dfn »img »meter | < title="html page"> ... </> | |
| 21. | translate | = | "", yes, no | »html »img | < translate="yes"> ... </> | |
| All Global Attributes | ||||||
| 3. global event attributes | ||||||
| 1. | onclick | = | script | » list | <element onclick="script" > ... | |
| 2. | ondblclick | = | script | » list | <element ondblclick="script" > ... | |
| All Event Attributes | ||||||
Video demonstration address element
HTML5 address element: mark up contact information
| min | video details |
|---|---|
| 00:00 | video tutorial: address element |
| 00:05 | address element allows you to mark up contact information for the whole page or for an article of that page |
| 00:13 | Examples of contact information: |
| 00:13 | 1. contact information marked up with address element nested inside the footer of a section of an article element |
| 00:21 | 2. contact information marked up with address element nested inside the footer of an article element |
| 00:32 | 2. contact information marked up with address element nested inside the footer of the body element |
| 00:43 | usually the contact information (address) is part of the footer element (footer): address nested inside footer |
| 00:53 | but not necessary: address element can be placed straight on body element, or it can be nested inside elements other than footer or body; - see the list of elements that accepts the address element as child here |
| 01:01 | contact information may also represent simply an email for contact |
| 01:10 | Applicability: |
| 01:10 | A) if the nearest ancestor of the address element is the body element and not the article element, then the contact information applies to the whole web page |
| 01:25 | B) if the nearest ancestor of the address element is the article element and not the body element, then the contact information applies to that article only |
| 01:40 | B) the same, another example: (article is the nearest ancestor of the address): the contact information applies to that article only |
| 01:56 | contact information for the first article in page |
| 01:59 | contact information for the second article in page; yes, address element accepts img element inside = a picture of the person who's contact information we're giving; - see the list of elements that can be nested inside address element here |
| 02:03 | contact information for the whole web page |
For more information about the element, please see the specs: W3C ⁄ WHATWG