Tech Stock logo Tech Stock

HTML을 작성함에 있어서 올바른 구조를 잡고 작성하는것이 중요하다

■ 단일 섹션일 경우

<html>
    <body>
        <header>
            <h1>보통 사이트의 타이틀이 좋다</h1>
             <nav>네이게이션은 header부에 넣어준다 
                <ul>
                    <li><a href="#">home</li>
                    <li><a href="#">about</li>
                </ul>
            </nav>
        </header>
        <article>
            <h2>컨텐츠의 제목이 좋다</h2>
                <section>
                    <p>본문</p>
                </section>
        </article>
        <footer>
        </footer>
    <body>
</html>

■ 복수의 섹션을 갖는 경우

<html>
    <body>
        <header>
            <h1>보통 사이트의 타이틀이 좋다</h1>
            <nav>네이게이션은 header부에 넣어준다 
                <ul>
                    <li><a href="#">home</li>
                    <li><a href="#">about</li>
                </ul>
            </nav>
        </header>
        <article>
            <h2>컨텐츠의 제목이 좋다</h2>
            <section>
                <h3>복수의 섹션을 갖는 컨텐츠의 경우 섹션1</h3>
                    <p>본문</p>
            </section>
            <section>
                <h3>복수의 섹션을 갖는 컨텐츠의 경우 섹션2<h3>
                    <p>본문</p>
            </section>
        </article>
        <footer>
        </footer>
    </body>
</html>

section과 article을 어떻게 나누어 쓸것인지 쫌 궁금해서 찾아보니..

독립적인 내용의 페이지일 경우 article을 쓰는것이 좋고, 단순하게 하나의 단락일 경우에는 section이 좋다고 한다.

몇가지 경우를 좀더 살펴보자

현재 내가 쓰고있는 방식이다. 이 경우도 바른 사용법중에 하나이다.

<section>
    <h1>사이트 타이틀이 좋다</h1>
        <article>
            <h2>컨텐츠의 제목</h2>
            <p>본문</p>
        </article>
</section>

잘못된 경우 1

이런식으로 section을 독립적으로 사용하는것은 잘못된 사용법이다.
독립적으로 사용하고싶으면 article을 써야한다.

<header>...</header>
<section>
    <h1>사이트 타이틀이 좋다</h1>
    <p>본문</p>
</section>
<footer>...</footer>

잘못된 경우 2

h1~h6태그가 존재하지 않는다.
h1~h6태그를 적절하게 넣어주는것이 바른 사용법이다.

<article>
  <section>
    <p>제목</p>
    <p>내용</p>
  </section>
</article>