Lesson 26: Addresses and Times

Overview

In this HTML lesson, we demonstrate how to use the address and time elements, as well as the datetime attribute. We begin with a simple example of an address element. Then we give a few examples to demonstrate how the address element is used to provide contact information about the author or owner of the document. After that, we provide a simple demonstration of the time element. Next, we show how to use the datetime attribute to specify a precise machine-readable time description. Finally, we show that the datetime attribute can be used in the delete and insert elements.

A Simple Address Element

Our first example demonstrates a simple address element. Here, we have a street address inside an address element with line breaks to format the parts of the address. The address element is a block-level element, which is why the text above and below it are on separate lines. By default, the address element styles its content in italics with no additional padding or margin, as we see below.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    Welcome!
    <address>
      XoaX.net<br />
      9999 Clinic Court<br />
      La Crosse, WI 54601<br />
    </address>
    Goodbye!
  </body>
</html>

Output

Output with Pink Background

An Address with a URL and an Email Link

Addresses are used to encapsulate contact information for the author or owner of the document or web page. As such, the address element is usually located at the bottom of the page with various contact information inside it, like a URL, email address, phone number, or street address.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>As it is written in the book of the words of Isaiah the prophet,</p>
    <blockquote>
      The voice of one crying in the wilderness:
	  Prepare the way of the Lord,
      make his paths straight.
      Every valley shall be filled,
      and every mountain and hill shall be brought low,
      and the crooked shall be made straight,
      and the rough ways shall be made smooth;
      and all flesh shall see the salvation of God.
    </blockquote>
	<p><cite>(Luke 3:4-6 [RSVCE])</cite></p>
	<address>
	  Maintained by <a href="https://xoax.net/">XoaX.net</a><br />
	  Contact <a href="mailto:xoax@xoax.net">Email</a><br />
    </address>
  </body>
</html>

Output

Another Example Address

To reinforce the idea, we have another example of a short page with an address at the bottom, along with a copyright. The address element should only be used for the creator of the web page, not other addresses that happen to be in the document nor for other unrelated information.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <h1>Some Content</h1>
    <p>
      The address element should only be used to convey contact information about the
      creator of a web page or document. Typically, this type of information is placed
      at the bottom of a web page.
    </p>
    <address>
      Produced by <a href="https://xoax.net/">XoaX.net</a><br />
    </address>
    &copy; 2020 XoaX.net LLC. All rights reserved.<br />
  </body>
</html>

Output

Simple Time Elements

This example, which contains information about the business hours of a company, uses two simple time elements to hold the opening and closing times. The time element does not affect the appearance of text by default, but it can be used to style content.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <h1>We're Open</h1>
    <p>
      Our office hours are from <time>9:00 a.m.</time> to <time>5:00 p.m.</time> Monday through
      Friday.
    </p>
  </body>
</html>

Output

Specifying a Datetime

We can use the datetime attribute to specify a particular time, as we do in this example. Inside the element, we use a human-readable version of the date, while we use a machine-readable version for the datetime attribute. We can specify a variety of types of machine-readable datetime values: years, months, weeks, dates, local or global dates and times, times, days, or periods of time. A complete list of the format specifications for the datetime attribute can be found in our table here.

Example5.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <h1>Fatima</h1>
    <p>
      The miracle of the Sun occurred on <time datetime="1917-10-13T12:00">October 13, 1917 at
      noon</time>.
    </p>
  </body>
</html>

Output

Datetimes in Delete and Insert Elements

In addition to the time element, we can use the datetime attribute inside delete and insert elements, as we show in this example.

Example6.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>
      <p>Before a man are life and <del datetime="0001-01-01">tacos</del>
      <ins datetime="0001-01-01">death</ins>, and whichever he chooses will
      be given to him. (Sirach 15:17 RSVCE)</p>
    </p>
  </body>
</html>