이 기사는 주로 HTML의 의미론에 대한 심층 분석과 이와 관련된 프론트 엔드 프레임 워크를 소개합니다. 간단한 HTML도 큰 지식을 가지고 있습니다! 필요한 친구는 의미론에 대한 다음 질문을 참조 할 수 있습니다.
의미론은 표지판과 상징과 그들이 나타내는 의미의 관계를 연구합니다. 언어학에서는 주로 언어 로이 마커 (단어, 문구 또는 소리와 같은)의 의미를 연구합니다. 프론트 엔드 개발 분야에서 시맨틱은 주로 HTML 요소, 속성 및 속성 값 (Microdata와 같은 확장)에 의해 합의 된 의미를 포함합니다. 사양에 일반적으로 사용되는 이러한 공식적인 컨벤션 시맨틱은 프로그램 (및 나중에 개발에 참여하는 사람들)이 웹 사이트의 모든 측면에 대한 정보를 더 잘 이해하는 데 도움이 될 수 있습니다. 그러나 이러한 요소, 속성 및 속성 값의 의미론이 공식화 되더라도 여전히 개발자의 적응성과 공동 선택의 결과에 적용되어야합니다. 이를 통해 공식 컨벤션 시맨틱이 향후 수정 될 수 있습니다 (이는 HTML 디자인의 원칙 중 하나입니다).
다양한 유형의 HTML 의미론을 구별합니다Semantic HTML을 작성하는 원칙을 준수하는 것은 현대 전문 프론트 엔드 개발의 기초 중 하나입니다. 의미론의 대부분은 현재 또는 예상 컨텐츠 속성 (예 : H1 요소, LANG 속성, 유형 속성의 이메일 값, MicroData)과 관련이 있습니다.
그러나 모든 의미론이 내용 지향적 일 필요는 없습니다. 클래스 이름은 의미가 될 수 없습니다. 이름이 무엇이든 의미와 목적이 있어야합니다. 클래스 이름의 의미론은 해당 HTML 요소와 다를 수 있습니다. HTML 요소, 특정 HTML 속성, 마이크로 데이터 등의 글로벌 의미를 사용한 다음 웹 사이트 또는 응용 프로그램의 로컬 특정 의미를 사용하여이를 구별 할 수 있습니다. 이 특정 의미는 일반적으로 클래스 속성과 같은 속성 값에 포함됩니다.
이 모범 사례는 HTML5 사양의 클래스 속성에 관한 장에서 반복됩니다 ...
… 개발자는 현재 존재하는 내용을 설명하기보다는 실제 콘텐츠를 설명하기 위해 클래스 속성 값을 사용하도록 권장됩니다.
... 그렇게 할 내재 된 이유는 없습니다. 실제로이 방법이 대규모 웹 사이트 나 응용 프로그램에 적용되면 종종 장벽이됩니다.
HTML 요소 및 기타 속성은 이미 컨텐츠 계층 의미를 제공합니다.
기계 나 방문자의 경우 클래스 이름이 공개 할 수있는 유용한 의미 정보가 거의 없습니다. 이미 동의 한 이름의 작은 부분이 아니라면 (기계가 읽을 수 있음) -mircoformats
클래스 이름의 주요 목적은 CSS 및 JavaScript의 고리입니다. 페이지에 성능과 동작을 추가 할 필요가 없다면 HTML에 클래스 이름을 추가 할 필요가 없습니다.
클래스 이름은 유용한 정보를 개발자에게 전달해야합니다. DOM 스 니펫을 읽으면 특정 클래스 이름의 특정 역할을 이해하는 데 도움이됩니다. 특히 다인원 협력 개발 팀에서 프론트 엔드 개발자는 HTML 구성 요소를 다루지 않을 것입니다.
아주 간단한 예를 들어 봅시다 :
XML/HTML 코드 복사 컨텐츠를 클립 보드에 복사합니다