시맨틱 웹, HTML 태그 - Day2

공지수·2021년 3월 31일
0

TIL

목록 보기
2/2

시맨틱 웹, HTML태그

- 시맨틱 웹 (Semantic Web)

크롬이나 사파리, 익스플로러와 같은 브라우져로,
Google이나 Naver와 같은 검색엔진으로 웹사이트를 검색할때, 중요한은 SEO다.
SEO 란 검색엔진 최적화(Search Engine Optimization)이며 마케팅 도구를 사용하여 검색엔진이 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정한다.

검색엔진은 로봇(Robot)이라는 프로그램을 이용하여 전세계 웹사이트의 정보를 수집한다.
또한 이것을 크롤링 이라고 한다.
검색 사이트는 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인을 만들어 두는데, 이것을 인덱싱 이라고 한다.
인덱스를 생성할 때 사용되는 정보는 웹사이트의 HTML코드이다.
즉 HTML코드 만으로 로봇이 그 의미를 인지하며, 이때 시맨틱 요소(Sementic Element)를 해석하게 된다.

<font size=“6”><b>Hello</b></font>
<h1>Hello</h1>

이 두 행은 브라우저상 보이는것은 같지만 의미론적으로 전혀 다르다.
1행의 폰트사이즈와 볼드 태그로 감싼 Hello 는 의도가 명확하지 않다.
폰트 크기와 볼드체를 지정하는 메타데이터만을 브라우저에게 알리고 있다.
그러나 2행의 h1태그로 감싸진 Hello 는 의미적으로 header(제목)중 가장 상위 레벨이라는 의미를 내포하고 있어서, 개발자가 의도한 요소의 이미가 명확히 드러난다. 또한 검색엔진의 로봇에게 알맞은 정보를 제공해, 더욱 검색엔진의최적화에 알맞는 웹사이트라고 인식하게 된다.

HTML 요소는 non-sementic 요소, semantic 요소로 구분할 수 있다.

Non-semantic 요소

div, span 등이 있으며 이들 태그는 내용에 대하여 어떠한 설명도 하지 않는다.

Semantic 요소

Form, table, img, header, nav, aside, section, article, footer 등이 있다.


- 문서 형식 정의 Tag

2021.03.30 일은 HTML5를 사용하고 있으며 HTML5의 웹사이트 문서 형식 정의는 다음과 같다.(대소문자를 구분하지 않음)

HTML5 = <!DOCTYPE html>

HTML4.01 = <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML.1.0 = <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

- Html tag

Html 태그는 모든 HTML 요소의 부모 요소이며 웹페이지에 단 하나만 존재한다.
즉 모든 요소는 HTML요소의 자식 요소이며 HTML 요소 내부에 기술해야 한다.

<!DOCTYPE HTML> *이 첫번째 행은 HTML요소의 자식 요소가 아니다.
<html lang=“ko”> *이 HTML 웹페이지는 한국어를 주언어로 사용하는 웹페이지의 예이다.
  <head>
    <meta charset="utf-8">
    <title>문서 제목</title>
  </head>
  <body>
    화면에 표시할 모든 콘텐츠는 이곳에 기술한다.
  </body>
</html>

- Head tag

Head 태그 사이에는 document title, 외부 파일의 참조, 메타데이터의 설정 등이 위치하며 이 사이에 있는 정보들은 브라우저에 표시되지 않는다. = (웹 사용자에게 보이지 않는 내용이다.)
Title 요소는 문서의 제목을 저으이한다. 정의된 제목은 브라우저의 탭에 표시된다.


- Style tag

Style 요소에는 HTML 문서를 위한 Style 정보를 정의한다.
CSS에서 사용되는 내용이 스타일 태그에 들어간다.
외부 CSS스타일 시트를 불러오려면 Link 태그를 이용해야 한다.


Link 요소에는 외부 리소스와의 연계 정보를 정의한다.
주로 HTML과 외부 CSS파일을 연게하여 사용된다.


- Script tag

Script 요소에는 client-side Javascript를 정의한다.
이전에는 주로 자바스크립트의 내용을 head 태그 안에 script안에 삽입했다면, 최근에는 body 태그 제일 아래쪽에 배치하기도 한다.
이유는 웹페이지 로딩시간에 관한것인데, body 하단에 자바스크립트가 위치한다고 로딩이 빨리지는 것은 아니지만, 텍스트나 이미지등의 실제 사용자의 눈에 들어오는 정보가 빨리 먼저 로딩되고, 상대적으로 로딩시간이 더 걸리는 자바스크립트의 구현이 나중에 되기 때문에 빨라 보이는 효과가 있을 수 있다.
또한 스크립트 내부에 로딩 관련된 태그의 간소화가 될 수도 있는 여지가 있기 때문에 body태그 하단에 위치하기도 한다.


- Meta tag

Meta 요소는 description, Keywords, author, 기타 메타데이터 정의에 사용된다. 메타데이터는 브라우저, 검색엔진 등에 의해 사용된다.
대표적으로 meta 태그의 charset 어트리뷰트는 브라우저 사용할 문자셋을 정의한다.

Keywords 어트리뷰트는 SEO(검색엔진 최적화)를 위해 검색엔진이 사용할 키워드를 정의한다
.
Description 어트리뷰느는 웹페이지의 설명을 정의한다.

Author은 웹페이지의 저자를 명기한다.


- Boby tag

body는 HTML 문서의 내용을 나타내며 웹페이지에 단 하나만 존재한다.
메타데터를 제외한 웹페이지를 구성하는 대부분의 요소가 body 요소 내에 기술된다.

profile
Developer & Photographer

0개의 댓글