카테고리 없음

HTML : 시맨틱 웹(Semantic Web) - <main>

RESHUR : 레슈 2022. 5. 31. 14:10

HTML : 시맨틱 웹(Semantic Web) - <main>


HTML&nbsp;:&nbsp;시맨틱&nbsp;웹(Semantic&nbsp;Web)&nbsp;-&nbsp;<main>


<main>

  • <body>주요 콘텐츠를 나타내며, 유일무이한 태그이다.
  • 하나 이상을 써야 할 경우 주요 콘텐츠 외의 부분은 <hidden>을 사용하여 눈에 보이지않게 해야 한다. (접근성과 관련 있음)
  • 대부분의 브라우저에서는 지원하나 Internet Explore 에선 지원하지 않는다.
  • Internet Explore 11 이하에서 작동해야 할 경우 하단과 같이 작성한다.
    • 구형 브라우저를 지원할 필요가 없다면 role="main"보다 <main>을 사용한다..
<main role = "main">
</main>

 


예제

Apples

The apple is the pomaceous fruit of the apple tree.

Red Delicious

These bright red apples are the most common found in many supermarkets.

...

...

Granny Smith

These juicy, green apples make a great filling for apple pies.

...

...

<!-- other content -->

<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>

  <article>
    <h2>Red Delicious</h2>
    <p>These bright red apples are the most common found in many
    supermarkets.</p>
    <p>... </p>
    <p>... </p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for
    apple pies.</p>
    <p>... </p>
    <p>... </p>
  </article>
</main>

<!-- other content -->

<main>은 하나지만 제목, 설명 등 모든 콘텐츠를 아우르는 전체 요소라고 생각하면 된다.


기술 요약

콘텐츠 카테고리 : 플로우 콘텐츠

가능한 콘텐츠 : 플로우 콘텐츠

태그 생략 :종료 태그 생략 불가

가능한 상위 요소 : 플로우 콘텐츠를 허용하는 경우 단, 구조적으로 올바른 <main> 요소여야 한다.

 


2022.05.27 - [TIL/HTML] - HTML : 시맨틱 웹(Semantic Web)

 

HTML : 시맨틱 웹(Semantic Web)

HTML : 시맨틱 웹(Semantic Web) 시맨틱 웹 이란? (Semantic Web) Semantic : 의미의, 의미론적인 요소의 의미를 고려하여, 구조를 설계하고 코드를 작성하는 것을 말한다. 시맨틱 웹을 사용하면 이로운 점.

sol-reshur.tistory.com