너와 나의 개발 고리

[HTML] HTML의 기본 구조 본문

CSS _HTML_JavaScript/HTML

[HTML] HTML의 기본 구조

Oli-Viaaaa 2023. 6. 20. 00:26

HTML 문서는 일정한 구조 안에서 작성된다.

 

DTD

문서형 정의(DTD, Document Type Definition)는 웹 브라우저가 처리할 HTML 문서가 어떤 문서형식을 따라야 하는지

알려주는 것으로 HTML 문서를 작성할 때 항상 처음에 넣어야 한다.

<!DOCTYPE html>

 

html 태그

html 태그는 HTML문서의 시작과 끝을 의미한다. 따라서 모든 태그는 html 태그 안에 작성해야 한다.

 

head 태그

head 태그는 HTML 문서의 메타데이터(metadata)를 정의하는 영역이다. 

메타데이터란 HTML문서에 대한 정보(data)로, 웹브라우저에 직접 노출되지 않는다. 보통 meta, title, link, style, script 등의 태그를 사용하여 HTML 문서의 여러 정보를 정의한다.

 

  • meta 태그
<meta charset="UTF-8">

  meta 태그는 메타데이터를 정의하는 데 사용한다. 과거에는 EUC-KR을 주로 사용했지만

  최근에는 더 많은 언어를 허용하기 위해 UTF-8을 사용한다.

 

<meta http-equiv="X-UA-Compatible" content="IE=edge">

  위의 태그는 인터넷 익스플로러(이하 IE)의 렌더링 엔진을 강제로 최신 렌더링 엔진으로 지정하는 메타데이터를 나타낸다.

 

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

  위의 태그는 기기의 화면 너비의 맞추기 위해 사용하는 메타데이터 태그다

  뷰 포트(viewport)는 웹 페이지에 접속했을때 사용자에게 보이는 화면영역을 의미한다.

 

  • title 태그

title 태그는 HTML 문서의 제목을 지정하는데 사용한다.

 

모든 HTML 문서는 반드시 1개의 title 태그를 사용해 HTML 문서의 제목을 지정해야하며

이때 제목은 HTML문서마다 중복되지 않도록 주의한다.

 

문서 제목이 왜 중복되면 안되는가?

구글이나 네이버 같은 검색 엔진 사이트에서 HTML 문서를 찾을 때는 title 태그에 작성된 제목으로 찾는데 만약 한 웹 사이트에서 제목이 중복된 문서가 여러개 발견된다면 검색 엔진은 해당 웹 사이트가 신뢰성이 떨어진다고 판단하여 검색 엔진 노출 시 불이익을 준다.

 

 

 

body 태그

body 태그는 웹 브라우저에 노출되는 내용을 작성하는 영역으로 웹 브라우저에서 표시되는 모든 내용은 body 태그 영역 안에 작성한다.

'CSS _HTML_JavaScript > HTML' 카테고리의 다른 글

[HTML] HTML 링크와 이미지 넣기  (0) 2023.06.25
[HTML] HTML ul 태그의 스타일 변경(아이콘, 배열, 글자색, 크기, 글씨체, 배경색 변경)  (0) 2023.06.23
[HTML] 목록을 만드는 ul태그, ol태그, dl태그  (0) 2023.06.23
[HTML] HTML 텍스트 작성(hn 태그, p 태그, br 태그, blockquote 태그, q 태그, ins 태그, del 태그, sub태그, sup 태그, div 태그, span 태그)  (0) 2023.06.20
[HTML] HTML의 기본 구성 요소  (0) 2023.06.20
'CSS _HTML_JavaScript/HTML' Related Articles more