HTML SEO <div>, <span> 대신 명시적인 요소를 쓰자

<div>대신 '명시적 요소' 쓰기

HTML에서 <div> 요소는 문서 내에서 구획을 나누기 위해 일반적으로 사용됩니다. 그러나 <div>는 문서 구조를 정의하는 요소가 아니므로, SEO에서는 특별한 역할을 하지 않습니다. 대신 구조를 정의하는 명시적인 요소를 사용하면 검색 엔진이 문서 구조를 더 잘 이해할 수 있습니다.

 

다음은 <div> 요소를 대체할 수 있는 구조적/명시적 요소들입니다:

<header>, <nav>, <main>, <section>, <article>, <footer>, <aside>, <figure>, <figcaption>, <details>, <summary>, <dialog>, <datalist>, <h1>~<h6>, <dl>, <dt>, <dd>, <blockquote>

 

위 요소들을 사용하여 html을 작성하면 다음과 같습니다.

 

<header>
    <h1>SEO-friendly Example Page</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <h2>About Us</h2>
      <p>We are a company that specializes in providing high-quality services to our clients.</p>
      <figure>
        <img src="https://via.placeholder.com/150" alt="Example Image">
        <figcaption>Example Image</figcaption>
      </figure>
    </section>
    <section>
      <h2>Services</h2>
      <dl>
        <dt>Service 1</dt>
        <dd>A description of service 1.</dd>
        <dt>Service 2</dt>
        <dd>A description of service 2.</dd>
        <dt>Service 3</dt>
        <dd>A description of service 3.</dd>
      </dl>
    </section>
    <section>
      <h2>Contact Us</h2>
      <details>
        <summary>Click here to view our contact information</summary>
        <p>123 Main Street<br>City, State ZIP<br>Phone: 555-555-5555<br>Email: info@example.com</p>
      </details>
      <dialog>
        <form>
          <label for="name">Name:</label>
          <input type="text" id="name" name="name"><br>
          <label for="email">Email:</label>
          <input type="email" id="email" name="email"><br>
          <label for="message">Message:</label>
          <textarea id="message" name="message"></textarea><br>
          <button type="submit">Submit</button>
        </form>
      </dialog>
    </section>
  </main>
  <footer>
    <p>Copyright © Example Company</p>
  </footer>

 

<span>대신 '명시적 요소' 쓰기

<span>태그도 마찬가지입니다. 다음은 <span>태그를 대체할 수 있는 구조적/명시적 요소의 예시입니다:

<a>, <em>, <strong>, <label>, <sub>, <sup>, <ins>, <del>, <code>, <dfn>, <abbr>, <cite>, <kbd>, <ruby>, <samp>, <var>, <small>, <b>, <u>, <i>, <s>, <data>, <time>, <mark>, <output>, <meter>, <progress>

 

위 요소들을 사용하여 html을 작성하면 다음과 같습니다.

 

  <h1>Example page for replacing <code>&lt;span&gt;</code> element</h1>
  <p>
    This is a paragraph of text with a <a href="#" title="Example link">link</a>. 
    This paragraph also contains some <em>emphasized</em> and <strong>strong</strong> text. 
    This text is <small>small</small> and this text is <var>variable</var>.
  </p>
  <p>
    This is another paragraph of text with some <b>bold</b> text and 
    some <i>italicized</i> text. This text is <sup>superscripted</sup> and 
    this text is <sub>subscripted</sub>. 
    This text is <u>underlined</u> and 
    this text is <s>struck-through</s>.
  </p>
  <p>
    This paragraph contains some <code>code</code> and 
    some <kbd>keyboard input</kbd>. 
    This text is <mark>highlighted</mark> and this text is <ins>inserted</ins>. 
    This text is <del>deleted</del> and this text is <data value="123">data</data>.
  </p>
  <p>
    This paragraph contains some <time datetime="2023-04-23">time</time> and 
    some <meter min="0" max="100" value="50">meter</meter>. 
    This text is <output>output</output> and 
    this text is <progress value="50">progress</progress>.
  </p>
  <p>
    This paragraph contains some <abbr title="Hypertext Markup Language">HTML</abbr>, 
    some <cite>citation</cite>, and 
    some <dfn title="Example definition">definition</dfn>. 
    This text is <ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby> and 
    this text is <samp>sample output</samp>.
  </p>

 

위 html 코드를 실행한 화면입니다.

 

Example page for replacing <span> element

This is a paragraph of text with a link. This paragraph also contains some emphasized and strong text. This text is small and this text is variable.

This is another paragraph of text with some bold text and some italicized text. This text is ^{superscripted} and this text is _subscripted. This text is underlined and this text is struck-through.

This paragraph contains some code and some keyboard input. This text is highlighted and this text is inserted. This text is deleted and this text is data.

This paragraph contains some time and some meter. This text is

output

and this text is progress.

This paragraph contains some HTML, some citation, and some definition. This text is 漢かん字じ and this text is sample output.

 

위 예시에서는 다양한 요소들을 사용해 <span> 요소를 대체했습니다. 

예를 들어, 텍스트 스타일링을 위해 <em>, <strong>, <small>, <var>, <b>, <i>, <u>, <s> 등을 사용하였고,

텍스트 상태를 표현하기 위해 <sub>, <sup>, <mark>, <ins>, <del> 등을 사용하였습니다.

그리고 <data>, <time>, <output>, <meter>, <progress> 등은 의미론적인 요소로 사용됩니다.

<abbr>, <cite>, <dfn>, <ruby>, <samp> 등은 텍스트의 의미를 나타내기 위해 사용됩니다.