Search code examples
javascripthtmlmetadatahead

Is there a wrapper/grouping element usable in <head>?


I have a site that fetches full HTML pages with XMLHttpRequest, parses them down to the bits of the page that change, and then swaps them with the current page content to avoid a refresh/some markup overhead. This works pretty well for the <body> (everything in <main>, for example); but sometimes there's page-specific metadata in the <head>, like <meta name="theme-color">, page-specific scripts and styles, etc.

Is there an element I can wrap around the page-specific metadata to ease parsing it out of the page? The only things I can think of are abusing comments or hacking some other tags to serve as non-native "start"/"end" markers, which doesn't play nice with existing software.


Solution

  • I don't know of any tag to use to wrap all the elements, but you can assign them a special data attribute and get all of the meta tags with that attribute. I'm assuming you are using JavaScript since you mentioned XMLHttpRequest, but that could possibly be in some other language as-well. In the future please specify the language in the tags of the question.

    <head>
       <meta name="unrelated">
       <meta name="theme-color" data-theme>
       <meta name="theme-background" data-theme>
    </head>
    
    <script>
    var meta = document.head.getElementsByTagName('meta');
    for(i = 0, l = meta.length; i < l; ++i) {
       if(meta[i].hasAttribute('data-theme')) {
          // do something
       }
    }
    </script>