개발새발 로그

3. 웹페이지의 구성하는 기본 태그 본문

HTML

3. 웹페이지의 구성하는 기본 태그

이즈흐 2023. 6. 1. 11:03

1. 문서 형식 정의 tag

문서 형식 정의(Document Type Definition, DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달한다. 문서의 최상위에 위치해야 하며 대소문자를 구별하지 않는다. 문서별 기술 양식은 아래와 같다.

 

HTML5

<!DOCTYPE html>

 

HTML 4.01

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

 

HTML 1.0

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

 

2. html tag

html 태그는 모든 HTML 요소의 부모 요소이며 웹페이지에 단 하나만 존재한다. 즉, 모든 요소는 html 요소의 자식 요소이며 html 요소 내부에 기술해야 한다. 단 <!DOCTYPE>는 예외이다.

3. head tag

head 요소는 메타데이터를 포함하기 위한 요소이며 웹페이지에 단 하나만 존재한다. 메타데이터는 HTML 문서의 title, style, link, script에 대한 데이터로 화면에 표시되지 않는다.

head 요소에는 메타데이터 이외의 화면에 표시되는 일체의 요소를 포함시킬 수 없다.

3.1 title tag

title 요소는 문서의 제목을 정의한다. 정의된 제목은 브라우저의 탭에 표시된다.

3.2 style tag

style 요소에는 HTML 문서를 위한 style 정보를 정의한다.

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

<link rel="stylesheet" href="style.css">

3.4 script tag

script 요소에는 client-side JavaScript를 정의한다.

<script>
      document.addEventListener('click', function () {
        alert('Clicked!');
      });
    </script>

3.5 meta tag

meta 요소는 description, keywords, author, 기타 메타데이터 정의에 사용된다. 메타데이터는 브라우저, 검색엔진(keywords) 등에 의해 사용된다.

charset 어트리뷰트는 브라우저가 사용할 문자셋을 정의한다.

<meta charset="utf-8">

<!--검색 엔진(SEO)에 의해 검색되는 단어를 지정합니다-->
<meta name="Keywords" content="Web, html, 웹 표준" />

<!--검색 결과에 표시되는 문자를 지정합니다. 웹페이지의 설명-->
<meta name="Description" content="Web, html, 웹 표준" />

<!--검색 로봇 제어-->
<meta name="Robots" content="noindex, nofollow" />

<!--웹페이지를 30초 마다 Refresh한다.-->
<meta http-equiv="refresh" content="30">

<!--웹페이지의 저자를 명기한다-->
<meta name="author" content="John Doe">

https://webclub.tistory.com/354

 

메타(meta)태그 정리

meta 태그 메타태그는 웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의하는데 사용합니다. HTML 문서의 사이에 입력하는 특수 태그로서 사이트의 디자인에는 전혀 영향을 미치지 않고 문서

webclub.tistory.com

 

4. body tag

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

 

 

내가 몰랐던 점

  1. meta태그에 대해서 자세히 알지 못했다.
  2. meta태그에서 SEO를 위한 키워드를 설정할 수 있다.

 

 

 

https://poiemaweb.com/html5-tag-basic

 

HTML5 Tag - Basic | PoiemaWeb

문서 형식 정의(Document Type Definition, DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달한다. 문서의 최상위에 위치해야 하며 대소문자를 구별하지 않는다. 문서별 기술 양식은 아래와 같

poiemaweb.com

 

728x90
반응형
LIST
저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

6. List와 Table형식 표현을 위한 태그  (0) 2023.06.01
5. HTML의 HyperLink  (0) 2023.06.01
4. 텍스트 관련 태그  (0) 2023.06.01
2. 시맨틱 웹(Semantic Web)  (0) 2023.06.01
1. HTML5  (0) 2023.06.01
'HTML' Related Articles more