[HTML&CSS]: 번외) Semantic Code

[HTML] 시맨틱 태그(Semantic Tag)와 시맨틱 웹(Semantic Web) (feat. 웹 크롤링, 인덱싱)

​
​


웹개발을 하는 개발자에게 가장 필요한 능력은 무엇일까요?

가독성 좋은 코드를 짜는 것?

웹 툴을 능숙하게 다루는 것?
​
이에 대한 해답은 시맨틱 코드(Semantic Code)에 있을 것 같습니다.
​
​
출력 결과는 서로 비슷하지만, 그 의미는 전혀 다른 두 코드를 통해 시맨틱 코드에 대해 알아보겠습니다.
​

​
위에서 두 줄의 코드는 모두 같은 모습을 하고 있습니다.
​
하지만, 첫번째 코드는 '제목(Head)'을 나타내주는 < h > 태그를 이용해 코드를 짠 반면, 두번째 코드는 텍스트를 강조하는 기능을 가진 < strong > 태그로 코드를 짰습니다.

둘 중 컴퓨터가 '제목'이라고 인식하는 코드는 어떤 코드일까요?

만약 브라우저가 이 코드를 읽는다면, 제목 부분을 과연 어떤 코드로 인식하게 될까요?
​
둘 다 출력된 결과물은 같지만, '제목'이라는 의미를 부여한 것은 제목을 나타내는 < h > 태그를 사용한 첫번째 코드일 것입니다.
​
​
​
아래의 코드에도 서로 다른 두 코드가 있습니다.
​

​
'순서화된 목록(Ordered List)'을 나타내주는 < ol >태그, '목록(LIst)'을 나타내주는 < li >태그를 함께 사용하여 코드를 짠 첫 번째 코드와, 단순히 사용자가 직접 숫자와 점, '줄바꿈(line BReak)'을 나타내는 < br >태그를 이용하여 코드를 짠 두 번째 코드가 있습니다.
​
앞선 예시와 마찬가지로, 이 중 '목록'이라는 의미를 제대로 담은 코드는 < ol >과 < li >를 사용한 첫 번쨰 코드일 것입니다.
​
이처럼, 의미있는 코드와 웹페이지를 만들기 위해서는, 코드 자체의 의미를 지닌 태그들을 통해 코드를 짜는 것이 중요합니다.
​
​
​

Semantic Tag : 의미를 가지는 태그 (feat. Web Crawling)

​
시맨틱 태그(Semantic Tag)는 그 자체로 태그에 대한 의미가 담긴 코드입니다. 이 시맨틱 태그에 의 해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 데이터를 활용할 수 있는 시맨틱 웹(Semantic Web) 을 실현할 수 있습니다.
​
HTML 5 부터 새롭게 도입된 시맨틱 태그의 대표적인 예시는 다음과 같습니다.
​

1) header: 제목, 웹사이트를 나타내는 로고, 검색 폼, 작성자 드의 이름을 포함시킬 수 있는 부분.
2) nav: navigation의 약자로, 보통 메뉴,목차 등에 사용.
3) footer: 웹사이트 가장 아래에 부가적인 정보나 링크를 넣을 떄 사용.
4) main: 현재 웹사이트에서 메인이 되는 컨텐츠.
5) aside: 광고, 페이지 관련 다른 링크 등 메인 컨텐츠와 직접적인 상관이 없는 내용들을 넣을 때 사용.
6) article: 문서 본문 중 독립된 콘텐츠를 넣을 때 사용.
7) section: 문서에서 독립적인 특정 영역. (article과의 차이점이라면, article은 그 자체로 독립된 컨텐츠이고, section은 컨텐츠 여러 개의 묶음.)
​
​
사용자가 구현한 HTML페이지를 가져와서, HTML/CSS등을 파싱(Parsing: 구문 분석)하고, 필요한 데이터를 추출하는 기법을 크롤링(Crawling) 이라고 합니다.
​
그리고 사용자가 검색할 만한 키워드를 미리 예측하여 검색 키워드에 대응하는 색인(인덱스)을 만들어 두는데, 이러한 기법을 인덱싱(Indexing) 이라고 합니다.
​
검색엔진은 로봇(Robot)이라는 프로그램을 사용하여 앞서 말한 웹 크롤링을 통해 매일 전 세계 웹사이트의 정보를 수집합니다.
​
* 따라서 시맨틱 태그로 구성되어 있는 웹페이지는 검색엔진에게 보다 의미론적으로 가치 있는 문서 정보를 전달할 수 있고,
검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱을 할 수 있는 것입니다. *