[ HTML5 ] 시멘틱 웹(sementic web)에 대해서 알아보자

Frontend/HTML

[ HTML5 ] 시멘틱 웹(sementic web)에 대해서 알아보자

YWTechIT 2021. 10. 12. 06:26

📍 sementic web은 무엇일까?

컴퓨터가 사람을 대신하여 정보를 읽고, 이해하고 가공하여 새로운 정보를 만들어 낼 수 있도록 이해하기 쉬운 의미를 가진 차세대 지능형 웹
다른 의미로는 정보를 분석하여 그 정보의 관계 속에서 의미론적인 자료들을 추출하여 웹 상에 보여줄 수 있는 웹이다.
다음 태그를 사용했을 때 HTML 에서 보이는 화면은 같은 결과가 나올지 몰라도 SEO 면에서는 2번이 더 나은 코드라고 할 수 있다. 검색엔진 로봇이 여러 웹사이트를 돌아다니면서 2 번과 같은 코드를 중요한 제목으로 인식하고 인덱스에 포함시켜 검색엔진에 노출시키게 한다.

<!-- 1번 -->
<font size="6"><b>SPA의 정의</b></font>

<!-- 2번 -->
<h1>SPA의 정의</h1>

📍 sementic 마크업을 사용한 구조

1. 내용을 더 잘 설명하기 위한 것

2. 마크업을 sementic 하게 하면 기계와 사람 모두가 내용의 문맥과 의미를 더 쉽게 이해할 수 있다.

3. SEO 최적화에 도움이 된다.

다음사진은 HTML5 시멘틱 마크업을 사용한 블로그 구조와 완성된 결과물이다. 이를 토대로 각 태그들의 의미에 대해서 알아보자.

📍 sementic Tag의 종류

1. 독타입선언: <!DOCTYPE html>

- doctype이란? 유효성 검사기가 문서에 어떤 규칙을 적용할지 알려준다. IE 6, 7, 8 버전에서 문서를 표준모드로 렌더링하도록 강제한다. 모든 브라우저에서 동작하는 문서를 만들려면 반드시 필요한 일이다.

2. 헤더: header

- 글의 사이즈를 결정하는 h1,h2와 같은 태그가 아니다. 헤더에는 회사 로고부터 검색 상자까지 여러 개를 담을 수 있다.

- 페이지 하나에 하나의 헤더만 있을 수 있는 제한은 없다. 각 글, 절이 모두 헤더를 가질 수 있고, 구별하기 쉽게id속성을 넣어두는 편이 좋다. 유일한ID를 쓰면 CSS로 스타일을 주거나 JS로 요소를 찾기가 쉽다.

<header id="page_header">
    <h1>AwesomeCo Blog!</h1>
</header>

3. 푸터: footer

- 문서 전체 또는 인접한 절의 푸터 정보를 의미한다. 푸터는 보통 저작관이나 사이트 소유자에 대한 정보를 담고 있다. 명세에는 하나의 페이지가 포함할 수 있는 푸터의 숫자 역시 제한이 없다고 되어있다. 즉, 블로그 글 각각에 푸터가 있어도 된다. header 와 마찬가지로 id 속성으로 요소를 유일하게 식별할 수 있게 한다. 푸터에 내비게이션 목적의 요소도 포함할 수 있다.

<footer id="page_footer">
    <p>&copy; 2010 AwesomeCo.</p>
</footer>

4. 네비게이션: nav

- 네비게이션은 우리가 흔히 사용하는 웹 사이트의 메뉴인데, 사용자가 웹 사이트에서 가장 많이 클릭하는 영역 중 하나다.

- 네비게이션은 보통 헤더나 푸터에 두어서, 바로 알아볼 수 있도록 하는 것이 일반적이다.

<header id="page_header">
    <h1>AwesomeCo Blog!</h1>
    <nav>
        <ul>
            <li><a href="http://awesomeco.com">홈페이지</a></li>
            <li><a href="/about">회사소개</a></li>
            <li><a href="/herms">서비스 항목</a></li>
            <li><a href="/privacy">개인정보 보호 정책</a></li>     
        </ul>
    </nav>
