Categories
Learn HTML

HTML: footer tag

HTML: footer tag

In this series of learning HTML, we will teach you how to use HTML footer tag with proper syntax and lots of examples. Let’s start on HTML footer tag.

 

Description of HTML footer tag

The <footer> tag in HTML is used to define a footer for a document or a section of a web page. It is usually placed at the bottom of a page and contains information about the author, copyright, contact details, and other similar information.

Here is an example of how to use the <footer> tag in HTML:

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My Web Page</h1>
</header>

<main>
<p>This is the main content of my web page.</p>
</main>

<footer>
<p>© 2023 John Doe. All rights reserved.</p>
<p>Contact me at john.doe@example.com</p>
</footer>
</body>
</html>

In this example, the <footer> tag is used to create a footer section at the bottom of the web page. The footer contains two <p> tags that provide copyright and contact information.

It is important to note that the <footer> tag can be used both within the <body> tag and within individual sections of a web page, such as <article> or <section>.

Here is an example of how to use the <footer> tag within a section of a web page:

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My Web Page</h1>
</header>

<section>
<h2>Section 1</h2>
<p>This is the first section of my web page.</p>

<footer>
<p>© 2023 John Doe. All rights reserved.</p>
<p>Contact me at john.doe@example.com</p>
</footer>
</section>

<section>
<h2>Section 2</h2>
<p>This is the second section of my web page.</p>

<footer>
<p>© 2023 John Doe. All rights reserved.</p>
<p>Contact me at john.doe@example.com</p>
</footer>
</section>
</body>
</html>

In this example, the <footer> tag is used within two individual sections of the web page. Each section has its own footer containing the same copyright and contact information.

In summary, the <footer> tag in HTML is used to define a footer for a document or section of a web page. It is typically placed at the bottom of the page and contains information such as copyright, contact details, and authorship.

 

Syntax of HTML footer tag

The syntax of the HTML <footer> tag is very simple. Here is the basic syntax:

<footer>
<!-- Footer content goes here -->
</footer>

The <footer> tag is an HTML5 element that represents a footer section of a document or section of a web page. It is used to contain information such as copyright, authorship, and contact details, and is typically placed at the bottom of a web page.

The content of the <footer> tag can include any HTML content, such as text, images, links, and other HTML elements. The content should be relevant to the overall content of the page and provide additional information or context.

It’s important to note that the <footer> tag should not be used to create navigation menus or other interactive elements. These types of elements should be created using appropriate HTML elements such as <nav> and <a>. Additionally, it’s a good practice to use semantic tags like <footer> whenever possible, as they provide additional meaning and context to the content of a web page.

 

 

Attributes

The <footer> tag in HTML supports several standard attributes that can be used to modify its behavior and appearance. Here are some of the most commonly used attributes:

  1. class: This attribute is used to specify one or more CSS classes to apply to the footer element. Multiple classes can be specified by separating them with a space.
  2. id: This attribute is used to provide a unique identifier for the footer element. This can be useful for targeting the element with CSS or JavaScript.
  3. style: This attribute is used to apply inline styles to the footer element. Styles can be specified using CSS syntax.
  4. title: This attribute is used to provide additional information about the footer element, usually in the form of a tooltip.

Here is an example of how to use some of these attributes in HTML:

<footer class="site-footer" id="footer" style="background-color: #f5f5f5;" title="This is the footer of my web page">
<p>© 2023 John Doe. All rights reserved.</p>
<p>Contact me at john.doe@example.com</p>
</footer>

 

In this example, the <footer> element has been given a CSS class of site-footer, an ID of footer, a light gray background color using the style attribute, and a tooltip using the title attribute.

It is important to note that these attributes are just a few of the many attributes that can be used with the <footer> element in HTML. Other attributes such as lang, dir, and accesskey can also be used depending on the specific needs of the web page.

 

Notes on HTML footer tag

Here are some additional notes on the HTML <footer> tag:

  1. The <footer> tag is used to define a footer for a document or section of a web page. It is typically placed at the bottom of the page and contains information such as copyright, contact details, and authorship.
  2. The <footer> tag is a semantic tag, which means it provides contextual meaning to the content within it. Using semantic tags like <footer> helps search engines and other tools better understand the content of a web page.
  3. The <footer> tag can be used both within the <body> tag and within individual sections of a web page, such as <article> or <section>. This allows for greater flexibility in organizing and structuring the content of a web page.
  4. The <footer> tag supports several standard attributes such as class, id, style, and title that can be used to modify its behavior and appearance.
  5. The content of a <footer> element can include any HTML content, such as text, images, links, and even other HTML elements like lists or tables.
  6. It is important to note that the <footer> element should not be used to create a footer navigation menu or other interactive elements. These types of elements should be created using appropriate HTML elements such as <nav> and <a>.

 

Browser Compatibility

The HTML footer tag has essential support with the following browsers:

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. Safari Mobile

 

Examples of HTML footer tag

We will discuss the <footer> tag below, exploring examples of how to use the <footer> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

We will discuss the HTML footer tag below, with some examples of how to use the footer tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

  1. HTML5
  2. HTML4
  3. XHTML

 

 

HTML5 Document

If you created a new HTML webpage in HTML 5, your HTML footer tag might look like this, as shown below:

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>

<main>
<p>Here is some content for my website.</p>
</main>

<footer>
<p>© 2023 My Website. All rights reserved.</p>
</footer>
</body>
</html>

In this example, we have a basic HTML5 document with a header, main content area, and footer. The <footer> tag is used to define the footer section of the page and contains a copyright notice. Note that we do not need to include any special attributes or styling for this basic example.

 

 

HTML 4.01 Transitional Document

Here’s an example of how to use the <footer> tag in an HTML 4.01 Transitional document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My Website</title>
</head>
<body>
<div id="header">
<h1>Welcome to My Website</h1>
</div>

<div id="main">
<p>Here is some content for my website.</p>
</div>

<div id="footer">
<p>© 2023 My Website. All rights reserved.</p>
</div>
</body>
</html>

In this example, we have an HTML 4.01 Transitional document with a header, main content area, and footer. Instead of using the <footer> tag, we are using a <div> element with an ID of “footer” to define the footer section of the page.

Note that the use of semantic tags like <footer> was not as prevalent in HTML 4.01 as it is in HTML5, so the <div> element is used instead to achieve similar functionality.

 

 

 

XHTML 1.0 Transitional Document

Here’s an example of how to use the <footer> tag in an XHTML 1.0 Transitional document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Website</title>
</head>
<body>
<div id="header">
<h1>Welcome to My Website</h1>
</div>

<div id="main">
<p>Here is some content for my website.</p>
</div>

<div id="footer">
<p>© 2023 My Website. All rights reserved.</p>
</div>
</body>
</html>

 

In this example, we have an XHTML 1.0 Transitional document with a header, main content area, and footer. Like the HTML 4.01 Transitional example, we are using a <div> element with an ID of “footer” to define the footer section of the page. However, note that the syntax of the document is slightly different, as XHTML is an XML-based language and requires a stricter syntax than HTML.

 

 

 

XHTML 1.0 Strict Document

You can not use the <footer> tag in XHTML 1.0 Strict.

XHTML 1.1 Document

You can not use the <footer> tag in XHTML 1.1.