で、結局の所どうなの？

上記はソース上こんな感じで記述されています。

<h1>ぼくのなまえについて</h1>
 <div id="nameBox">
  <h2>ぼくのみょうじ</h2>
  <p>私の名前は<span class="textRed">寿司</span>です</p>
  <h2>ぼくのなまえ</h2>
  <p>FirstNameは<span class="textRed">太郎</span>デース！</p>
 </div>

この形式を、DOM構造と呼びます。
Document Object Model でDOMです。
htmlは基本的にツリー構造で表すことができ、とあるタグとそのタグに内包されている形をしていて
各タグの設置場所をみて、【親子】やら【兄弟】やらといった概念上でのグルーピングができます。

例えば上記の例で言えば、id="nameBox"がついているdivには4つの子要素が存在している事になり
ツリーに直すと以下の形で表すことができます。

  div(第一階層)
   ┠ h2(第二階層)
   ┃ ┗ ぼくのみょうじ(テキスト)
   ┃
   ┠ p(第二階層)
   ┃ ┠ 私の名前は(テキスト)
   ┃ ┠ span(第三階層)
   ┃ ┃ ┗ 寿司(テキスト)
   ┃ ┗ です(テキスト)
   ┃
   ┠ h2(第二階層)
   ┃ ┗ ぼくのなまえ(テキスト)
   ┃
   ┗ p(第二階層)
     ┠ FirstNameは(テキスト)
     ┠ span(第三階層)
     ┃ ┗ 太郎(テキスト)
     ┗ デース！(テキスト)

フォルダ階層と似てる感じになりましたね。
階層を記述してみました。親子と兄弟ってどんなものかなんとなく・・・わかりますでしょうか。
ちなみに、テキストには親子関係は適用されません、あくまでもタグの話だけとなります。