title: What is the purpose of the "role" attribute in HTML?
body: <p>I keep seeing role attributes in some people's work. I use it too, but I'm not sure about its effect.</p>
  
  <p>For example:</p>
  
  <pre><code>&lt;header id="header" role="banner"&gt;
      Header stuff in here
  &lt;/header&gt;
  </code></pre>
  
  <p>Or:</p>
  
  <pre><code>&lt;section id="facebook" role="contentinfo"&gt;
      Facebook stuff in here
  &lt;/section&gt;
  </code></pre>
  
  <p>Or:</p>
  
  <pre><code>&lt;section id="main" role="main"&gt;
       Main content stuff in here
  &lt;/section&gt;
  </code></pre>
  
  <hr>
  
  <p>Is this role attribute necessary?</p>
  
  <p>Is this attribute better for semantics?</p>
  
  <p>Does it improve SEO?</p>
  
  <p>A list of roles can be found <a href="https://www.w3.org/TR/xhtml-role/" rel="noreferrer">here</a>, but I see some people make up their own. Is that allowed or a correct use of the role attribute?</p>
  
  <p>Any thoughts on this?</p>