깔끔하고 표준화된 HTML 태그 작성 방법 배우기_HTML/Xhtml_웹페이지 제작

좋은 HTML 코드는 아름다운 웹사이트의 기초입니다. 나는 사람들에게 CSS를 가르칠 때 항상 다음과 같이 말하면서 시작합니다. 좋은 CSS는 좋은 HTML 마크업을 기반으로만 존재합니다. 집에는 튼튼한 기초가 필요한 것과 같죠? 깔끔하고 시맨틱한 HTML 마크업은 장점이 많지만, 여전히 비친화적인 마크업 작성 방식을 사용하는 웹사이트가 많습니다.

몇 가지 비친화적인 HTML 태그를 살펴보고 이러한 문제에 대해 토론하여 깔끔하고 표준화된 HTML 태그를 작성하는 방법을 알아보겠습니다.

Script House Note: Chris Cyier는 이 기사의 코드를 설명하기 위해 두 가지 문서를 사용했습니다: 잘못된 코드 및 좋은 코드 . 공부하실 때 이 두 문서를 참고하시기 바랍니다.

1. 엄격한 DOCTYPE

이를 위해서는 HTML 4.01을 사용할지 XHTML 1.0을 사용할지 논의할 필요가 없으며 두 가지 엄격한 요구 사항이 모두 적용됩니다. 우리는 올바른 코드를 작성하고 있습니다.

그러나 어쨌든 우리 코드는 레이아웃을 위해 테이블 ​​테이블을 사용해서는 안 되므로 Transitional DOCTYPE을 사용할 필요가 없습니다.

관련 리소스:

• W3C 권장 DTD(문서 유형 선언)
  

• 사이트 수정 올바른 DOCTYPE 사용! 스크립트 홈의 참고 사항

: 소위 DTD는 간단히 말해서 특정 문서에 대해 정의된 몇 가지 규칙입니다. 그리고 엔터티 선언.
• XHTML 문서 유형에는 STRICT(엄격 유형), TRANSITIONAL(전환 유형), FRAMESET(프레임워크 유형)의 세 가지가 있습니다

  . 현재 우리가 가장 많이 사용하는 것은 TRANSITIONAL입니다. 예를 들어 이 사이트는 현재 XHTML 1.0 TRANSITIONAL을 사용합니다. HTML 코드가 잘 작성되었다면 기존 TRANSITIONAL을 STRICT로 변환하는 것이 더 편리합니다. 반대로 너무 성급하게 전환할 필요는 없습니다. 개인적으로는 STRICT가 더 엄격하다고 생각하지만 TRANSITIONAL을 사용해도 큰 영향은 없습니다.

2. 문자 집합 및 인코딩 문자

의 문자 집합 선언 위치 외에도 관련 자료:

위키피디아: UTF-8

문자 코드 문제에 대한 튜토리얼

• 확장 ASCII 테이블

• 적절한 들여쓰기 코드 작성 시 들여쓰기는 웹 페이지의 모양에 영향을 미치지 않지만 적절한 들여쓰기를 사용하면 코드를 더 읽기 쉽게 만들 수 있습니다. 표준 들여쓰기 방법은 새 요소를 시작할 때 들여쓰기하는 것입니다. . 또한 닫는 요소의 태그가 여는 태그와 정렬된다는 점을 기억하세요.

• 관련 리소스:

HTML TIDY로 웹 페이지 정리

4. 외부 CSS 및 JavaScript 사용

스크립트 홈으로 확장된 일부 CSS 코드가 있습니다. 참고 물론 이 문제는 그다지 심각하지 않을 수도 있습니다. 예를 들어 WordPress 테마는

• 로 작성됩니다. 5. 올바른 태그 중첩

  웹 사이트 제목에는
웹사이트 제목 태그로 적합합니다. 그리고 홈페이지에 링크를 추가했는데, 링크가

외부에 배치되어 있고,

을 둘러싸서 링크를 넣은 것이 실수였습니다. 이 간단한 중첩 오류는 대부분의 브라우저에서 잘 처리되지만 기술적으로는 불가능합니다.

앵커 링크는 인라인 요소인 반면

제목은 블록 요소이므로 블록 요소를 인라인 요소에 배치하면 안 됩니다.

6. 불필요한 DIV를 제거하세요

누가 먼저 발명했는지는 모르겠지만 이건 "피티스"가 좋아요 이는 HTML 태그에 ps를 과도하게 사용하는 것을 의미합니다. 웹 디자인 학습의 특정 단계에서 모든 사람은 DIV를 사용하여 다른 많은 요소를 래핑하여 편리한 레이아웃과 스타일을 얻는 방법을 배웁니다. 이로 인해 DIV 요소가 필요한 곳에 사용되고 완전히 불필요한 곳에도 사용됩니다.

위의 예에서는 p(”topNav”)를 사용하여 UL 목록(”bigBarNavigation”)을 포함하지만 DIV와 UL은 모두 블록입니다. 요소를 포함하므로 UL 요소를 래핑하기 위해 DIV를 사용할 필요가 없습니다.

관련 자료:

• 신장염: 정의 및 치료 방법

7. 더 나은 명명 규칙 사용

이제 이전 기사에서 언급한 예에서 우리 UL은 "bigBarNavigation"이라는 ID 이름을 사용합니다. "는 블록의 내용에 대한 좋은 설명이지만 "big"과 "Bar"는 내용보다는 디자인을 설명하는 것입니다. 이 메뉴는 큰 도구 모음이라고 말할 수 있습니다. 그런데 이 메뉴의 디자인이 세로로 변하면, 그러면 이름이 혼란스럽고 관련성이 없어 보일 것입니다.

“mainNav,”“subNav”,“footer”, ”, 포함된 콘텐츠를 설명하는 잘못된 클래스 및 ID 이름(예: “bigBoldHeader”“leftSidebar”

Script House의 메모: Chris는 내용에 따라 이름을 지어야 할지 디자인에 따라 이름을 지을지 강조했습니다. 개인 추가 사항: ID 및 클래스 이름은 대문자 또는 소문자여야 합니다, 또는 단어의 첫 글자를 대문자로 사용합니다. 우선, 완전히 대문자로 된 단어는 읽기에 도움이 되지 않으므로 제외하세요. 전체 소문자를 사용할지, 단어의 첫 글자를 대문자로 사용할지는 개인 취향에 따라 다릅니다. 중요한 점은 어떤 규칙을 사용하든 일관성이 있어야 한다는 것입니다. 한 순간에 모든 소문자를 사용하지 말고 다음에는 첫 글자를 대문자로 사용하십시오.

그리고 긴 이름에는 밑줄 "_", 하이픈 "-"를 추가할지, 아니면 추가하지 않을지 개인적으로 헷갈립니다. 아니면 너무 복잡하다고 생각할 수도 있습니다. 어느 것을 사용해도 괜찮습니다. 일관성을 유지하세요.