Creating the Footer Structure 1

Let's take a look at the example code to create a footer.

Example Code

Footer HTML

<footer id="footer">
    <div class="container">
        <a href="mailto:contact@geekhaus.club">contact@geekhaus.club</a>

        <div class="social">
            <a href="#" target="_blank">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    height="20px"
                    viewBox="0 0 448 512"
                >
                    <path
                        fill="white"
                        d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
                    />
                </svg>
            </a>
            <a href="#" target="_blank">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    height="20px"
                    viewBox="0 0 576 512"
                >
                    <path
                        fill="white"
                        d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
                    />
                </svg>
            </a>
        </div>
    </div>
    <div class="attribution">
        Built with <a href="https://www.codefriends.net">Code Friends</a>
    </div>
</footer>

Now let's take a look at the footer code step by step.

Container

Footer Container HTML

<footer id="footer">
    <div class="container">...</div>
    ...
</footer>

Since there is a semantic tag for the footer, it is good practice to use the <footer> tag.

Using the <footer> tag clearly defines this part as the footer, making it easy to identify.

Additionally, we have used the id attribute to uniquely identify the footer.

The main content of the footer is wrapped inside a <div> element, which is identified with the container class.

Contact Information

Contact Information HTML

<a href="mailto:contact@geekhaus.club">contact@geekhaus.club</a>

Websites should provide a means for users to contact the site administrators for inquiries or issues.

Therefore, it is common to include the contact information of the website or company in the footer.

The email address is displayed using an HTML <a> tag.

Using the mailto: scheme in the href attribute will automatically open the user's email program, making it easy to send an email.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.

Learn moreSign In