Mastering HTML Contact Information

Introduction

In web development, the <address> tag is used to display contact information on a webpage. It is used to indicate the details of the author, organization or company that is publishing the webpage, document, or article.

In this lab, we will create a simple webpage and use the <address> tag to display contact information at the bottom of the page.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/nav_links("`Navigation and Links`") subgraph Lab Skills html/basic_elems -.-> lab-70701{{"`HTML Contact Information`"}} html/head_elems -.-> lab-70701{{"`HTML Contact Information`"}} html/text_head -.-> lab-70701{{"`HTML Contact Information`"}} html/para_br -.-> lab-70701{{"`HTML Contact Information`"}} html/layout -.-> lab-70701{{"`HTML Contact Information`"}} html/nav_links -.-> lab-70701{{"`HTML Contact Information`"}} end

Create a basic HTML template

Create an HTML file named index.html and open it in a code editor.

Add the basic HTML template code to the file:

<!doctype html>
<html>
  <head>
    <title>Contact Information</title>
  </head>
  <body></body>
</html>

Add a heading and a paragraph

Add a heading and a paragraph to give a brief introduction or summary about the page.

<h1>Contact Information</h1>
<p>Welcome to my webpage. This webpage contains contact information.</p>

Add contact information

Create a section for contact information and place the <address> tag within the section. Add the relevant contact information between the opening and closing <address> tags. For example:

<section>
  <h2>Contact Details</h2>
  <address>
    <p>John Doe</p>
    <p>
      123 Main Street <br />
      Anytown, USA 12345
    </p>
    <p><a href="mailto:john@example.com">john@example.com</a></p>
    <p><a href="tel:123-456-7890">123-456-7890</a></p>
  </address>
</section>

In the above example, we have added a section with the title "Contact Details", and within that section, we have created an <address> tag to display the contact information. We have added the name, address, email and phone number inside the <address> tag.

Add CSS Style

Add some CSS styles to the <address> tag to give it some formatting. By default, the <address> tag is styled to be block level and italicized. We will change it to make it center aligned and bold.

<style>
  address {
    display: block;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }
</style>

Save the index.html file and open it in a web browser to see the final webpage with contact information.

Summary

The <address> tag is a useful HTML element that is used to display contact information on a webpage. In this lab, we have learned how to use the <address> tag to create a section for displaying contact information on a webpage. We also learned how to add some CSS styling to the <address> tag so that it is visually formatted in a better way.

HTML Contact Information