Semantic 및 Tag

크롤링

웹사이트의 정보를 수집하는 것을 뜻한다.

검색할 키워드에 대응하는 인덱스를 미리 만들어 검색을 용이하게 한다.

인덱스를 생성할 때 사용되는 정보는 웹사이트의 HTML 코드이다.

이 때 해석하는 것이 시맨틱 요소(Semantic element)이다.

HTML 코드 내에서 h1 요소 내의 콘텐츠가 중요한 의미를 담고 있다.

즉, 시멘틱 태그는 콘텐츠의 의미를 명확히 설명하는 역할을 한다.

 

시맨틱 웹

웹에 존재하는 수많은 웹페이지들에 메타데이터를 부여하여, 기존의 정리되지 않은 데이터 집합인 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 만드는 것이 목표이다.

HTML Semantic element

 

문서 형식 정의 tag

(Document Type Definition, DTD) tag 라 하며, 출력할 웹 페이지의 형식을 브라우저에게 전달한다.

문서의 최상위에 위치하며, HTML5의 기술 양식은 다음과 같다.

HTML5 DTD tag

또한, 모든 태그는 <@> ~ </@> 의 형태를 띄며, @에 필요한 형식을, ~에는 필요한 내용을 적는다.

html tag

모든 HTML 요소는 html tag의 자식 요소로 존재한다. 단, DTD는 예외이다.

 

head tag

메타데이터를 포함하며 단 하나만 존재한다.

메타데이터는 HTML 문서의 title, style, link, script에 대한 데이터가 포함된다.

화면에 표시되는 어떠한 요소도 들어올 수 없다.

 

title : 브라우저 탭의 이름

style : HTML 문서의 style 정보

link : 외부 리소스와의 연계 정보

script : client-side JavaScript를 정의하며, src 어트리뷰트를 사용하면 외부 JavaScript 파일을 불러온다.

meta : 메타데이터는 문서 자체에 대한 정보나 검색 엔진,브라우저 등에 문서의 특정 정보를 전달

 

 

body tag

HTML 문서의 내용을 나타내며, 웹페이지를 구성하는 대부분의 요소가 body에 나타난다.

 

<h1> : 제목 태그이며 h1에서 h6까지 있음

<p> : 단락을 지정함

<br> : 줄바꿈 처리, 종료태그가 없음  (cf  $nbsp 를 이용해 연속 공백도 가능)

<pre> : content까지 그대로 preformat

<hr> : 수평줄 삽입

<blockquote> : 들여쓰기

<strong> : bold체로 변환하며 Semantic 중요성을 가짐

<em> : Italic체로 변환하며 Semantic 중요성을 가짐

<small> : small text로 변환

<mark> : highlight 처리

<del> : 취소선 처리

<ins> : 아랫선 처리

<sub> , <sup> : 아래 첨자, 위 첨자로 변환

 

 

 

참고 : https://poiemaweb.com/