<h1>Hello</h1>
<font size="6"><b>Hello</b></font>위의 두개의 요소는 브라우저에서 동일한 외형을 갖는다. h1이라는 태그의 디폴트 스타일이 두번째 행의 스타일과 동일하기 때문이다. 하지만 이 두 요소는 브라우저에서 큰 차이가 있다.
두번째 행의 요소는 의미론적으로 어떤 의미도 가지고 있지 않다.
즉, 의도가 명확하지 않다는 것이다. 개발자가 의도한 요소의 의미를 명확하게 나타내지 않고 폰트 크기와 볼드체를 지정하는 메타데이터만을 브라우저에게 알리고 있다.
반면 h1 태그는 제목 중 가장 상위 레벨이라는 의미를 내포하고 있어서 개발자가 의도한 요소의 의미가 명확히 드러나고 있다.이것은 코드의 가독성을 높이고 유지보수를 쉽게한다.
검색엔진은 대체로 h1 요소 내의 콘텐츠를 웹문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높다. 또한 사람도 h1 요소 내의 콘텐츠가 제목임을 인식할 수 있다. 시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있고 검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해졌다.
- 크롤링(crawling) : 검색엔진이 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집하는 것을 말한다. (검색엔진의 크롤러가 이를 수행한다)
- 인덱싱(indexing) : 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 두는것을 말한다. (검색엔진의 인덱서가 이를 수행한다)
*인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다. 즉, 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Semantic element)를 해석하게 된다.
Semantic Tag
브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다. 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.
Semantic Web
웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
Semantic 요소
: form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다.
(html5 추가 : header, footer, section, nav, aritcle, aside)
Non-Semantic 요소
: div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.
<img>태그사용 VS <div>에 backgound-image속성의 추가
img 태그는 시멘틱요소이고 div는 논시멘틱요소로 속성으로 이미지를 지정한다.
이미지가 사용자에게 내용을 이해하는데 도움을 준다면 img태그를 사용하고 그렇지 않다면 background-image속성을 사용하자
img 태그 사용시의 특징
- HTML에서 사용가능
- SEO에 효과적
- background-image보다 성능측면에서 효과적
- 이미지 불러오지 못했을 경우 default값으로 broken이미지와 alt텍스트가 보인다
어떤경우에 사용하는것이 좋은가
- 검색 시 노출이 되도록 만들고 싶을 때
- 프린트가 필요한 경우 : 백그라운드 이미지는 출력시 포함되지 않는다.
- 이미지에 문구가 사용되어 의미를 가지는 경우 : alt 태그를 사용해 의미 설명 가능하다.
- 이미지가 중요한 경우 : 콘텐츠에 관련이 있는 이미지일 때
- 웹페이지 성능을 높이고 싶을 때
background-image 속성 사용시의 특징
- CSS에서 사용가능
- 이미지 불러오지 못했을 경우 default값으로 아무것도 보이지 않는다
어떤경우에 사용하는것이 좋은가
- 디자인적인 요소로만 이미지를 활용하고 싶을 때
- 일정부분만 선택해 보여줄 경우 : 간단하게 css를 사용하여 이미지를 손 쉽게 변경 가능. (ex. hover버튼)
- 이미지 위에 텍스트가 들어가는 경우 : 백그라운드로 중요도가 높지 않을 때
- 페이지 전체 출력시 이미지를 제거해야 되는 경우 : 이미지가 출력되면 곤란한 경우거나 겹치는 경우
- CSS sprites를 사용해 이미지 속도를 향상시킬 경우 : CSS sprites 기법을 사용하면 이미지의 수정, 보관, 관리가 용이하고 미리 다른 아 이콘 영역도 읽어들여 로딩 속도도 향상 가능.
- 배경 전체에 확대해 보여줄 필요가 있는 경우 : background-size 등의 속성을 사용해 배경 이미지를 간단하게 조작 가능.
- 콘텐츠와 관련이 없어 이미지를 불러오지 못해도 상관 없을 때
