적절한 HTML5 의미를 살펴 봅니다.
신중하게 HTML 문서의 구조를 계획하면 컴퓨터가 콘텐츠의 의미를 이해하도록 돕는다.. 올바른 구문은 중요하지만, 기본적으로 파서, 검색 엔진 및 보조 기술에 의미없는 데이터를 제공합니다..
의미에주의를 기울여 프런트 엔드 워크 플로를 향상 시키면 더 많은 방문자를 끌어들이는 고품질의 콘텐츠를 만들 수 있습니다. 의미론은 의미에 대한 연구, 더 넓은 맥락에서 논리학 및 언어학.
웹 개발 세계에서 컴퓨터가 문서 구조를 이해할 때 의미 론적 콘텐츠에 대해 이야기하고 내부 요소의 역할. 적절한 의미 체계를 만들고 싶다면, 우리는 깊이 생각할 필요가있다. 구조를 이해하다 우리 콘텐츠의 능력 프론트 엔드 기술.
가시적 인 혜택은 무엇입니까? 적절한 의미는 더 많은 검색 가능한 콘텐츠 그것은 더 나은 검색 엔진 순위. 우리는 또한 다음과 같은 보조 기술로 접근성을 높입니다. 스크린 리더는 우리 콘텐츠의 의미를 더 잘 해석 할 수 있습니다..
개발자가 의미있는 페이지 구조를 구현할 수있게 해주는 다양한 프론트 엔드 개발 기술이 있습니다. 이 게시물은 시맨틱 HTML 태그에 대한 간단한 소개와 문서 개요의 개념을 제공합니다..
시맨틱 및 비 시맨틱 HTML 태그
의미론의 개념은 HTML5의 시대 이전에 존재했던 것만 큼 새로운 것은 아닙니다. Semantic Web의 용어는 2001 년 Tim Berners-Lee 각하에 의해 조기에 만들어졌습니다. 아래에 “시맨틱 웹” 그는 기계로 처리 할 수있는 데이터 웹을 의미했습니다..
이것은 주로 분리 된 HTML 요소는 구별 가능한 구조적 역할을 가져야합니다.. W3C의 정의에 따르면 “의미 론적 요소는 브라우저와 개발자 모두에게 의미를 명확하게 설명한다.”.
HTML5 이전의 의미 요소
의미 론적 요소는 HTML5 이전에도 존재했지만, 대부분의 경우 개발자는 그들이 사용한 태그 중 일부는 실제로 의미 론적이었습니다.. 생각 해봐. 아니면 그
그들의 역할은 우리와 사용자 에이전트 모두에게 분명합니다. 단순히 양식을 포함하고 있습니다.
그만큼
주문 됨 과 정렬되지 않은 목록, 단락, h1-h6 제목 태그 HTML5 이전의 모든 의미 론적 요소입니다..
비 시맨틱 요소
비 의미 론적 요소는 특별한 의미가 없으며, 그들 사이의 상반 관계는 단지 환상적이다. 비 의미 론적 HTML 태그 중 가장 널리 사용되는 예제는 그리고 태그들.
너의 위치가 이제까지의 무서운 질병을 붙잡 으면 간염, 너 내가 무슨 말하는지 알지. 네. 사업부가 반드시 틀린 것은 아니지만 간염 모듈화되고 의미있는 HTML 코드를 작성하려면 싸울 필요가 있습니다..
Smashing Magazine은 과도하고 불합리한 사용으로 실제 문제가 무엇인지를 아름답게 설명합니다. 두 사람 사이에는 관계가 없습니다. 그래도 붙어있는 느낌이 든다면 당황하지 마십시오. HTML5에는 새로운 의미 론적 요소가 도입되어 쉽게 콘텐츠를 구성 할 수있게되었습니다. 그것들은 전체 문서의 수준에서 내용을 구성 할뿐만 아니라 (다음 섹션에서 자세히 설명합니다) 인라인 태그처럼 텍스트 블록 내부에서도 내용을 구성하는 데 도움을줍니다.. 아마도 가장 인기있는 텍스트 수준 의미 론적 태그는 현재 사용중인 모든 텍스트 수준의 의미 요소에 대해서는이 목록을 참조하십시오.. 문서 개요는 HTML 문서의 구조입니다. 요소가 서로 어떻게 관련되어 있는지 보여줍니다. 문서 개요는 표제, 표 제목, 양식 제목 및 HTML4.01 및 XHTML과 같은 이전 버전의 HTML에있는 기타 요소와 같은 매핑 요소에 의해서만 생성되었습니다.. HTML5에서 개요 알고리즘은 다음과 같은 새로운 섹션 요소에 의해 향상되었습니다. HTML5에는 다섯 번째 섹션 요소가 있지만 새로운 요소는 아닙니다. 잘 구조화 된 문서 개요를 만들려면 다음 규칙에주의해야합니다. 1. 최 외곽 섹션 요소는 항상 2. HTML5의 섹션은 중첩 될 수 있습니다.. 3. 각 섹션에는 자체 헤딩 계층 구조가 있습니다. 그들 각각 (심지어 가장 안쪽의 중첩 된 섹션)은 4. 문서 개요는 기본적으로 5 개의 섹션 요소로 정의되지만 각 섹션에 적절한 표제가 필요합니다. 5. 주어진 섹션의 표제를 정의하는 첫 번째 표제 요소 (h1 또는 더 낮은 순위의 표제 태그가 됨)입니다. 같은 섹션 안의 다음 표제 태그는 이것과 관련이 있어야합니다. (첫번째 제목이 sectioning 요소 안의 h3이라면, 그 후에 h3을 넣지 마십시오.) 6.에 의해 정의 된 섹션 7. 각 섹션 (본문, 섹션, 기사, 옆으로, nav)은 자신 만의 섹션을 가질 수 있습니다 시맨틱 스 (semantic) 문서 개요를 통해 어떻게 작동하는지 명확히하는 예를 보도록하겠습니다. 예제 코드는 다음과 같은 문서 구조가됩니다 : 다음은 적절한 의미 체계 섹션을 사용하는 코드입니다. 여기에 우리의 로고와 슬로건이 있습니다.. 첫 번째 단락의 단락 1 첫 번째 섹션의 단락 2 두 번째 섹션의 단락 1 두 번째 섹션의 단락 2 위의 코드 스 니펫을 살펴보면 머리글과 바닥 글이 선택 사항임을 알 수 있습니다. 우리가 자유롭게 사용할 것인지 여부는 자유롭게 선택할 수 있지만 각 섹션에 항상 제목을 포함하는 것이 좋습니다, 그렇지 않으면 섹션은 “제목 없음” 문서 개요. 다행히도 인터넷을 통해 문서 개요를 확인할 수있는 훌륭한 도구가 많이 있습니다. 이번에는 html5.org의 Outliner 도구를 사용합니다.. outliner가 제공 한 양식에 코드 스 니펫을 삽입하고 “개요!” 버튼을 클릭하면 다음과 같은 결과가 표시됩니다. 이것이 샘플 코드의 문서 개요, 이것은 검색 엔진이 그것을 보는 방법이며, 스크린 리더는 시각 장애가있는 사용자에게 그것을 읽습니다. 그것은 의미 론적이며 잘 구조화되어 있으며, 불쾌한 것은 없습니다. “제목 없음” 그 안에있는 섹션들. Outliner에서 Untitled 섹션이 어떻게 보이는지 보려면 예제 코드의 제목 태그 중 일부만 삭제하십시오.. 시맨틱 HTML 태그와 문서 개요는 웹 시맨틱의 일부에 지나지 않습니다. 웹 페이지의 내용은 WAI-ARIA 액세스 가능성 프로토콜 및 RDFa 프로토콜, 마이크로 데이터 또는 JSON-LD 마크 업과 함께 사용할 수있는 구조화 된 데이터의 도움을 통해 훨씬 더 의미있게 만들 수 있습니다. 동일한 방식으로 작동하는 태그 인라인 수준.-그래도, 너는 그들을 완전히 버릴 필요가 없다.. 그들은 스타일링 목적으로 만 콘텐츠를 그룹화하고 다른 최후의 수단의 경우에도 여전히 최상의 선택입니다. HTML5의 텍스트 의미
과 , HTML5 이전에도 존재했습니다. 새로운 인라인 의미 론적 요소 중에서 우리는 예를 들어 , 에 대한 태그 사람이 읽을 수있는 날짜 - 시간, 과 ...에 대한 강조 표시된 텍스트.HTML5의 문서 개요
...에 대한 특정 주제를 중심으로 그룹화 된 섹션 ...에 대한 완전하거나 자체 포함 된 작곡 블로그 게시물이나 위젯과 같은 ...에 대한 탐색 블록 ...에 대한 사이드 바와 같은 보완적인 콘텐츠. 꼬리표. 그만큼 태그도 새롭지 만 문서에서 새 섹션을 생성하지는 않습니다. 섹션 내에서 내용을 나눕니다. 이것은 모든 섹션 요소 (신체, 기사, 섹션, 탐색 및 옆으로) 자체 머리말과 꼬리말을 가질 수있다..의미 론적 구조화 된 컨텐트에 대한 팁
꼬리표.h1 꼬리표., 그리고 태그는 HTML 문서의 기본 윤곽에 속하지 않으므로 일반적으로 보조 기술로 처음 렌더링되지 않습니다. 태그를 사용하여 해당 섹션의 헤더 (예 : 로고, 작성자 이름, 날짜, 메타 정보 등) 및 바닥 글 (저작권, 메모, 링크 등)을 정의합니다.예 : 의미 론적 개요
우리 웹 사이트에 오신 것을 환영합니다.!
기사 제목
기사 자막
첫 번째 논리 부분 (예 : "이론")
1 부에있는 다른 소제목
두 번째 논리 부분 (예 : "연습")
웹 시맨틱의 다른 측면들
