HTML Address Tag-HTML Tutorial-php.cn

The

tag is used to get contact details regarding the site owner or the article author. It may include address, telephone, email, website connection, and many more. The

tag is helpful for different contexts, including business contact information in the page header, or contact information relevant to the author, etc. Traditionally, browsers make as italicized text contained in the

tag. This tag is also usually referred to as the element of < address>. Usually, the < address > element will be included in a < footer > element along with other details. In no other way should it be used to identify addresses? In this topic, we are going to learn about HTML Address Tag.

Syntax

The syntax of the

tag will be written as shown below:

<html>
<body>
<address>
Contact Information:<br>
www.mycompany.com<br>
#12345, Main Street<br>
Name of City, Name of State
</address>
</body>
</html>

Copy after login

Attributes

Here are the following attributes mention below

1. Global Attributes

Global Attributes will be used to pertain to attributes that are used on any HTML element. Such attributes are prevalent across all HTML elements.

accesskey: It defines the shortcut key for activating the element.
class: It gives the class names for an element.
contenteditable: It is used to indicate whether an element can be edit or not.
dir: It is used to define the text direction of an element.
draggable: It defines how the element can be dragged on the page.
dropzone: It is used to indicate whether data can be copied, moved, or linked when it is connected.
id: It defines the specific id for the element.
lang: It defines the language for the element’s content.
style: It provides the CSS style for the element.
tabindex: It is used to define tabbing order for the element.
title: It is used to provide additional information for the element.
translate: It indicates whether the content of the element can be translated or not.
spellcheck: It defines the spelling check for the content of an element.
data: It is used to exchange private data between HTML and DOM depiction.
hidden: This attribute is used when there is a need to hide the elements

2. Event attributes

An event occurs whenever a browser responds to the intervention of a specific user. When a user clicks on a mouse, uploads a document or a picture, plays a video or performs any other activity on a webpage.

3. Windows Event attributes

Window event attributes are used when window objects are initiated.

onafterprint: It is used when the document needs to be printed.
onbeforeprint: It is executed before when the document needs to be printed.
onbeforeload: It is used when the document will be unloaded.
onblur: This attribute will be defined when there is no focus from the window.
onerror: It is defined when there is an error while downloading the document.
onload: It is specified when webpage content is loaded.
onmessage: It is used when there is a cause in a message.
onoffline: This attribute will be used when the browser works during offline mode.
ononline: This attribute will be used when the browser works during online mode.
onpagehide: It is specified when the user moves away from the webpage.
onpageshow: It is specified when the user navigates to the webpage.
onpopstate: This attribute will be used when there is a change in window history.
onredo: It is used when there is a redo option on a page.
onresize: It is specified when the user resizes the window.
onstorage: It is defined when there is an update in web storage.
onundo: It is used when there is an undo option that is canceled.
onunload: It is specified when webpage content is unloaded.

4. Form Event Attributes

An event that can take place within a form is considered an event in the process. The form events occur when a user opens or closes a form, switches between forms, or operates on a form with data.

onblur: This attribute will be defined when there is no focus on the form element.
onchange: It is defined when there is a change in the value of an element.
oncontextmenu: It is used when the user wants to see the context menu.
onfocus: It is used when an element gets a focus.
oninput: It is used when an element gets input from the user.
oninvalid: It is specified when there is an invalid element on a page.
onreset: This attribute will be used when a user wants to reset the form.
onsearch: It is defined when the user searches for some information in the search field.
onselect: It is used when the user selects the text in an element.
onsubmit: It is used when the user submits the form.

Examples of implementing HTML address Tag

Here are the following examples mention below

Example #1

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>
HTML Address Tag
</title>
</head>
<body>
<article>
<h2>This is Heading Title</h2>
<p>Information about article will be written here...</p>
</article>
<footer>
<address>
Contact Address:<br>
mycompany.com<br>
#987 5th Main, 10th Cross<br>
XYZ road<br>
New Delhi, India
</address>
</footer>
</body>
</html>

Copy after login

Output:

Save the above code in a file with a .html extension
Run the html file in a browser, and you would get the output as shown in the below image