</header>

5. 섹션: section

- 섹션은 페이지의 논리적인 영역이며, 기존에 남용하던 div 요소 중 이런목적으로 사용한 태그는 section 으로 사용해야 한다.

<section id="posts">
</section>

- 그러나, section 을 남용하는 것 역시 지양해야 한다. 섹션의 단지 페이지의 내용을 논리적으로 그룹 짓는 데 사용하는 것이다. 여기서 만든 섹션은 블로그의 글 모두를 담게 되지만, 각 글이 섹션에 담기지는 않는다. 이런 용도에는 article 이 더 적합하다.

6. 내용: article

- article 요소는 웹 페이지의 실제 내용을 설명하는데 안성맞춤이다.

<article class="post">
    <header>
        <h2>How many should we put you down for?</h2>
        <p>Posted by AYW on
            <time datetime="2021-10-08T06:30">2021. 10. 8. 6:39AM</time>
        </p>
    </header>
    <p>여기에 내용이 들어갑니다.</p>
    <p>여기에 다른 내용이 들어갑니다.</p>
    <footer>
        <p><a href="comments"><i>25 Comments</i></a>...</p>
    </footer>
</article>

💡 section과 article의 차이

- article : 내용이 각기 독립적이고, 홀로 설 수 있는 내용을 담는다. (주로, 블로그 글, 포럼 글, 뉴스 기사 등을 article 로 묶을 수 있다.). 콘텐츠만으로 독립이 가능하면 사용하라.

- section : 서로 관계 있는 문서를 분리하는 역할을 한다. (주로, 문서를 다른 주제로 구분 짓기 위해 사용된다.)

- 같은 구조 내에서 관계가 있으면 section , 별도의 표시 없이 그저 구조로의 역할을 하기 원하면 div 를 사용하라.

- article 태그를 대주제라고 하면, section 은 그 안에 포함이 될 수 있고 그 반대도 가능하다.

7. aside와 sidebar: 주된 내용에 뭔가 추가해야 하는 경우. 인용구, 다이어그램, 덧붙이고 싶은 생각, 관련된 링크 등에 사용

<aside>
    <p>
        &quot;물건을 팔 때는 거절할 기회를 주어선 안 됩니다.&quot;
    </p>
</aside>

- 위 사진에서 우측에 링크들이 담겨있는 사이드바를 만들 때는 aside 태그를 사용하기보다는 nav 태그를 사용하자. aside 를 사용할 수는 있지만 명세의 정신에 어긋난다. aside 요소는 글과 관련 있는 내용을 보여주려는 목적으로 만들었기 때문이다.

<section id="sidebar">
    <nav>
        <h3>이전 글</h3>
        <ul>
            <li><a href="2021/10">2021년 10월</a></li>
            <li><a href="2021/09">2021년 9월</a></li>
            <li><a href="2021/08">2021년 8월</a></li>
            <li><a href="2021/07">2021년 7월</a></li>
            <li><a href="2021/06">2021년 6월</a></li>
        </ul>
    </nav>
</section>

📍 결론

지금까지 sementicWeb에 대해서 배웠는데, 무엇보다 중요한 점은 sementicWeb을 왜 사용하는지에 대해서 알아야 한다. 결론적으로 무분별한 의미 없는 div 태그를 사용해 문단을 나누는것 보다 각각의 의미를 담고 있는 tag들을 사용해 개발자들끼리 코드 유지보수 할 때 가독성을 높이기 위함과 SEO최적화를 위함인데, 검색엔진 로봇이 인덱스에 포함시켜 검색엔진에 노출시키기 위함이다. 조금 더 자세하게 알고 싶다면 엘리 코드의 HTML 태그에 관한 영상(약 14분)을 보면 이해가 잘 된다.

reference

저작자표시