HTML (Hyper Text Markup Language) 는 한국어로 번역하면 '하이퍼본문표식달기언어' 이다.
나는 HTML 을 '의미'를 가진 태그들을 각각의 컨텐츠 들에 붙여준다는 것으로 이해하고 있다.
그 의미라는 것이 사람의 눈으로 보고 이해하기에 용이한 시각적 정보들로만 이루어진 경우가 많다. HTML 5 이후 Semantic Tag의 사용이 많아졌지만, 아직 그 이전에 만들어진 웹사이트들의 경우 메타데이터를 많이 가지고있지 않다.
Semantic Web
Semantic Web은 '의미론적인 웹'이라는 뜻이다. 쉽게 생각하면 '어떤 의미나 정보가 웹에 담겨있다'라고 말할 수 있을 것 같다.
Semantic Web에서는 시각적인 정보들 외에도 컴퓨터가 이해할 수 있는 메타데이터(Metadata)들이 부여된다는 것이고, 이상적으로 구현된다면 인터넷에 있는 방대한 양의 데이터를 컴퓨터가 자동으로 해석해 사용자에게 더 정확한 정보를 전달할 수 있게 될것이다.
Semantic Element
Semantic Element 는 명확하게 그 요소의 의미를 브라우저, 개발자, 사용자 모두에게 전달하는 요소이다.
- 예를들어
<form>, <table>, <article>, <nav>, <section>, <aside>등이 있다.
Non Semantic Element
- 대표적으로 쓰이고 있는
<div>, <span>이 그 예시이다. 이 요소들은 아무런 의미를 담고있지 않다.
Q :
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
<img>태그를 사용하는 것과<div>태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
img 태그를 사용해서 사이트에 이미지를 넣을 때는
- 첫번째로 실제 보여지는 이미지가 존재하고
- 두번째로 그 이미지가 이미지라는 것을 알려주는
<img>태그의 정보값이 있을 것이다. - 그리고 마지막으로 img 태그를 사용할 때는 alt 를 사용한다. alt에는 그 이미지가 어떤 이미지인지 설명하는 텍스트를 담기 때문에 직접 그 이미지를 볼 수 없는 장애인의 경우에도 스크린 리더를 사용하여 이미지를 이해할 수 있고, 브라우저나 웹 환경 등의 이유로 이미지가 화면에 구현되지 않더라도 텍스트로 확인할 수 있다. 그리고 이미지에 대한 설명을 넣을 수 있어 SEO에 노출되기에도 용이하다.
div 태그에 background-image 를 사용해 이미지를 넣을 때는
- div 태그 자체는 아무런 의미도 가지고 있지 않다. 그렇기에 div에 넣은 background-image 는 시각적 이미지에 불과하고, 그 외에 컴퓨터가 이해할 수 있는 다른 정보값을 가지고 있지 않다.
- 검색 엔진에 노출되기에도 적절하지 않다. 구글의 웹 크롤러가 정보를 모아 검색 색인에 정리할 때 이미지로 인식하지 않고, 낮은 단계의 쓸모없는 정보로 인식할 것이다.
