1. Semantic web

WHAT

• 해석 그대로 의미론적인 웹이라고 해서, 컴퓨터가 웹사이트를 단순한 코드의 구성이 아닌 의미를 가진 사이트라는걸 알 수 있게 만드는 프레임워크.

• 시맨틱 웹의 이상향은 인터넷에 방대한 양의 데이터를 컴퓨터가 자동으로 해석해 사용자가 원하 는 결과값을 정확히 주는 것이다.

• HTML5 이후로 등장.

WHY

• 안써도 겉으로 보이기엔 똑같지만 검색 엔진 최적화(SEO)에서 중요한 역할을 하기 때문에 검색결과에서 상단을 차지하고 싶다면, 쓰는것을 습관화 하는 것이 좋다.

2. Semantic tag

WHAT

div tag로만 모든 구조를 짜는 것보다 더 한 눈에 알아볼 수있기 때문에, 다른 개발자들이 코드를 유지보수하기가 더 편해진다.

header : 제목, 웹싸이트를 나타내는 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있다.

nav : header 안에 여러가지 메뉴들이 모여있을 때 사용하면 간편하다.

footer : 필수는 아니지만, 웹싸이트 제일 아래에 부가적인 정보나 링크가 있을 시 사용하면 좋다.

main : 현재 웹싸이트에서 중요한 컨텐츠는 main 태그 사용하면 좋다.

aside : main 안에서도 페이지의 컨텐츠와 직접적인 상관이 없는 내용들은 여기에 집어넣는 게 좋다. ex) 광고, 페이지와 연관된 다른 링크들 등

article, section : main 안에서도 div로만 구성하기보다는 용도에 따라서 이 두개의 tag를 사용해볼 수있다.

why

• SEO ( Search engine optimization )

검색을 최적화하기 위해서 우리가 제목, 부제목, 시멘틱 테그를 잘 활용한다면, 특정 키워드로 검색했을 때, 내가 만든 웹싸이트가 검색창에 노출될 수 있다. 다시 말해서, 브라우져의 검색 엔진이 내가 만든 웹싸이트를 어떤 검색 결과에 띄워줘야 될지를 알려줄 수있다.

• 웹 접근성

웹페이지를 시각적이 아니라, 음성으로 읽어주는 "스크린리더"를 이용하거나 또는 키보드만을 이용해서 내가 만든 웹싸이트를 이용하는 경우, 적절한 시멘틱 태그로 잘 만들어진 웹싸이트라면 스크린리더이든, 키보드만을 사용해서 동작하든 문제없이 동작할 수 있습니다.

• 유지보수성

3. img vs background-img 차이점

웹페이지에 이미지를 넣는 방식은 크게 두 가지가 있다.
1번. HTML에서 < img > 태그를 활용해 넣는 방법.

2번. CSS 에서 background-image 속성을 활용해 넣는 방법.

• 그렇다면 이 둘의 차이점
  1번은 이미지 로딩이 실패할 때, alt="대체 메시지"로 대체 결과물을 출력할 수 있지만 2번은 그렇지 못하다.
  1번은 HTML이 구문 분석될 때 요청이 이루어지므로 성능면에서 2번보다 좋다.
  1번은 검색 엔진에서 색인을 생성하여 검색시에 노출이 되지만 2번은 자동으로 색인화하지 않기 때문에 검색 시 노출되지 않는다.

• 그럼 이 둘의 사용법

• 1번 HTML < img > 태그 활용
  검색 시 노출이 되도록 만들고 싶을 때
  콘텐츠에 관련이 있는 이미지일 때
  웹페이지 성능을 높이고 싶을 때

• 2번 CSS background-image 속성 활용
  디자인적인 요소로만 이미지를 활용하고 싶을 때
  콘텐츠와 관련이 없어 이미지를 불러오지 못해도 상관 없을 때

결론 검색 노출과 성능, 디자인을 고려하여 두 가지 방법을 적절히 혼용하는 것이 바람직하다.