[Web] Semantic Web

1. 개요

► Semantic Web

• 웹 데이터를 의미론적으로 표현하고 연결하는 개념
• for 컴퓨터가 데이터의 내용과 문맥을 더 효율적으로 이해하고 더 지능적으로 활용

 

2.  Semantic in HTML

► HTML Semantic Element

• 기본적인 모양과 기능 이외에 의미를 가지는 HTML 요소
• 검색엔진 및 개발자가 웹 페이지의 콘텐츠를 이해하기 쉽게 만들어줌

semantic element	설명
header	introductory content, typically a group of introductory or navigational aids
nav	purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
main	the central topic of a document, or the central functionality of an application
article	a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
section	represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.
aside	content is only indirectly related to the document's main content
footer	the author of the section, copyright data or links to related documents.

https://developer.mozilla.org/en-US/docs/Glossary/Semantics

Semantics - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

 

 

3. Semantic in CSS

► OOCSS

• Object-Oriented CSS : 객체 지향적 접근법을 적용하여 CSS를 구성하는 방법론

 

 

► BEM

• Block Element Modifier : 블록, 요소, 수정자를 사용해 클래스 이름을 구조화하는 방법론
• Block
  • 문단 전체에 적용된 요소 또는 요소를 담고 있는 컨테이너
  • 재사용 가능한 독립적 블록, 가장 바깥쪽 상위요소
  • 재사용을 위해 Margin 또는 padding을 적용하지 않음
• Element
  • block이 포함하고 있는 한 조각
  • 블록을 구성하는 종속적인 하위요소
• Modifier
  • block 또는 element의 속성

4. 참고

► BEM & OOCSS 목적

• 재사용 가능한 모듈로 분리함으로써 유지보수성과 확장성을 향상
• 개발자 간의 협력이 향상되어 공통 언어와 코드 이해를 확립
• Airbnb 스타일 가이드 >  https://github.com/airbnb/css#oocss-and-bem

 

► 의미론적인 마크업의 이점

• 검색 엔진이 해당 웹 사이트를 분석하기 쉽게 만들어 검색 순위에 영향을 줌
• 시각 장애 사용자가 스크린 리더기로 웹 페이지를 사용할 때 추가적으로 도움

 

► 클래스 이름이 너무 길다면?

• 클래스 이름이 무엇을 나타내는가? + 분명하게 전달할 수 있는가?
• 빠르고 명확한 표기를 우선적으로 했는가?
• 너무 많은 고민을 하지 않았는가? 

 

---

https://docs.emmet.io/cheat-sheet/

Cheat Sheet