How to properly format the <address> element on my website to display our company's contact information

While developing a website with asp.net mvc-5, it's important to include our company's contact details like telephone, email, and postal address. That's why I utilized the <address> tag within our "Contact US" page, replacing actual information with ***:

<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-4 address">
    <h2>Addresses</h2>
    <address>
      <div class="info">
        <p><span class="footercolor">Telephone: </span><span>+******</span></p>
        <p><span class="footercolor">FAX: </span><span class="marginfax">+*****</span></p>
        <p class="mainaddress">3rd Floor, Bldg. 1(....),<br />... Str. .CityName</p>
        <p><span class="footercolor">P</span>.<span class="footercolor">O</span>.<span class="footercolor">Box: </span><span>*****,**** 1212,CountryName</span></p>
        <p><span class="footercolor">Email:</span><span> <a href="mailto:info@****.com " target="_top">info@*****.com</a></span></p>
      </div>
    </address>
  </div>

I have a few inquiries regarding the use of the <address> tag:

  • In this source, they indicate that the Tip: The <address> tag should NOT be used to describe a postal address, unless it is part of the contact information.. Why shouldn't I include the postal address in the <address> tag?

  • Is the <address> tag the appropriate method for displaying our company's contact details, or should it be reserved for providing information about the web site owner, such as creator identification and date of creation?

  • What are the benefits of utilizing the <address> tag for contact information compared to simply placing it within a basic <div> or <p> tag?

csshtmldomweb

Answer №1

When to Utilize the Address Tag

The W3C states that an address element should be used for contact information within a document. If the address is specific to a section of the document, then it represents contact details relevant only to that particular section.

In essence, the address tag is reserved for conveying contact information. It is important to include all relevant contact details within the address block, such as phone numbers, postal addresses, and emails if applicable.

Situations Where the Address Tag Should Not Be Used

If the content within the address block does not pertain to contact information, then the address tag should not be used. For example, in a real estate website listing, the physical address of a property should not be included in the address block. However, the contact information for the real estate agent would be considered suitable for inclusion.

Benefits of Using the Address Tag

HTML aims to provide semantic meaning to content. The use of the address tag offers more context compared to generic elements like div or p. According to the W3C, authors are advised to avoid using div elements unless absolutely necessary, as incorporating more meaningful elements enhances accessibility and maintainability.

Valid Content Within an Address Tag

It is acceptable to have divs and paragraphs within the address block. Per guidelines from Mozilla's developer documentation, allowable content within the address tag includes flow content but excludes certain nested elements and heading/content.

tl;dr: Enhance your code for better readability. As for utilizing the address tag, you're on the right track!

Answer №2

For additional insights, check out this reference on address formatting

The benefits of using semantic markup include increased search engine optimization.

Just a heads up, there seems to be an excess of unnecessary span tags in the provided sample - consider removing some for cleaner code.

Answer №3

Allow me to address all of your inquiries :), please keep in mind I'm not an expert in HTML so I may not have all the answers.

In a link provided, it was mentioned that the <address> tag should not be used for postal addresses unless it is part of contact information. So why shouldn't the postal address be included within the <address> tag?

Ultimately, you can include whatever you desire, so if you want to add the postal code, go ahead. There are no strict rules about what you can or cannot do.

Is using the <address> tag the appropriate method for providing our company's contact details as I am currently doing? Or should it be reserved for details about the website owner like who created the site and when?

I don't believe there is a 'right' way to use the <address> tag, as it can be utilized for various purposes according to your preference.

What benefits does placing contact info inside the <address> tag offer compared to writing it within a simple <div> or <p>?

, he explains it quite well, especially regarding making it more accessible for Search Engines such as Google.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Conceal the object, while revealing a void in its place

Is there a way to hide an image but keep the containing div blank with the same dimensions? I want it to appear as if no content was there, maintaining the original width and height. For example: http://jsfiddle.net/rJuWL/1/ After hiding, "Second!" appea ...

javascriptjquerycsshtml

What could be causing my anchored link to redirect incorrectly?

My navigation bar correctly directs me to the 'work' section, but when I click on ABOUT in the navigation bar, it drops down about 300px above the 'about' h2. I suspect that this issue may be related to positioning and display settings. ...

csshtmlposition

Is there a child missing? If so, add a class

I need to add the class span.toggle if the parent element of li does not have a child ul element. click here to view on codepen Snippet of HTML: <html lang="en"> <head> <meta charset="UTF-8> <title>No Title</title>& ...

javascriptjqueryhtmlcss

Troubleshooting issues with adding child elements in JavaScript

Styling with CSS: ul #allposts li{ height: 50px; width: 50px; background-color: yellow; border: 1px solid yellow; } Creating HTML structure: <ul id = "allposts"></ul> Adding JavaScript functionality: var container = documen ...

