시멘틱 웹
HTML이란?
HTML: 하이퍼텍스트 마크업 언어라고 하며, 하나의 웹 페이지에서 다른 웹페이지로 연결시켜주는 문서의 구조를 태그로 작성하는 것을 말한다. 반대로 마크다운 언어는 태그로 작성하지 않는다. HTML로 작성된 문서를 웹 페이지라고 하며, 같은 웹 페이지들의 집합을 웹 사이트라고 한다.
마크업
<html></html>
마크다운
HTML의 정의에서 문서의 구조를 태그로 작성하는 것이라고 했는데, 이와 같이 HTML 문서에서는 구조만을 파악할 수 있도록 스타일링을 하지 않으며, 의미에 맞는 태그를 사용해야한다. 이것은 웹 페이지를 검색했을 때 컴퓨터가 해석할때에도 적용이 된다. 가령 의미가 없는 태그들로 만든 페이지와 의미가 있는 태그들로 만든 페이지는 검색 엔진으로 검색했을 때 어떤 큰 차이가 있을까?
의미가 없는 태그들을 non-semantic 태그라고 하며 div태그와 span태그가 이에 해당한다. 반대로 의미 있는 태그들을 semantic 태그라고 하며 header, aside, footer, h1 태그 등이 이에 해당한다. 예를들어 내가 작성한 글을 불특정 사용자에게 노출시키고 싶다. 사용자는 키워드 중심으로 검색을 하게되는데, 제목을 non-semantic 태그로 작성되어있다면? 아마도 영영 아무도 보지 못할 것이다. 그러나 semantic 태그로 작성된 제목이라면? 1페이지에 노출되지 않을까? 그런 의미에서 HTML 문서는 semantic 태그로 의미를 명확하게 해석할 수 있도록 작성해야한다.
| tag | description |
| header | 헤더를 의미한다. 웹 페이지의 상단부 |
| nav | 다른 문서로 연결하는 것을 의미한다. |
| aside | 사이드에 위치하는 공간을 말한다. |
| section | 구역을 설정한다. |
| article | 독립된 내용을 작성할 때 사용한다. |
| footer | 주소나 연락처를 작성할 때 사용한다. |
semantic 태그 부가적인 내용
HTML에서 img태그와 CSS에서 background 속성을 이용한 이미지 삽입
// HTML에서 semantic 태그를 이용한 이미지 삽입
<img src="https://www.w3schools.com/whatis/img_js.png" alt="js2">
// non-semantic 태그를 이용한 이미지 삽입
<div style="background: url(https://www.w3schools.com/whatis/img_js.png) 100% no-repeat;
width: 350px; height: 400px;"></div>위에서 살펴봤듯이 img태그를 사용한 이미지 삽입은 검색 엔진에 노출이되며, div태그를 사용하면 노출되지 않는다.
그런데 이것을 보완할 수 있지 않을까? 생각했다. 초보일 때 웹 페이지를 만들어본 사람은 알 것이다.. img태그를 사용하여 웹 페이지를 만들게 되면 디자인할 때 상당히 까다롭다. 하지만 css 속성으로 이미지를 삽입하면 제어하기 상당히 쉽다. 이것의 문제는 의미있는 태그를 사용하지 않았다가 문제인데.. 이미지 태그와 마찬가지로 이미지를 나타내는 태그가 한개 더 있다. 바로 figure 태그다. 내가 생각한 방법은 이와 같다.
1. img 태그를 사용하여 이미지를 삽입한 뒤 display를 none으로 줘서 없앤다.
2. img 태그의 부모요소로 figure태그를 사용한다.
3. figure태그에 background 속성을 사용한다.
이렇게하면 검색엔진에 노출되며, 디자인적으로도 제어하기 쉽게 사용할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
figure {
width: 200px;
height: 200px;
background-image: url(fdfd.jpg);
}
img {
display: none;
}
</style>
</head>
<body>
<figure>
<img src="fdfd.jpg" alt="사진">
</figure>
</body>
</html>