개발 도구 (Development Tools)/HTML & CSS

#10. HTML 시맨틱 요소

BiCute 2023. 3. 24. 08:00
반응형

 

HTML의 시멘틱 요소는 HTML 마크업 언어의 요소에 대한 의미를 나타내는 것입니다.

이러한 요소를 사용하면 HTML 문서가 보다 구조화되고 의미있는 형태로 표시될 수 있습니다.

시멘틱 요소 중에서 주요한 것으로는 다음과 같습니다:

  • <header>: 문서의 헤더 부분을 나타내는 요소입니다.
  • <nav>: 네비게이션 메뉴를 나타내는 요소입니다.
  • <main>: 문서의 주요 콘텐츠를 나타내는 요소입니다.
  • <article>: 독립적인 콘텐츠 내용을 나타내는 요소입니다.
  • <section>: 문서내의 구역을 나타내는 요소입니다.
  • <aside>: 문서의 기사와 관련이 없는 콘텐츠를 나타내는 요소입니다.
  • <footer>: 문서의 푸터 부분을 나타내는 요소입니다.

 

시멘틱 요소를 사용하면 문서의 구조와 의미를 더욱 명확하게 표시할 수 있어서, 검색 엔진의 순위를 향상시킬 수 있습니다.

시멘틱 요소를 사용하면 검색 엔진이 문서의 콘텐츠를 정확하게 이해할 수 있고, 검색 결과에서 더욱 의미 있는 결과를 제공할 수 있습니다.
시멘틱 요소는 또한 스크린 리더를 사용하는 사용자들이 문서의 구조를 쉽게 이해할 수 있도록 도움을 줍니다.

마지막으로, 시멘틱 요소를 사용하면 CSS나 JavaScript와 같은 기술을 사용하여 문서의 스타일과 기능을 개선하기가 더욱 쉬워집니다.

예를 들어, <header> 요소에 특정 스타일을 적용하기 위해서는 그 요소에 대한 CSS 셀렉터만 적용하면 됩니다.

 

 

 

# Main

 

HTML에서 <main> 요소는 문서의 주요 콘텐츠를 지정하는 데 사용됩니다.

문서마다 고유하게 사용되어야 하며, 사이트 네비게이션, 헤더, 푸터 등 문서 집합에서 반복되는 콘텐츠는 포함하지 않아야 합니다.

<main> 요소에는 하나의 문서에 고유한 콘텐츠만 포함되어야 합니다.

<main> 요소를 사용하면 검색 엔진과 어시스트 기술이 페이지의 구조와 목적을 이해하는 데 도움이 됩니다.

또한 개발자가 페이지의 헤더와 푸터 같은 요소와는 분리하여 주요 콘텐츠의 스타일을 개선하는 것이 더욱 쉬워집니다.

한 페이지에는 하나의 <main> 요소만 있어야 하며, <body> 요소 안에 직접 배치되어야 합니다.

이 요소는 <header> 또는 <footer> 같은 시멘틱 요소의 자식이 되어서는 안됩니다.

 

아래는 <main> 요소의 샘플 코드입니다.

<header>
  <h1>포트폴리오 사이트</h1>
</header>

<nav>
  <a href="#home">Home</a>
  <a href="#services">Services</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</nav>

<main>
  <h2>나의 포트폴리오</h2>
  <p>
    이것은 내 웹 사이트의 주요 콘텐츠입니다. 
    여기에서 나의 경력, 직업 및 연락 방법에 대한 정보를 확인 할 수 있습니다.
  </p>
</main>

<footer>
  <p>Copyright ©2023 Me</p>
</footer>

이 코드에서, <header> 요소는 웹사이트의 제목을 포함하고 있습니다

<nav> 요소는 네비게이션 링크를 포함하고 있습니다.

<main> 요소는 웹사이트의 주요 콘텐츠를 포함하고 있습니다.

그리고 <footer> 요소는 웹사이트의 푸터 정보(예: 저작권)를 포함하고 있습니다.

 

 

 

# Header

 

HTML에서 <header> 요소는 문서의 헤더 부분을 나타냅니다.

많은 웹 페이지에서 헤더는 로고, 네비게이션 메뉴, 검색 바 등의 정보를 포함하고 있습니다.

헤더는 한 문서의 최상위 레벨의 콘텐츠에 대한 정보를 제공하는 것에 대한 목적으로 사용됩니다.

 

한 문서에는 여러 개의 <header> 요소가 있을 수 있지만, 적절한 경우에만 사용되어야 합니다.

예를 들어, 각 섹션의 헤더와 같이 개별 콘텐츠에 대한 헤더를 제공하는 경우에만 사용합니다.

 

<header> 요소는 주요 콘텐츠인 <main> 요소의 상위 요소이거나, 그 외의 문서 레벨 요소와 함께 사용될 수 있습니다.

<header> 요소 내에는 시멘틱 요소와 텍스트 요소를 포함할 수 있습니다.

 

 

 

