요즘 웹 디자인에서의 시맨틱 HTML 중요성

요즘 웹 디자인에서의 시맨틱 html 중요성에 대해 알아보겠습니다. sementic html은 웹사이트의 구조나 SEO 등을 개선하여 웹 디자인에서 아주 중요한 역할을 합니다. 의미와 목적을 설명할 수 있는 이 요소들을 사용해 유저와 검색 엔진 모두가 탐색하기 더 쉽고 쾌적한 사이트를 만들어 줄 수 있습니다. 아래의 내용과 함께 더욱 자세히 알아보겠습니다.

시맨틱 HTML이란?

시맨틱(sementic) html은 콘텐츠의 목적을 정확하게 전달하는 html5 요소의 사용을 의미하며 웹 페이지 구조에 의미를 부여하고 브라우저, 검색 엔진, 보조 기술 등에서 더 쉽게 이해 할 수 있도록 도와줍니다. 어떤 것들이 있는지 아래의 항목을 통해 예시를 살펴보겠습니다.

• <header> : 소개 및 탐색 링크를 보여줍니다.
• <footer> : 페이지 저작권 정보 or 마지막 내용 등을 포함합니다.
• <article> : 게시글과 같은 독립적 콘텐츠를 의미합니다.
• <section> : 콘텐츠 주제별 그룹을 의미합니다.
• <aside> : 주요 내용과 접선적인 내용을 알려줍니다.
• <main> : 페이지의 주요한 콘텐츠를 포함하고 있습니다.

코드의 예시를 들면 아래와 같습니다.

<header>
    <h1>Welcome to My Site</h1>
    <nav>
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </nav>
</header>

<main>
    <article>
        <h2>What is Semantic HTML?</h2>
        <p>Semantic HTML uses elements with meaning to improve web design and SEO.</p>
    </article>
</main>

<footer>
    <p>&copy; 2024 My Site</p>
</footer>

웹 디자인에서 시맨틱 html이 중요한 이유

1. 접근성 향상 : 화면 판독기와 보조 기술은 시맨틱 html을 이용해 웹 페이지를 정확하게 분석하고 살펴봅니다. <nav> 및 <main>과 같은 요소들은 페이지의 여러 섹션을 구별하는 데에 도움을 줍니다.
2. SEO 향상 : 검색 엔진의 경우 시맨틱 태그들을 이용해 페이지 내의 콘텐츠를 더 잘 이해할 수 있습니다. 그래서 블로그에는 <article>, 주제 분류 시에는 <section> 태그를 사용하면 상위 노출 될 가능성이 높아집니다.
3. 코드 관리 용이 : 시맨틱 태그 사용 시 명확한 계층 구조가 생성되기 때문에 디버깅이나 타 개발자와의 협업을 단순화 시켜 할 수 있습니다.
4. 반응형 디자인 지원 : 최신 css 프레임워크와 원활하게 작동해 반응형 디자인과 높은 호환성을 보여줍니다.

웹 디자인의 핵심 의미 요소

위에서 설명했던 <header>, <main>, <article>, <aside>, <footer> 이 5가지의 요소들을 어떤 식으로 쓰이는지 심층적으로 알아보겠습니다.

1. <header>

헤더 태그는 웹 페이지나 섹션 등의 소개 콘텐츠를 정의해 줍니다.

<header>
    <h1>Company Name</h1>
    <nav>
        <a href="#home">Home</a>
        <a href="#services">Services</a>
    </nav>
</header>

2. <main>

메인 태그는 웹 페이지의 주요 콘텐츠를 나타내며 보조 내용에 대한 집중도를 높여줍니다.

<main>
    <h2>About Us</h2>
    <p>We provide exceptional web development services.</p>
</main>

3. <article>

아티클 태그는 블로그 게시물, 뉴스 기사 같은 독립형 콘텐츠에 사용됩니다.

<article>
    <h2>Why Choose Me?</h2>
    <p>I deliver high-quality, responsive web designs tailored to your needs.</p>
</article>

4. <aside>

어사이드 태그는 광고나 링크 같은 부가 콘텐츠 등을 나타낼 때 사용됩니다.

<aside>
    <h3>Related Articles</h3>
    <ul>
        <li><a href="#article1">HTML Basics</a></li>
        <li><a href="#article2">CSS for Beginners</a></li>
    </ul>
</aside>

5. <footer>

푸터 태그는 저작권에 대한 고지나 연락처 링크 같은 마지막 콘텐츠를 포함합니다.

<footer>
    <p>&copy; 2024 Your Company Name. All rights reserved.</p>
</footer>

sementics html 사용 사례

적절한 구역에 일반 <div> 태그를 사용하기 보단 <section>이나 <article>로 묶어서 좀 더 의미 있는 요소로 대체하여 사용할 수 있습니다. 또한, ARIA 역할을 추가해 조금 더 접근성을 높여줄 수 있습니다.

<nav role="navigation">
    <ul>
        <li><a href="#home">Home</a></li>
    </ul>
</nav>

총 정리

웹 디자인을 구성하는 기본 포맷이라고 할 수 있는 ‘sementic HTML’을 사용해서 SEO에 더 적합하고 관리가 쉬운 사이트를 만들어 낼 수 있습니다. 이에 대한 내용을 충분히 이해하고 난 뒤 웹사이트를 기획할 때 유저의 경험을 고려하여 의미 있는 요소들로 뼈대를 구성해 보시기 바라겠습니다.

시맨틱 html FAQ