title: Why there needs to be text after a <br> inside the <th> tag?
body: <h2><em>This is a question regarding the behavior of the <code>&lt;br&gt;</code> tag when it's inside another tag.</em></h2>
  
  <p>I'm doing this table where there's a <code>&lt;thead&gt;</code> with two <code>&lt;th&gt;</code> inside of it: one reads <em>"name"</em> and the other one <em>"last name"</em>. A <code>&lt;br&gt;</code> is inserted between <em>'last'</em> and <em>'name'</em> to display the second <code>&lt;th&gt;</code> in two lines and avoid a longer cell width. </p>
  
  <p>Now that <em>"last name"</em> is displayed in two lines, the text in both <code>&lt;th&gt;</code> don't start at the same height. </p>
  
  <p>I would like the text in the <em>"name"</em> <code>&lt;th&gt;</code> to start at the same height than the <em>"last name"</em> <code>&lt;th&gt;</code>.</p>
  
  <ul>
  <li>Typing <code>&lt;th&gt;NAME &lt;br&gt; &lt;/th&gt;</code> does nothing.</li>
  <li>Typing <code>&lt;th&gt;NAME &lt;br&gt; .&lt;/th&gt;</code> does the desired line break.</li>
  </ul>
  
  <p>Why is that so?</p>
  
  <p>Shouldn't blank spaces count as content if they are between tags and, thus, activate the <code>&lt;br&gt;</code> goodness?</p>
  
  <p>How can I achieve two lines in the <em>"name"</em> <code>&lt;th&gt;</code> without unecessary characters on the second line or without having to style it with CSS?</p>
  
  <p><strong>check the html and enlighten me</strong>
  <div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;body&gt;
    &lt;table border="2px"&gt;
      &lt;thead&gt;
        &lt;th&gt;NAME &lt;br&gt; &lt;/th&gt;
        &lt;th&gt;LAST&lt;br&gt;NAME&lt;/th&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;John&lt;/td&gt;
          &lt;td&gt;Doe&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
    &lt;br&gt;
  
    &lt;table border="2px"&gt;
      &lt;thead&gt;
        &lt;th&gt;NAME &lt;br&gt; .&lt;/th&gt;
        &lt;th&gt;LAST&lt;br&gt;NAME&lt;/th&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;John&lt;/td&gt;
          &lt;td&gt;Doe&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm curious about the flawed behavior of the <code>&lt;br&gt;</code> when it is inside another tag.</p>