# Navigation

 

HTML에서 <nav> 요소는 네비게이션 링크를 그룹으로 묶어주는 기능을 합니다.

많은 웹 페이지에서 네비게이션 메뉴는 사이트의 다른 페이지 또는 콘텐츠를 접근할 수 있는 링크를 포함하고 있습니다.

<nav> 요소는 문서 내의 개별 섹션에서도 사용할 수 있지만, 주로 페이지의 최상위 레벨에서 사용됩니다.

하나의 문서에는 여러 개의 <nav> 요소가 있을 수 있습니다.

<nav> 요소 내에서는 주로 <a> 요소를 사용하여 링크를 제공하며, 다른 시멘틱 요소와 함께 사용될 수 있습니다.

 

아래는 <nav> 요소의 샘플 코드입니다.

<nav>
  <a href="#home">Home</a>
  <a href="#services">Services</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</nav>

이 코드는 홈, 서비스, 소개, 연락처 페이지를 가리키는 네비게이션 링크를 포함하고 있습니다.

링크는 <a> 요소를 사용하여 제공되고, href 속성은 각 링크가 가리키는 URL을 지정합니다.

 

 

 

 

# Article

 

<article> 요소는 독립적인 콘텐츠 내용을 표현할 때 사용합니다.

예를 들어, 뉴스 기사, 블로그 게시물, 기사, 게시판 게시물, 사용자 댓글 등이 있습니다.

 

아래는 <article> 요소의 샘플 코드입니다.

<article>
  <h2>나의 포트폴리오</h2>
  <h3>개발 경력</h3>
  <p>
    저는 8년간 웹 개발자로 근무하였습니다.
    JavaScript, HTML, CSS, Python 등의 기술을 사용하여 다양한 웹 애플리케이션을 개발하였습니다.
  </p>
  <h3>주요 프로젝트</h3>
  <ul>
    <li>E-commerce 사이트 개발</li>
    <li>소셜 네트워크 서비스 개발</li>
    <li>실시간 채팅 웹 애플리케이션 개발</li>
  </ul>
  <h3>기술 스택</h3>
  <ul>
    <li>JavaScript</li>
    <li>HTML/CSS</li>
    <li>Python</li>
    <li>Node.js</li>
    <li>React</li>
  </ul>
</article>

 

 

 

# Section

 

<section> 태그는 문서의 구역을 나타내는 시멘틱 요소입니다.

<section> 태그는 주제가 변경되는 경우에 사용할 수 있습니다.

예를 들어, 소개, 게시물, 커뮤니티, 소셜 미디어 링크 등 다른 주제의 정보를 구분하여 나타낼 수 있습니다.

 

아래는 <section> 요소의 샘플 코드입니다.

<section>
  <h2>나의 여행 기록</h2>
  <h3>유럽 여행</h3>
  <p>
    저는 지난 여름, 유럽 5개국을 여행하였습니다. 
    독일, 영국, 프랑스, 스위스, 이탈리아를 순회하며 각국의 문화와 역사, 예술적 재산을 경험하였습니다.
  </p>
  <h3>남태평양 여행</h3>
  <p>
    그 후, 남태평양을 여행하였습니다.
    태국, 말레이시아, 싱가폴, 인도네시아를 순회하며 다양한 정취와 음식, 친절한 사람들을 만나보았습니다.
  </p>
</section>

 

 

 

# Aside

 

<aside> 태그는 HTML의 시멘틱 요소 중 하나로, 본문에서 부연 설명을 하는 영역을 나타내는데 사용됩니다.

본문과 관련있지만 본문에서 중요하지 않은 정보를 표현할 때 사용됩니다.

 

아래는 <aside> 요소의 샘플 코드입니다.

   <main>
      <p>
        제주도는 한국의 대표적인 관광지 중 하나입니다. 
        아름다운 해안과 풍요로운 문화가 특징이죠.
      </p>
    </main>
    <aside>
      <h3>한국의 대표적인 제주도</h3>
      <p>
        제주도는 한국의 독특한 풍경과 문화, 그리고 맛있는 음식이 유명합니다. 
        다양한 관광지와 활기찬 행사가 열려 있어 관광객들에게 인기가 높습니다.
      </p>
    </aside>

 

 

 

# Footer

 

<footer> 태그는 HTML의 시멘틱 요소 중 하나로, 웹 페이지의 하단에 위치하는 부분을 나타내는데 사용됩니다.

페이지의 저작권 정보, 연락처, 링크 등의 정보를 포함할 수 있습니다.

 

아래는 <footer> 요소의 샘플 코드입니다.

<footer>
  <p>Copyright &copy; 2023 샘플 기업</p>
  <nav>
    <ul>
      <li><a href="#">개인정보 보호정책</a></li>
      <li><a href="#">이용약관</a></li>
      <li><a href="#">문의하기</a></li>
    </ul>
  </nav>
</footer>
반응형