HTML과 CSS 기초를 복습했다.
Semantic Web, Semantic Tags에 대해서 알아보자
간단한게 말하면 문서의 의미에 맞게 구성된 웹이다.
수많은 웹페이지가 생겨나면서 우리에게 필요하고 유익한 정보들도 많지만, 불필요한 정보들도 넘쳐나게 되었고, 이렇게 되면 사람들이 일일이 수 많은 정보들 가운데에 자신이 필요한 정보를 찾아나서야 하는 문제점이 생기게 됩니다.
이러한 문제점을 해결하기 위한 방법이 "시맨틱 웹"이라는 개념이었고, 웹의 창시자 '팀 버너스 리(Tim Berners-Lee)'가 제안했어요.
시맨틱 웹(Semantic Web)은 "의미론적인 웹"이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미한다( 물론 사람도 이해할 수 있다)- Wikipedia
과거 무분별한 태그의 사용으로 인해 정보를 찾기 위해 사람이 직접 개입해야 하는 비효율적인 시스템을 개선하고자, 의미있는 태그들을 개발하기 시작했다.
non-semantic Tag 와 semantic Tag를 비교해보면
시맨틱 태그는 이처럼 의미를 브라우저와 개발자 모두에게 전달할 수 있다.
HTML5에서는 Semantic Tag(시맨틱 태그)를 사용하여 코드의 가독성을 높이고 의미를 명확하게 해주는 장점이 있다.
<img>
- img 태그를 사용하면 alt 속성에 문자열로 내용을 설명할수 있다.
- alt속성에 설명한 내용은 meta정보가 되어 검색 엔진에서 인식하여 구글링을 용이하게 해주며 검색 시 노출 될수 있도록 한다.
반면에 background-image 속성에 있는 이미지는 구글에서 크롤링 하거나 색인을 생성하지 않고, 이미지에 대한 정보를 가지고 있지 않다.
👉 해당 이미지가 사용자의 검색에 노출되려면 img태그를 이용하는 것이 좋다.
👉 이미지에 대한 설명이나 내용이 중요한 것이 아니라 단순한 사이트의 꾸밈이나 장식이라면 background-image를 사용한다.
프론트엔드 개발자에게 마크업 구조를 시맨틱하게 짜는 것은 매우 중요하다!
디자인 시안과 똑같이 마크업을 짜는것도 중요하지만,단순히 시각적 형태로만 볼 것이 아닌, 데이터를 보여주어야 함!
의미론적으로 마크업 구조를 짜야 하고 태그들을 적절한 상황에 맞게 사용해야 누가 보아도 이해하기 쉽다.
** 마크업 언어 : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어
-<article>
내용을 정의한다.
-<aside>
페이지 콘텐츠를 제외한 콘텐츠를 정의한다.링크, 광고, 사이드바 표시 등.
-<details>
사용자가 보거나 숨길 수있는 추가 세부 정보를 정의한다.
-<figcaption>
<figure>
요소에 대한 캡션을 정의한다.
-<figure>
일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 된 콘텐츠를 지정한다.
-<footer>
문서 또는 섹션의 바닥글을 지정한다. 주로 저작권, 연락처 정보 등 내용이 삽입되며 header, section, article 등 다른 레이아웃 사용가능.
-<header>
문서나 섹션의 머릿글을 지정한다. 사이트 맨 위쪽이나 왼쪽에 사용하며 헤더 안에 -<form>
태그를 이용, 검색창을 넣거나 <nav>
태그를 이용해 사이트메뉴를 넣는다.
-<mark>
강조표시된 텍스트를 정의한다. 형광펜을 칠한 것처럼 노랗게 칠해진다.
-<nav>
네비게이션 링크를 정의한다. 같은 사이트내의 링크나 다른 사이트로의 링크들의 모음이다.
-<section>
: <header>
, <footer>
와 함께 문서의 구역을 정의한다.
-<section>
안에 <section>
을 넣을 수도 있고, <article>
을 이용해 내용을 넣는다.
-<summary>
:<details>
요소를 위한 눈에 보이는 제목을 정의한다.
-<time>
날짜/시간을 정의한다.
새미님 정리왕..? 🤭👏🏻