-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
138 lines (115 loc) · 5.5 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
---
title: "<address>: The Contact Address element"
slug: Web/HTML/Element/address
page-type: html-element
browser-compat: html.elements.address
---
{{HTMLSidebar}}
The **`<address>`** [HTML](/en-US/docs/Web/HTML) element indicates that the enclosed HTML provides contact information for a person or people, or for an organization.
{{EmbedInteractiveExample("pages/tabbed/address.html", "tabbed-standard")}}
The contact information provided by an `<address>` element's contents can take whatever form is appropriate for the context, and may include any type of contact information that is needed, such as a physical address, URL, email address, phone number, social media handle, geographic coordinates, and so forth. The `<address>` element should include the name of the person, people, or organization to which the contact information refers.
`<address>` can be used in a variety of contexts, such as providing a business's contact information in the page header, or indicating the author of an article by including an `<address>` element within the {{HTMLElement("article")}}.
## Attributes
This element only includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
## Usage notes
- The `<address>` element can only be used to represent the contact information for its nearest {{HTMLElement("article")}} or {{HTMLElement("body")}} element ancestor.
- This element should not contain more information than the contact information, like a publication date (which belongs in a {{HTMLElement("time")}} element).
- Typically an `<address>` element can be placed inside the {{HTMLElement("footer")}} element of the current section, if any.
## Examples
This example demonstrates the use of `<address>` to demarcate the contact information for an article's author.
```html
<address>
You can contact author at
<a href="http://www.example.com/contact">www.example.com</a>.<br />
If you see any bugs, please
<a href="mailto:webmaster@example.com">contact webmaster</a>.<br />
You may also want to visit us:<br />
Mozilla Foundation<br />
331 E Evelyn Ave<br />
Mountain View, CA 94041<br />
USA
</address>
```
### Result
{{EmbedLiveSample("Examples", "300", "200")}}
Although it renders text with the same default styling as the {{HTMLElement("i")}} or {{HTMLElement("em")}} elements, it is more appropriate to use `<address>` when dealing with contact information, as it conveys additional semantic information.
## Technical summary
<table class="properties">
<tbody>
<tr>
<th scope="row">
<a href="/en-US/docs/Web/HTML/Content_categories"
>Content categories</a
>
</th>
<td>
<a href="/en-US/docs/Web/HTML/Content_categories#flow_content"
>Flow content</a
>, palpable content.
</td>
</tr>
<tr>
<th scope="row">Permitted content</th>
<td>
<a href="/en-US/docs/Web/HTML/Content_categories#flow_content"
>Flow content</a
>, but with no nested <code><address></code> element, no heading
content ({{HTMLElement("hgroup")}}, {{HTMLElement("Heading_Elements", "h1")}},
{{HTMLElement("Heading_Elements", "h2")}}, {{HTMLElement("Heading_Elements", "h3")}},
{{HTMLElement("Heading_Elements", "h4")}}, {{HTMLElement("Heading_Elements", "h5")}},
{{HTMLElement("Heading_Elements", "h6")}}), no sectioning content
({{HTMLElement("article")}}, {{HTMLElement("aside")}},
{{HTMLElement("section")}}, {{HTMLElement("nav")}}), and
no {{HTMLElement("header")}} or {{HTMLElement("footer")}}
element.
</td>
</tr>
<tr>
<th scope="row">Tag omission</th>
<td>None, both the starting and ending tag are mandatory.</td>
</tr>
<tr>
<th scope="row">Permitted parents</th>
<td>
Any element that accepts
<a href="/en-US/docs/Web/HTML/Content_categories#flow_content"
>flow content</a
>, but always excluding <code><address></code> elements (according
to the logical principle of symmetry, if
<code><address></code> tag, as a parent, can not have nested
<code><address></code> element, then the same
<code><address></code> content can not have
<code><address></code> tag as its parent).
</td>
</tr>
<tr>
<th scope="row">Implicit ARIA role</th>
<td>
<code
><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/group_role"
>group</a
></code
>
</td>
</tr>
<tr>
<th scope="row">Permitted ARIA roles</th>
<td>Any</td>
</tr>
<tr>
<th scope="row">DOM interface</th>
<td>
{{domxref("HTMLElement")}} Prior to Gecko 2.0 (Firefox 4),
Gecko implemented this element using the
{{domxref("HTMLSpanElement")}} interface
</td>
</tr>
</tbody>
</table>
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- Others section-related elements: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("Heading_Elements", "h1")}}, {{HTMLElement("Heading_Elements", "h2")}}, {{HTMLElement("Heading_Elements", "h3")}}, {{HTMLElement("Heading_Elements", "h4")}}, {{HTMLElement("Heading_Elements", "h5")}}, {{HTMLElement("Heading_Elements", "h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}};
- [Sections and outlines of an HTML document](/en-US/docs/Web/HTML/Element/Heading_Elements).