javascripthtmlcssappendchild

Creating a Date Computation Tool that Adds Additional Days to a Given Date

I have a challenge where Date 0 represents the start date, Date 1 is the result date after adding a certain number of days (NDays). I am looking for help in JavaScript to calculate Date0 + NDays = Date1. Please assist me as my coding knowledge is quite l ...

javascripthtml

rearranging items from one list to another list

I've encountered an issue in my HTML code that I need help with. I have included some classes for clarity, but their specific names are not essential. My goal is to make the "sub-nav" element a child of the "mobile parent" list item on mobile devices. ...

javascripthtml

Exploring the world of JSON on the internet

Hello there! I'm currently working on a project similar to . However, I am facing difficulties when integrating my code with a discord bot. I am questioning whether it is possible to host JSON data online directly with the code snippet below: documen ...

javascripthtmljsondiscord.js

Calculate the total count of responses within the JSON data returned

Hello all, I need some guidance on calculating the total number of responses in a JSON response that adhere to a specific rule using JavaScript. Here is the JSON response that I am discussing: [ { "InvoiceNumber":"INV0319", "InvoiceOrd ...

javascripthtmljsonapirest

Angular's jQuery timepicker allows users to easily select a

Transitioning from jQuery to Angular, we previously utilized the for selecting times due to Firefox not supporting HTML5 input time. While searching for a similar timepicker plugin for Angular to maintain consistency with our past data and styles, I came ...

javascriptjqueryangularjshtml

Eliminate border around image

I've been trying to get rid of the image border using different methods img { border: 0px; } I even attempted to remove it from the browser console with this code border: none !important This is what my html code looks like <div id="startD ...

htmlcss

Automating Check Box Selection with Xpath in VBA using Selenium

Having trouble identifying the correct checkbox to tick. I'm struggling with the xpath. <div class="custom-control custom-checkbox" style="display: inline-block;"> <input name="PriceRealization" class="custom-control-input" id="check-7012949 ...

htmlselenium

Ways to make Joomla! send emails in HTML format

I am knowledgeable about using Joomla! with phpMailer for sending emails. I understand that in order to send emails in HTML format, the following code must be used: $mailer->isHTML(true); However, this approach requires editing the source code of defa ...

phphtmlemailjoomlaphpmailer

Styling the navigation bar using CSS

Currently working on establishing a top menu bar similar to StackOverflow, but with a fixed position for my webpage. Check out the JSFIDDLE Demo here Encountering extra space on the left and top of the menu bar. Seeking advice on how to eliminate this ex ...

htmlcssmenu

Looking to prevent horizontal scrolling on smartphones in an HTML webview - how can I do this?

Currently, I am dealing with a webview and encountering some peculiar behavior. The overflow-x property is set to hidden, which works perfectly on browsers. However, when accessed on a mobile device, the overflow seems to be ignored completely. Here is t ...

htmlcsswebview

Creating a Form with HTML and CSS

I am currently working on setting up a banner that includes an overlay with a cutout. Beneath the overlay, there is an image. My goal is to create this design using HTML and CSS. I have been experimenting with pseudo-elements but I am having difficulty re ...

htmlcsspseudo-element

Retrieve main page elements from an additional page called PageSlide

I have implemented the jquery PageSlide plugin as a menu feature on my website. The plugin opens a separate page on the side of the main page to function as a menu. However, I am facing a challenge in accessing the main page's elements from this side ...

javascriptjqueryhtmlcss

Executing a post request asynchronously and storing the retrieved data into a variable

Currently, I am in the process of learning AngularJS and attempting to upgrade my current method of fetching data from a web service and dynamically assigning it to a variable that is binded using ng-repeat. My main objective is to implement an asynchronou ...

jqueryhtmlangularjsajax

Tips for ensuring consistent sizing of card items using flexbox CSS

I'm attempting to create a list with consistent item sizes, regardless of the content inside each card. I have experimented with the following CSS: .GridContainer { display: flex; flex-wrap: wrap; justify-content: space-around; align-item ...

htmlcssreactjs

Unraveling and interpreting all incoming requests to my Node.js application

Looking for a simple method to identify and decipher all encoded characters in every URL received by my Node.js application? Is it possible to achieve this using a middleware that can retrieve and decode symbols such as & ? ...

javascripthtmlnode.jsexpress

The updated values in an Angular application may not always be accurately represented by interpolated values

The values of the elements in the dropzone1 array only show the initial top and left values, not the latest ones. Within the draw() function, I add the top and left values to the topLeft array and then push it to the dropzone1 array inside the move() func ...

javascripthtmlangulartypescript