HTML 랜드마크

HTML landmarks

HTML 랜드마크를 사용하여 웹 페이지의 콘텐츠를 분류하고 그룹화하여 접근성과 [1]SEO를 향상시킵니다.

구분 요소

HTML5에는 기본 랜드마크 [2]역할을 상속하는 다음과 같은 컨텐츠 섹션 요소가 추가되었습니다.

HTML 섹션 요소 및 기본 랜드마크 역할
요소 기본 랜드마크 역할
<header> banner의 문맥에<body>요소.그<header>요소가 아닙니다.banner랜드마크(다음 섹션 요소 중 하나일 경우)<article>,<aside>,<main>,<nav>,<section>를 클릭합니다.[3]
<nav> navigation
<main> main
<aside> complementary
<form> form액세스 가능한 이름을 가지는 경우는, 다음의 몇개의 어트리뷰트를 사용합니다.aria-labelledby,aria-label, 또는title를 클릭합니다.[3]
<footer> contentinfo의 문맥에<body>요소.그<footer>요소가 아닙니다.contentinfo다음 HTML 섹션 요소의 하위 항목인 경우 랜드마크.<article>,<aside>,<main>,<nav>,<section>를 클릭합니다.
<section> region액세스 가능한 이름을 가지는 경우는, 다음의 몇개의 어트리뷰트를 사용합니다.aria-labelledby,aria-label, 또는title를 클릭합니다.[4]

획기적인 역할

그role속성은 페이지에서 요소의 역할을 정의하는 데 사용됩니다.분할 요소가 도입되었을 때role특성이 랜드마킹에 덜 사용되었습니다.이는 역할이 기본적으로 대부분의 분할 요소에 적용되었기 때문에 역할이 [5]더 널리 사용되고 단순하게 받아들여졌기 때문입니다.

그role속성은 콘텐츠 섹션에 역할을 할당하는 데에만 사용되는 것이 아닙니다.이 속성은 다른 많은 요소에 역할을 할당하는 데도 사용할 수 있지만, 현재는 새로운 의미 HTML 요소로 [6]인해 덜 사용됩니다.

예

<div role="filen"> <h1> 안녕하세요, 월드!</h1> </div>

위의 코드는 보다 널리 받아들여지고 있는 [7]다음 버전과 동일합니다.

<header> <h1> 안녕, 세상아!</h1> </h1> </h1>

오용

HTML5에서 sectioning 요소가 추가된 후 section 요소에 롤 속성이 필요한지 여부에 대한 혼란이 있었습니다.실제로 분할 요소에 역할 [8]속성을 부여하는 것은 용장합니다.

또한 섹션 구성요소의 기본 [9]역할을 변경하지 마십시오.

오용의 예

의 역할main에서<main>요소는 이미 그 역할을 기본 랜드마크 역할로 상속하기 때문에 사용할 수 없습니다.

<main role="main"> <p> 헬로우 월드!</p> </main>

의 적용form에의 역할.<header>의미적으로는 부적절합니다.왜냐하면 이것은<header>는 기본 역할입니다.banner:

< >머리글자 역할.="폼">     <!--여기 HTML 코드도 있습니다--> </머리글자>

「 」를 참조해 주세요.

레퍼런스

  1. ^ Clark, Richard; Studholme, Oli; Murphy, Christopher; Manian, Divya. Beginning HTML5 and CSS3. pp. 75–81.
  2. ^ documentation, Adam is a technical writer who specializes in developer; tutorials. "HTML5: What's New in The Latest Version of HTML?". html.com. Retrieved 2022-03-13.
  3. ^ a b c "HTML Sectioning Elements: ARIA Landmarks Example". www.w3.org. Retrieved 2022-03-13.
  4. ^ "ARIA: region role - Accessibility MDN". developer.mozilla.org. Retrieved 2022-03-13.
  5. ^ "How Not To Use Aria". cccaccessibility.org. Retrieved 2022-03-13.
  6. ^ "Using ARIA: Roles, states, and properties - Accessibility MDN". developer.mozilla.org. Retrieved 2022-03-13.
  7. ^ "How to Use ARIA Roles, Properties, and States in HTML". Web Design Envato Tuts+. Retrieved 2022-03-13.
  8. ^ "WAI-ARIA Authoring Practices 1.1". www.w3.org. Retrieved 2022-03-13.
  9. ^ "Using ARIA". www.w3.org. Retrieved 2022-03-13.