Semantic Web
- 컴퓨터가 데이터를 이해할 수 있도록 의미에 맞게 구성된 웹을 말합니다.
- 웹을 구성할때 적절한 위치에 적합한 요소를 활용하여 의미를 가진 하나의 구조로 만들어야 사용자에게 정확한 정보를 제공할 수 있습니다.
Semantic Tag
의미론적인 태그를 사용하면 SEO(검색엔진 최적화) 웹 접근성 가독성 이 좋아지고 웹이 제공하는 데이터가 사용자에게 의미에 맞게 전달되도록 도와줍니다.
| article | 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다. |
| aside | 문서의 주요 내용이 아닌 간접적으로 연관된 부분을 나타냅니다. 사이드바, 콜 아웃 박스 등 |
| details | 내부 정보를 보여주는 정보 공개 위젯을 생성합니다. |
| figcaption | 부모요소 <figure> 가 포함하는 다른 콘텐츠에 대한 설명을 나타냅니다 |
| figure | 독립적인 콘텐츠를 표현합니다. |
| figcaption | 요소를 사용해 설명을 추가할 수 있습니다. |
| footer | 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다. |
| header | 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고 등 |
| main | 의 주요 콘텐츠를 나타냅니다. |
| mark | 중요한 정보를 포함한 부분을 나타냅니다. |
| nav | 문서의 부분 중 내부 또는 외부 링크를 보여주는 구획을 나타냅니다. |
| section | 문서의 독립적인 구획을 나타냅니다. 제목을 포함하지만 항상 그런 것은 아닙니다. |
| summary | <detail> 요소의 상세 요약 및 캡션 또는 범례를 지정합니다. |
| time | 시간의 특정 지점 또는 구간을 나타냅니다. |
참고자료 https://www.w3schools.com/html/html5_semantic_elements.asp
Non-semantic Tag
| div | span |
- content에 대한 정보를 포함하지 않기 때문에 요소의 의도가 명확하지 않습니다.
- div span으로만 짜여진 코드는 가독성이 떨어지기 때문에 유지 보수에 용이하지 않습니다.
Semantic Elements
- content의 의미를 명확하게 보여줍니다.
- 검색 엔진에서 검색을 용이하게 합니다.
예시
<div id="main">
...
</div>💡HTML5에서는 <main>으로 작성할 수 있습니다.
<main>
...
</main>
Semantic Tag VS Non-semantic Tag
사이트에 이미지를 넣을 때 사용하는 두 가지 방법으로 이유를 알아보겠습니다. 아래 두 방식은 웹 브라우저에 노출되는 모습은 동일합니다. 그러나 분명한 차이점이 존재합니다.
img 태그 사용
semantic tag를 사용하기 때문에 컴퓨터가 이미지로 이해하게 됩니다. img 태그의 alt 속성을 추가하여 이미지가 안보일 시 이미지의 정보를 설명합니다. 이는 웹의 노출을 위한 검색엔진최적화(SEO)와 사용자에게 정보 전달을 할 수 있는 장점이 있습니다.
background-image 속성 사용
의미를 담고 있는 semantic tag 가 아닌, 그저 미적 요소로 이미지를 노출하기 위한 css 속성을 사용하기 때문에 이미지에 대한 어떠한 정보도 포함하지 않습니다. 이미지가 웹의 디자인적인 측면으로만 사용될 경우에 적합한 방식입니다.
Frontend