아름다운 HTML 코드의 모습

반응형

이 글은 원래 2년 전에 썼어요. 특히 HTML5가 등장하여 심지어 XHTML 1.1보다 HTML을 훨씬 더 아름답게 만들었기 때문에 그것은 이빨에 조금 길어지고 있었다. 그래서 업데이트 했어!

보기 좋은 웹사이트마다 출처를 볼 수밖에 없어요. 그것은 여러분이 속옷 입은 사람을 마음대로 볼 수 있게 해주는 엑스레이 안경을 쓴 것과 같습니다. 어떻게 안 그럴 수 있어? 아름다운 웹사이트도 아름다운 코드로 만들어졌는지, 아니면 피부 깊이로만 만들어졌는지 보는 것은 너무 유혹적이다. 코드? 아름답다고? 물론이죠. 결국 코드는 시입니다. 이것은 단지 HTML이기 때문에 역동적인 언어만큼 복잡하고 우아할 수는 없지만, 여전히 창작자의 붓글씨를 가지고 있습니다.

무엇이 아름다운 코드를 만드는지 생각하게 합니다. HTML에서는 장인 정신으로 귀결됩니다. 마크업이 어떻게 쓰여져야 하는지 그리고 그것이 얼마나 아름다울 수 있는지 살펴봅시다.

그것은 여러분의 친구들에게 깊은 인상을 주기 위해 여러분의 사물함 안에 인쇄하고 테이프로 붙일 수 있을 만큼 충분히 큽니다. 음, 크기가 좀 이상한 것 같아요. PSD를 수정하고 싶을 경우를 대비해서 사용 가능하도록 하겠습니다.

 

• HTML5 – HTML5 그리고 그것은 지금까지 가장 아름다운 HTML을 위해 만들어진 새로운 요소들이다.
• DOSCTYPE – HTML5는 역대 최고의 DOSCTYPE를 제공합니다.
• 들여쓰기 – 코드가 들여써져 부모/자녀 관계를 표시하고 계층을 강조합니다.
• Charset – 어떤 내용보다 먼저 머릿속에 있는 것으로 선언됩니다.
• 제목 – 사이트 제목은 단순하고 깨끗합니다. 페이지 목적이 먼저이고 구분자가 사용되며 사이트 제목으로 끝납니다.
• CSS – 하나의 스타일시트(스타일시트 내부에 선언된 미디어 유형)만 사용되며 양호한 브라우저에만 제공됩니다. IE 6 이하에는 범용 스타일시트가 제공됩니다.
• 본문 – 별도의 마크업 없이 고유한 페이지 스타일을 위해 본문에 ID를 적용합니다.
• 자바스크립트 – jQuery (가장 아름다운 자바스크립트 라이브러리)는 구글에서 서비스된다. 단일 JavaScript 파일만 로드됩니다. 두 스크립트는 페이지 하단에서 참조됩니다.
• 파일 경로 – 사이트 리소스는 효율성을 위해 상대 파일 경로를 사용합니다. 컨텐츠가 신디케이트된다고 가정할 때 컨텐츠 파일 경로는 절대적입니다.
• 이미지 속성 – 이미지에는 대부분 시각 장애인을 위한 대체 텍스트가 포함되지만 유효성 검사에도 사용됩니다. 렌더링 효율성을 위해 적용된 높이 및 너비입니다.
• 주요 콘텐츠 우선 – 페이지의 주요 콘텐츠는 기본 ID 및 탐색 다음에 제공되지만 사이드바 자료와 같은 보조 콘텐츠 앞에 제공됩니다.
• 적절한 블록 레벨 설명 요소 – 머리글, 탐색, 섹션, 문서, 별도로… 모두 오래된 부분보다 더 잘 포함된 내용을 설명합니다.
• 계층 – 제목 태그는 실제 내용을 위해 예약되며 명확한 계층을 따릅니다.
• 적절한 설명 태그 – 목록은 목록의 필요에 따라 정렬되지 않음, 정렬됨 및 사용 빈도가 낮은 정의 목록으로 표시됩니다.
• 공통 콘텐츠 포함 – 여러 페이지에 걸쳐 공통적으로 사용되는 것은 (사용자에게 적합한 방법, 언어 또는 CMS를 통해) 서버 측을 통해 삽입됩니다.
• 시맨틱 클래스 – 적절한 요소 이름 외에도, 클래스 및 ID는 시맨틱입니다. 즉, 지정하지 않고 설명합니다. (예: "col"이 "left"보다 훨씬 낫다)
• 클래스 – 유사한 스타일을 여러 요소에 적용해야 할 때마다 사용됩니다.
• ID – 구성요소가 페이지에 한 번만 나타날 때마다 사용되며 다른 어떤 방법으로도 표적이 될 수 없습니다.
• 동적 요소 – 동적이어야 하는 것은 동적입니다.
• 인코딩된 문자 – 특수 문자일 경우 인코딩됩니다.
• 스타일링에서 자유 – 페이지에 스타일링을 적용하거나 스타일링을 암시하는 것은 없습니다. 페이지의 모든 내용은 필수 사이트 리소스, 내용 또는 내용을 설명하는 것입니다.
• 코멘트 – 코드를 검토할 때 즉시 명확하지 않을 수 있는 사항에 대한 코멘트가 포함됩니다.
• 유효 – 코드는 W3C 지침을 준수해야 합니다. 태그가 닫혔고, 필수 특성이 사용되었으며, 사용되지 않습니다.