HTML5 마이크로포맷 및 관련 속성 names_html5 튜토리얼 팁

2004년 5월 29일, 블로그와 모든 강연을 중단한 후 웹사이트의 디자이너 40명을 대상으로 헤더, 배너, 탐색, 콘텐츠, 바닥글과 같은 일반적인 페이지 요소에 어떤 규칙을 사용하는지 알아보았습니다(결과 그때부터).

이것은 거의 과학적인 연구는 아니었지만 그해 6월에 Eric Meyer의 의견 중 일부를 추적하여 일련의 명명 규칙을 발표했습니다. 저는 이러한 명명 규칙을 채택한 웹사이트를 찾을 때 항상 기쁩니다. 그리고 4년이 지난 지금도 여전히 매일 사용하고 있습니다.

그때 내 생각은 다음과 같이 정리할 수 있다

id 및 class 속성 이름은 표현이 아닌 요소의 기능이나 콘텐츠를 반영해야 합니다. 따라서 헤더가 제거되고 브랜딩이 도입되었습니다. 바닥글이 제거되고 사이트 정보로 대체되었습니다.

네이밍은 거의 XML 스타일 구조를 취해야 합니다. 따라서 콘텐츠 내부에는 content-main, content-sub 및 content-supp가 있습니다.

이러한 규칙은 나에게 큰 도움이 되었으며, 내가 한 일은 그 규칙의 핵심을 거의 바꾸지 않았습니다. 의심할 바 없이 이 모든 것이 내 작업을 더 빠르고, 더 일관되고, 더 유익하게 만들어줍니다. 이를 통해 더 쉽게 제품을 만들고 함께 일하는 사람들에게 내 사고 방식을 교육할 수 있습니다. 명명 규칙이 작동합니다.

마이크로포맷 및 관련 속성 이름

사실, hCard, hCalendar, hAtom 및 기타 초안과 같은 마이크로포맷은 너무 많은 속성 값을 테이블에 가져옵니다. 이러한 추가 속성 값에 대해 어떤 빌드 파일이나 어떤 제약 조건 CSS 패턴 후크가 제공되는지 고려하세요. 이제는 클래스 속성(마이크로포맷과 함께 제공되는 클래스 속성 제외)을 사용하지 않고도 전체 페이지를 개발할 정도로 마이크로포맷을 사용합니다.

드물게 새 요소를 추가해야 하는 경우(레이아웃 목적으로 분할한다고 가정) 가장 먼저 생각한 것은 이미 존재하는 마이크로포맷을 확장하는 것입니다. hAtom 모드 사용 예시를 보여드리겠습니다.

Title

Main content

Related content

제목

기본 콘텐츠

관련 콘텐츠

마이크로포맷의 장점을 유지한다면 항목 관련이 hAtom 패턴의 일부가 아니라는 점을 눈치채셨겠지만, 이 경우 구성 방법에 대한 추가 요소가 반드시 필요했습니다. 관련 사이드링크와 같은 속성 값이 있나요?

마이크로포맷의 명명 패턴을 확장하는 것이 언제 더 논리적이라고 보입니까?

HTML5

이 장의 시작 부분에서 나는 지금 이 순간 HTML5에 관심을 쏟을 수 없다고 솔직하게 말해야 합니다. 그러나 이것이 문제의 핵심은 아닙니다. HTML5는 다음과 같이 잠재적으로 매우 유용한 몇 가지 새로운 요소를 도입합니다.

섹션

일반 파일 또는 애플리케이션 섹션. 이러한 맥락에서 장은 주제별로 내용을 분류한 것입니다.

기사

문서, 웹페이지 또는 웹사이트의 독립적인 부분을 구성하는 기사로 구성된 페이지의 일부입니다. 이는 포럼 게시물, 잡지 또는 신문 기사, 웹 로그 항목, 사용자가 제출한 댓글 또는 기타 독립적인 콘텐츠 항목일 수 있습니다.

aside

side 요소와 관련된 콘텐츠와 독립적이며 콘텐츠와 별개로 간주될 수 있는 콘텐츠로 구성된 페이지의 일부입니다. 이러한 섹션은 종종 활자체 사이드바로 표시됩니다.

Microformats의 발명가가 기존 사양을 기반으로 스키마를 구축하는 것이 논리적인 것처럼 이제 HTML5의 명명 규칙을 따르도록 내 명명 규칙을 적용하는 것이 합리적입니까? 이제 명명 규칙을 적용하여 HTML5를 따르는 것이 합리적입니까? 물론 아직은 사용할 수 없습니다.

Title

Main content

Related content

제목

🎜>주요 콘텐츠

Title

Main content

Related content

관련 콘텐츠

하지만 이제 id 및 class 속성 값을 사용하여 HTML5에 익숙해지고 문서를 HTML5에 한 걸음 더 가까이 다가갈 수 있습니다.

제목

기본 콘텐츠

/div>

저는 이것이 논리적인 다음 단계라고 생각합니다. 따라서 HTML5 요소를 명명 규칙의 기초로 삼은 이 샘플 문서를 살펴보십시오. 방금 언급한 것 외에도 분류 및 탐색(nav) 방법을 결정하고, colgroup 및 col을 사용하여 필드를 만들고, 정렬되지 않은 목록을 그리드로 변환하고, DataGrid를 사용했습니다. HTML5 태그 사양에는 속성 값으로도 사용할 수 있는 세부정보, 대화 상자 및 그림도 포함됩니다. 오늘 한 가지 소원을 들어줄 수 있다면 모든 CSS 프레임워크 개발자가 동일한 명명 규칙을 채택하고 마이크로포맷을 광범위하게 포함하여 의미 있는 마크업과 CSS를 처음 접하는 사람들이 올바른 권한을 갖게 되기를 바랍니다. 출발점은 다음과 같습니다. 피상적인 ID 및 클래스 속성 대신 더 의미 있고 논리적인 속성을 사용하세요.