WHAT
해석 그대로 의미론적인 웹이라고 해서, 컴퓨터가 웹사이트를 단순한 코드의 구성이 아닌 의미를 가진 사이트라는걸 알 수 있게 만드는 프레임워크.
시맨틱 웹의 이상향은 인터넷에 방대한 양의 데이터를 컴퓨터가 자동으로 해석해 사용자가 원하 는 결과값을 정확히 주는 것이다.
HTML5 이후로 등장.
WHY
WHAT
div tag로만 모든 구조를 짜는 것보다 더 한 눈에 알아볼 수있기 때문에, 다른 개발자들이 코드를 유지보수하기가 더 편해진다.
header : 제목, 웹싸이트를 나타내는 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있다.
nav : header 안에 여러가지 메뉴들이 모여있을 때 사용하면 간편하다.
footer : 필수는 아니지만, 웹싸이트 제일 아래에 부가적인 정보나 링크가 있을 시 사용하면 좋다.
main : 현재 웹싸이트에서 중요한 컨텐츠는 main 태그 사용하면 좋다.
aside : main 안에서도 페이지의 컨텐츠와 직접적인 상관이 없는 내용들은 여기에 집어넣는 게 좋다. ex) 광고, 페이지와 연관된 다른 링크들 등
article, section : main 안에서도 div로만 구성하기보다는 용도에 따라서 이 두개의 tag를 사용해볼 수있다.
why
검색을 최적화하기 위해서 우리가 제목, 부제목, 시멘틱 테그를 잘 활용한다면, 특정 키워드로 검색했을 때, 내가 만든 웹싸이트가 검색창에 노출될 수 있다. 다시 말해서, 브라우져의 검색 엔진이 내가 만든 웹싸이트를 어떤 검색 결과에 띄워줘야 될지를 알려줄 수있다.
웹페이지를 시각적이 아니라, 음성으로 읽어주는 "스크린리더"를 이용하거나 또는 키보드만을 이용해서 내가 만든 웹싸이트를 이용하는 경우, 적절한 시멘틱 태그로 잘 만들어진 웹싸이트라면 스크린리더이든, 키보드만을 사용해서 동작하든 문제없이 동작할 수 있습니다.
웹페이지에 이미지를 넣는 방식은 크게 두 가지가 있다.
1번. HTML에서 < img > 태그를 활용해 넣는 방법.
2번. CSS 에서 background-image 속성을 활용해 넣는 방법.
그렇다면 이 둘의 차이점
1번은 이미지 로딩이 실패할 때, alt="대체 메시지"로 대체 결과물을 출력할 수 있지만 2번은 그렇지 못하다.
1번은 HTML이 구문 분석될 때 요청이 이루어지므로 성능면에서 2번보다 좋다.
1번은 검색 엔진에서 색인을 생성하여 검색시에 노출이 되지만 2번은 자동으로 색인화하지 않기 때문에 검색 시 노출되지 않는다.
그럼 이 둘의 사용법
1번 HTML < img > 태그 활용
검색 시 노출이 되도록 만들고 싶을 때
콘텐츠에 관련이 있는 이미지일 때
웹페이지 성능을 높이고 싶을 때
2번 CSS background-image 속성 활용
디자인적인 요소로만 이미지를 활용하고 싶을 때
콘텐츠와 관련이 없어 이미지를 불러오지 못해도 상관 없을 때
결론 검색 노출과 성능, 디자인을 고려하여 두 가지 방법을 적절히 혼용하는 것이 바람직하다.