HTML Address Tag

Example #2 – Color property

Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>
HTML Address Tag
</title>
<style>
.color_prop {
color: #1c87c9;
}
</style>
</head>
<body>
<article>
<h2>This is Heading Title</h2>
<p>Information about article will be written here...</p>
</article>
<footer>
<address>
<p class="color_prop">Contact Address:</p>
mycompany.com<br>
#987 5th Main, 10th Cross<br>
XYZ road<br>
New Delhi, India
</address>
</footer>
</body>
</html>

Copy after login

Output:

Run the above file in a browser, and you would get the output as shown in the below image:

HTML Address Tag

Example #3 – Background Color Property

Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>
HTML Address Tag
</title>
<style>
.color_prop {
background-color: #1c87c9;
}
</style>
</head>
<body>
<article>
<h2>This is Heading Title</h2>
<p>Information about article will be written here...</p>
</article>
<footer>
<address>
<div class="color_prop">Contact Address:<br>
mycompany.com<br>
#987 5th Main, 10th Cross<br>
XYZ road<br>
New Delhi, India
</div>
</address>
</footer>
</body>
</html>

Copy after login

Output:

Run the above file in a browser, and you would get the output as shown in the below image:

HTML Address Tag

Example #4 – Text Decoration

Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>
HTML Address Tag
</title>
<style>
.style1 {
text-decoration: underline;
}
.style2 {
text-decoration: italic;
}
</style>
</head>
<body>
<article>
<h2>This is Heading Title</h2>
<p>Information about article will be written here...</p>
</article>
<footer>
<address>
<p class="style1">Contact Address:</p>
<p class="style2">mycompany.com</p>
#987 5th Main, 10th Cross<br>
XYZ road<br>
New Delhi, India
</div>
</address>
</footer>
</body>
</html>

Copy after login

Output:

Run the above file in a browser, and you would get the output as shown in the below image:

HTML Address Tag

Example #5 – CSS Fonts

Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>
HTML Address Tag
</title>
<style>
.style1 {
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.style2 {
font-weight: bolder;
}
</style>
</head>
<body>
<article>
<h2>This is Heading Title</h2>
<p>Information about article will be written here...</p>
</article>
<footer>
<address>
<p class="style1">Contact Address:</p>
<p class="style2">mycompany.com</p>
#987 5th Main, 10th Cross<br>
XYZ road<br>
New Delhi, India
</div>
</address>
</footer>
</body>
</html>

Copy after login

Output:

Run the above file in a browser, and you would get the output as shown in the below image:

HTML Address Tag

Example #6 – Text Shadow

Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>
HTML Address Tag
</title>
<style>
.style1 {
text-shadow: 2px 2px #1c87c9;
}
</style>
</head>
<body>
<article>
<h2>This is Heading Title</h2>
<p>Information about article will be written here...</p>
</article>
<footer>
<address>
<p class="style1">Contact Address:</p>
mycompany.com<br>
#987 5th Main, 10th Cross<br>
XYZ road<br>
New Delhi, India
</div>
</address>
</footer>
</body>
</html>

Copy after login

Output:

Run the above file in a browser, and you would get the output as shown in the below image:

HTML Address Tag

Example #7 – Line Height

Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>
HTML Address Tag
</title>
<style>
.color_prop {
line-height: 2.0;
}
</style>
</head>
<body>
<article>
<h2>This is Heading Title</h2>
<p>Information about article will be written here...</p>
</article>
<footer>
<address>
<div class="color_prop">Contact Address:<br>
mycompany.com<br>
#987 5th Main, 10th Cross<br>
XYZ road<br>
New Delhi, India
</div>
</address>
</footer>
</body>
</html>

Copy after login

Output:

Run the above file in a browser, and you would get the output as shown in the below image:

HTML Address Tag

Conclusion

So far, we have studied how to address tag will be used when an owner wants to specify the address information. In order to quickly contact the author via email, this feature is often combined with the HTML mailto property. The address tag will usually be included in the section < footer> section.

The above is the detailed content of HTML Address Tag. For more information, please follow other related articles on the PHP Chinese website!