Global Header & Footer

<header id="header" class="site-header">
  <!-- Academic mark  -->
  <p class="mark-header"><a href="https://www.nd.edu/">University of Notre Dame</a></p>
  <div class="site-title-group">
    <p class="site-parent">Parent Unit Name</p> <!-- optional-->
    <h1 id="site-title" class="site-title"><a href="/" accesskey="1" title="Homepage shortcut key = 1">Site Title</a></h1>
    <p class="site-tagline">Tagline for Site</p> <!-- optional -->
  </div>
  <div class="nav-header">
    <nav id="nav-top" class="nav-top" role="navigation" aria-label="Primary navigation">
      <!-- Top nav...  -->
      <!-- Search form... -->
    </nav>
  </div>
  <div class="nav-mobile-util"><!-- Mobile navbar... --></div>
</header>

<footer id="footer" class="site-footer" role="contentinfo">
  <!-- Site-specific Information -->
  <div class="footer-org" typeof="Organization" resource="#siteorg">
    <meta property="parentOrganization" resource="#parentorg" content="University of Notre Dame">
    <ul class="footer-breadcrumbs">
      <li><a href="https://example.nd.edu/">Parent Unit</a></li>
    </ul>
    <p><a href="/" class="site-link" property="url"><span property="name">Site Name</span></a></p>
    <div class="footer-contacts">
      <!-- Site contact information -->
      <p class="contact-info">
        <span class="address" property="address" typeof="PostalAddress">
          <span property="streetAddress">Street Address</span><br>
          <span property="addressLocality">Notre Dame</span>, <span property="addressRegion">IN</span> <span property="postalCode">46556</span> <span property="addressCountry">USA</span>
        </span>
        <!-- Phone number has tel: link -->
        <span class="footer-phone" property="telephone" content="+1 574-555-1234">Phone <a href="tel:574-555-1234">574-555-1234</a></span>
        <span class="footer-fax" property="faxNumber" content="+1 574-555-1234">Fax 574-555-1234</span>
        <!-- Email has mailto: link -->
        <span class="footer-email" property="email"><a rel="noopener" href="mailto:example@nd.edu">example@nd.edu</a></span>
      </p>
      <!-- Optional site-specific link(s) -->
      <!-- <p class="footer-org-links"><a href="#">Legal</a></p> -->
      <!-- Site social links -->
      <nav class="social" aria-label="Site Name social media navigation" vocab="">
        <ul>
          <!-- Social links have "noopener" rel attributes -->
          <!-- Each link has an aria-label to differentiate it from any university-specific social links -->
          <li><a class="soc-facebook" href="#" rel="noopener" aria-label="Site Name on Facebook"><svg class="icon" width="16" height="16" aria-hidden="true"><use xlink:href="#icon-facebook"></use></svg> Facebook</a></li>
          <!-- Other social links... -->
        </ul>
      </nav>
    </div>
    <div property="logo" typeof="ImageObject"><meta property="url" content="https://static.nd.edu/images/webclips/default/webclip-60.png"></div>
    <p class="copyright"><a href="https://www.nd.edu/copyright/">&copy; 2024</a> <a href="https://www.nd.edu">University of Notre Dame</a></p>
  </div>

  <!-- University information -->
  <div class="footer-parent" property="parentOrganization" typeof="CollegeOrUniversity" resource="#parentorg">
    <meta property="name" content="University of Notre Dame">
    <a href="https://www.nd.edu/" class="mark-footer" property="url logo" typeof="ImageObject" aria-label="University of Notre Dame">
      <img src="https://static.nd.edu/images/marks/gray/ndmark.svg" width="250" height="60" alt="University of Notre Dame" property="url">
    </a>
    <div class="footer-parent-links">
      <!-- University links -->
      <nav aria-label="Footer links navigation">
        <ul class="footer-links">
          <!-- Each link has an aria-label to differentiate it from any site-specific links -->
          <li><a href="https://search.nd.edu/" aria-label="Search Notre Dame">Search</a></li>
          <li><a href="https://mobile.nd.edu/" aria-label="Notre Dame Mobile App">Mobile App</a></li>
          <li><a href="https://news.nd.edu/" aria-label="Notre Dame News">News</a></li>
          <li><a href="https://events.nd.edu/" aria-label="Notre Dame Events">Events</a></li>
          <li><a href="https://www.nd.edu/visit/" aria-label="Visit Notre Dame">Visit</a></li>
          <li><a href="https://www.nd.edu/about/accessibility/" aria-label="Notre Dame Accessibility Information">Accessibility</a></li>
        </ul>
      </nav>
      <!-- University social -->
      <nav class="social" aria-label="Notre Dame social media navigation" vocab="">
        <!-- Social links have "noopener" rel attributes -->
        <!-- Each link also has an aria-label to differentiate it from any site-specific social links -->
        <li><a class="soc-facebook" href="https://www.facebook.com/notredame/" rel="noopener" aria-label="Notre Dame on Facebook"><svg class="icon" width="16" height="16" aria-hidden="true"><use xlink:href="#icon-facebook"></use></svg> Facebook</a></li>
        <li><a class="soc-twitter" href="https://twitter.com/NotreDame/" rel="noopener" aria-label="Notre Dame on Twitter"><svg class="icon" width="16" height="16" aria-hidden="true"><use xlink:href="#icon-twitter"></use></svg> Twitter</a></li>
        <li><a class="soc-instagram" href="https://www.instagram.com/notredame/" rel="noopener" aria-label="Notre Dame on Instagram"><svg class="icon" width="16" height="16" aria-hidden="true"><use xlink:href="#icon-instagram"></use></svg> Instagram</a></li>
        <li><a class="soc-youtube" href="https://www.youtube.com/user/NDdotEDU" rel="noopener" aria-label="Notre Dame on YouTube"><svg class="icon" width="16" height="16" aria-hidden="true"><use xlink:href="#icon-youtube"></use></svg> YouTube</a></li>
        <li><a class="soc-linkedin" href="https://www.linkedin.com/school/university-of-notre-dame/" rel="noopener" aria-label="Notre Dame on Linkedin"><svg class="icon" width="16" height="16" aria-hidden="true"><use xlink:href="#icon-linkedin"></use></svg> LinkedIn</a></li>
      </nav>
    </div>
  </div>
</footer>