Footer

This example does not include a complete list of site links in the footer, as which links are included and how they are named can be changed. It only includes a home page link.

Open this Footer in a new tab

HTML:

<footer class="global-footer">
	<div class="l-center">
		<div class="global-footer__links">
			<div class="l-cluster">
				<ul class="clean-list" role="list">
					<li><a href="/">Home</a></li>
				</ul>
			</div>
			<ul class="clean-list" role="list">
				<li><a class="with-icon--larger" href="https://w3c.social/@w3c" hreflang="en">
					<img class="icon icon--larger" src="/dist/assets/svg/mastodon.svg" width="20"
						height="20" alt aria-hidden="true" loading="lazy"/>
					<span class="visuallyhidden">W3C on Mastodon</span></a>
				</li>
				<li><a class="with-icon--larger" href="https://github.com/w3c/" hreflang="en">
					<img class="icon icon--larger" src="/dist/assets/svg/github.svg" width="20"
						height="20" alt aria-hidden="true" loading="lazy"/>
					<span class="visuallyhidden">W3C on GitHub</span></a>
				</li>
			</ul>
		</div>
		<p class="copyright">Copyright &copy; 20XX <a href="https://www.w3.org/">World Wide Web	Consortium</a>.<br>
			<abbr title="World Wide Web Consortium">W3C</abbr><sup>&reg;</sup>
			<a href="https://www.w3.org/policies/#disclaimers">liability</a>,
			<a href="https://www.w3.org/policies/#trademarks">trademark</a> and
			<a rel="license" href="https://www.w3.org/copyright/software-license/" title="W3C Software License">permissive license</a>
			rules apply.</p>
	</div>
</footer>

Considerations

Note the use of the center layout and cluster layout.

Also note the incidence of a <span class="visuallyhidden"> to provide accessible text labels for icon links.