html5의 페이지 구조에서 주의해야 할 점은 무엇인가요?

이번에는 html5 페이지 구조에서 어떤 점에 주의해야 하는지 알려드리겠습니다. html5 페이지 구조의 주의 사항은 무엇인가요?

의미 요소 소개

HTML5 표준에는 새로운 의미 요소가 많이 추가되어 있습니다. 유형별로 나누면 페이지 구조, 텍스트 내용, 형식 등이 있습니다.

그리고 여기서는 주로 페이지 구조의 새로운 요소를 소개합니다.

시맨틱 요소란 무엇인가요

간단히 말하면, 시맨틱 요소는 요소(태그)에 어떤 의미를 부여하는 것이며, 요소의 이름은 요소가 표현하고자 하는 의미를 말합니다.

예를 들어

는 머리글을 의미하고

는 바닥글을 의미합니다.

Features

①유지 관리 용이: 의미 요소를 사용하면 페이지 구조 정보가 더 명확해지며 나중에 페이지를 유지 관리하기가 더 쉬워집니다. 코드를 다시 볼 필요가 없습니다. div를 찾은 다음 특정 ClassName을 찾으세요.

②접근성: 화면 판독기 및 기타 접근성 도구에 도움이 됩니다.

③ 검색 엔진 최적화에 좋습니다. 검색 로봇은 HTML5의 일부 의미 요소를 확인한 후 색인을 생성한 페이지에 대한 정보를 수집할 수 있습니다.

원래 인터페이스 레이아웃

페이지 레이아웃에서

는 특정 스타일을 사용하면 헤더, 사이드바, navigation바 등과 같은 특정 시나리오에 적용할 수 있습니다. 기다리다.

유지 관리를 용이하게 하기 위해 디자이너는 종종 이러한

에 ClassName(스타일 클래스 이름) 또는 특별한 이름이 포함된 ID를 할당합니다.

예를 들어 페이지 헤더를 나타내는

요소의 ClassName 또는 ID는 페이지 헤더, 헤더 등이 될 수 있습니다.

페이지 구조의 의미 요소

설명

페이지 구조의 의미 요소는 대부분 페이지의 전체 레이아웃에 사용됩니다. 대부분은 다음과 같이

대신 사용되는 블록 수준 요소입니다. : 머리글, 바닥글 등

그리고 특별한 스타일이 없으므로 CSS와 함께 사용해야 합니다.

자세한 소개

: 웹페이지나 기사의 헤더 영역을 정의합니다. 로고, 탐색, 검색 창 등을 포함할 수 있습니다.

최소 브라우저 버전: IE 9, Chrome 5

사용 지침:

①웹 페이지 헤더를 표시하는 데 사용되는 경우 로고, 탐색, 검색 창 및 기타 정보가 포함될 수 있습니다.

② 콘텐츠 제목을 표시하는 데에는 제목에 다른 정보도 함께 표시되는 경우에만

을 사용하는 것이 좋습니다.

: 웹페이지의 주요 콘텐츠를 정의합니다.

최소 브라우저 버전: IE는 지원되지 않음, Chrome 35

: 웹페이지나 기사의 바닥글 영역을 정의합니다. 저작권, 파일링 및 기타 콘텐츠를 포함할 수 있습니다.

최소 브라우저 버전: IE 9, Chrome 5

사용 지침:

①웹 페이지의 바닥글로 사용되는 경우 일반적으로 웹 사이트 저작권, 법적 제한, 링크 등이 포함됩니다.

②기사의 바닥글로 사용되는 경우 일반적으로 작성자에 대한 정보가 포함됩니다.

: 페이지 탐색링크를 표시하세요. 여러 개의 하이퍼링크가 포함된 영역입니다.

최소 브라우저 버전: IE 9, Chrome 5

사용 지침:

①페이지에는 페이지 탐색 및 관련 기사 추천과 같은 여러

요소가 포함될 수 있습니다.

②

영역의 연락처 정보와 인증 정보는

요소에 포함될 필요가 없습니다.

: 일반적으로 웹페이지에서 독립된 영역으로 표시됩니다.

최소 브라우저 버전: IE 9, Chrome 5

사용 지침:

①기사 섹션 등 웹페이지의 독립된 영역으로 사용할 수 있습니다.

: 완전하고 독립적인 콘텐츠 블록으로

및

와 같은 독립적인 구조 요소를 포함할 수 있습니다. 뉴스, 블로그 게시물 및 기타 독립적인 콘텐츠(댓글 또는 작성자 프로필 제외).

최소 브라우저 버전: IE 9, Chrome 5

: 주변 기본 콘텐츠 외부에 콘텐츠 블록을 정의합니다. 예: 주석.

최소 브라우저 버전: IE 9, Chrome 5

: 종종

(제목 표시)과 함께 사용되는 독립적인 콘텐츠를 나타내며 그림, 일러스트레이션, 표에 사용할 수 있습니다. 기사 섹션 등의 코드.

최소 브라우저 버전: IE 9, Chrome 8

:

요소의 제목을 정의합니다.

최소 브라우저 버전: IE 9, Chrome 8

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

관련 읽기:

H5에서 비디오 및 오디오 태그와 진행률 표시줄을 사용하는 방법

H5 및 C3의 새로운 대화형 기능은 무엇입니까

H5의 블록 수준 태그 요약

위 내용은 html5의 페이지 구조에서 주의해야 할 점은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!