섹션 1. HTML5 시맨틱 태그로 컨텐츠 구조
1.1. 구조
- HTML은 내용의 의미에 따라 문서를 구성 할 수 있습니다.
- div, 테이블 태그는 구조, 레이아웃을 만드는 데 사용되지만 의미가 아닙니다.
- HTML 시맨틱 태그 - 레이아웃뿐만 아니라 의미를 표시하기위한 웹 페이지의 구조
- HTML Semantic Structural/Sectioning Elements보다 읽기 쉽고 액세스 가능하며 더 나은 검색 엔진 결과 지향적, 쉽게 수정/업데이트
- 시맨틱 요소는 브라우저와 개발자 모두에 대한 의미를 명확하게 설명합니다.
참고 : HTML5 시맨틱 요소는 모든 최신 브라우저에서 지원됩니다.
HTML 제목 단면 요소
H1 ~ H6
HTML5 시맨틱 구조/단면 요소
| 꼬리표 | 사용 |
|---|
<main> | 문서의 주요 내용을 지정합니다 |
<header> | 문서 또는 섹션의 헤더를 지정합니다 |
<nav> | 내비게이션 링크를 정의합니다 |
<section> | 문서의 섹션을 정의합니다 |
<article> | 기사를 정의합니다. |
<aside> | 페이지 컨텐츠를 제외하고 컨텐츠를 정의합니다 |
<footer> | 문서 또는 섹션의 바닥 글을 정의합니다 |
왜 HTML5 시맨틱 구조/단면 요소가 도입 되었습니까?
- HTML을 사용하여 개발자는 헤더, 바닥 글, 맨 위 Nav, 하단 Nav, 메인 메뉴, 네비게이션, 메인 왼쪽 상단 맨 아래 컨테이너, 내용, 왼쪽 기사, 오른쪽 기사 등을 사용하여 자신의 ID/클래스 이름을 사용/만들었습니다.
- 이로 인해 검색 엔진이 올바른 웹 페이지 컨텐츠를 식별하고 브라우저의 개발자를 식별하고 콘텐츠를 편집하기가 어렵고 불가능했습니다.
- 새로운 HTML5 시맨틱/의미있는 요소와 같은 (
<header> <footer> <nav> <section> <article> <aside> 와 같은 경우, 이것은 더 쉬워 질 것입니다. - HTML5 시맨틱/의미있는 요소는 액세스 가능성, 검색 엔진 결과,보다 일관되고 사용하기 쉽고 스타일을 가진 사용자뿐만 아니라 기계에 대한 페이지를 더 읽기 쉽게 만듭니다.
W3C에 따르면 시맨틱 웹에 따르면 : "응용 프로그램, 기업 및 커뮤니티에서 데이터를 공유하고 재사용 할 수 있습니다."
구조적 계층 구조 구현
계층 구조가 의미가있는 한, 관련 요소가 정확히 표현하는 것은 실제로 당신에게 달려 있습니다. 그러한 구조를 만들 때 몇 가지 모범 사례를 명심하면됩니다.
- 바람직하게는
use a single <h1> per page 합니다. 이것은 최상위 제목이며 다른 모든 사람들은 계층 구조에서 아래에 앉아 있습니다. - 계층 구조에서 제목을 올바른 순서로 사용하십시오.
<h3>s 사용하여 소제목을 나타내는 다음 <h2>s 하위 보도를 나타내는 것이 아닙니다. 이는 의미가없고 이상한 결과로 이어질 것입니다.
구조가 필요한 이유는 무엇입니까?
- 웹 페이지를보고있는 사용자는 관련 콘텐츠를 찾기 위해 빠르게 스캔하는 경향이 있습니다. 몇 초 안에 유용한 것을 볼 수 없다면 좌절하고 다른 곳으로 갈 것입니다.
- 검색 엔진 페이지를 색인화하면 페이지의 검색 순위에 영향을 미치는 중요한 키워드로 제목의 내용을 고려하십시오. 제목이 없으면
SEO (Search Engine Optimization) - 시각 장애가있는 사람들은 종종 웹 페이지를 읽지 않습니다. 그들은 대신 그들의 말을 듣습니다. 제목을 사용할 수 없으면 전체 문서를들을 수 있습니다.
1.2. 요점
- HTML은 시맨틱 요소, 제목, 시맨틱 태그를 사용하여 페이지 컨텐츠의 문서 개요를 생성/설명합니다 (문서 개요 = 주제, 목차, 색인)
- 문서 개요는 장치/브라우저에서 컨텐츠를 스캔하고 검색하고 특정/특정 섹션으로 이동하여 컨텐츠가 서로 관련되는 방식을 결정하기 위해 사용됩니다.
- HTML5 Amberiner는 HTML 페이지/문서의 정확한 개요 IE 페이지 구조를 이해하고 아는 데 사용됩니다.
- Adminer Utility 사용 : https://gsnedders.html1.org/outliner/
- Brackets와 같은 텍스트 편집기
Document Outliner Plugin/extension 사용하여 적절한 문서 개요/목차/주제/페이지 인덱싱을 표시합니다. - 브래킷 ->보기 메뉴 -> 문서 개요 표시
1.3. Nav
- 내비게이션을위한 문서의 섹션을 나타냅니다
- 요소는 일련의 탐색 링크를 정의합니다
- HTML 요소는 현재 문서 또는 기타 문서 내에서 내비게이션 링크를 제공하는 페이지의 섹션을 나타냅니다.
- 내비게이션 섹션의 일반적인 예는 메뉴, 내용 표 및 인덱스입니다.
참고 : 문서의 모든 링크가
요소 요소는 주요 내비게이션 링크 블록에만 해당됩니다.
1.4. 부분
- 일반 문서 또는 응용 프로그램 섹션을 나타냅니다
- 그만큼
- HTML
W3C의 HTML5 문서에 따르면 : "섹션은 일반적으로 제목을 가진 컨텐츠의 주제 그룹입니다."
- 웹 페이지는 일반적으로 소개, 컨텐츠, 왼쪽 및 오른쪽 섹션이있는 중간 섹션 등을 위해 섹션으로 나눌 수 있습니다.
1.5. 기사
- 블로그 항목 또는 신문 기사와 같은 문서의 독립적 인 내용을 나타냅니다.
- 이 요소는 독립적이고 독립적 인 콘텐츠를 지정합니다
- HTML 요소는 문서에서 자체 포함 된 구성을 나타냅니다.
- HTML 태그는 블로그/포럼 게시물, 신문 기사, 블로그 항목 등에 사용됩니다.
1.6. 곁에
- 나머지 페이지와 약간 관련이있는 콘텐츠를 나타냅니다.
- 요소는 (사이드 바와 같은)에 배치 된 컨텐츠 외에 일부 내용을 정의합니다.
- 그 사이드는 종종 사이드 바 또는 콜 아웃 박스로 표시됩니다
1.7. 헤더
- 입문 또는 항해 보조 도구 그룹을 나타냅니다
- 요소는 문서 또는 섹션의 헤더를 지정합니다.
- 요소는 입문 컨텐츠 용 컨테이너로 사용해야합니다.
- HTML 요소는 입문 내용, 일반적으로 입문 또는 항해 보조 장치 그룹을 나타냅니다.
- 일부 제목 요소뿐만 아니라 로고, 검색 양식, 저자 이름 및 기타 요소도 포함될 수 있습니다.
- 하나의 문서에 여러 요소가있을 수 있습니다
1.8. 보행인
- 섹션의 바닥 글을 나타냅니다
- 요소는 문서 또는 섹션의 바닥 글을 지정합니다.
- HTML 요소는 가장 가까운 섹션 컨텐츠 또는 단면화 루트 요소의 바닥 글을 나타냅니다.
- 바닥 글은 일반적으로 섹션의 저자, 저작권 데이터 또는 관련 문서에 대한 링크에 대한 정보를 포함합니다.
- 하나의 문서에 여러 요소가있을 수 있습니다
1.9. div
1.10. 와이 아리아
- 웹 접근성 이니셔티브 접근 가능한 풍부한 인터넷 응용 프로그램
- 맹인의 스크린 리더와 같은 보조 기술을 돕기 위해 웹 사이트 또는 웹 애플리케이션의 의미를 향상시키는 데 도움이되는 일련의 속성입니다.
- Aria (Wai-Aria)는 HTML 요소에 추가 할 수있는 일련의 속성입니다. 이러한 속성은 브라우저에서 구현 된 접근성 API를 통해 보조 기술에 대한 역할, 상태 및 부동산 의미를 전달합니다.
- Aria (Wai-Aria)는 사용자에게 사이트를 탐색하고 상호 작용할 수있는 좋은 방법을 제공합니다. HTML 코드를 가능한 한 의미 론적으로 만들어 방문자와 스크린 리더에게 코드가 쉽게 이해할 수 있도록하십시오.
- Wai-Aria는 개발자가 시각적으로 풍부한 사용자 인터페이스의 목적, 상태 및 기타 기능을 쉽게 설명 할 수있는 매우 강력한 기술입니다.
- 랜드 마크 역할 (스크린 리더 및 기타 장치 스캔 및 필요한 역할로 점프)
- <header role="banner">
- <nav role="navigation">
- <main role="main">
- <article role="article">
- <footer role="footer">
- <aside role="complementary">
- <footer role="contentinfo">
1.11. 웹 사이트 / 블로그
- https://www.w3schools.com/html/html_accessibility.asp
- https://www.w3.org/wai/standards-guidelines/aria/
- https://www.w3.org/tr/wai-aria/
- https://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/
