농경제학도의 지식창고

[HTML] title, meta, head, body, html 태그 본문

프로그래밍 언어/HTML

[HTML] title, meta, head, body, html 태그

Guk developer 2021. 5. 10. 21:04
본문은 '생활코딩'님의 <WEB1 - HTML & INTERNET> 강의를 수강하고 개인 학습용으로 정리한 내용입니다.

 

안녕하세요, 오늘은 HTML의 문서 구조를 담당하는 태그들에 알아보겠습니다

 

<title>, <meta>, <head>, <body>, <html> 총 4개의 태그를 살펴보겠습니다

#1. <title> 태그

<title> 태그는 웹 페이지의 제목을 변경할 수 있는 태그입니다

<title>WEB1 - HTML</title>

 

아래와 같이 웹 페이지 상단 바의 제목이 변경되었음을 확인할 수 있습니다

 

검색엔진의 기계들도 웹 페이지의 제목을 참고하여 검색에 알맞은 게시물을 검색하므로

<title> 태그를 사용하는 것은 굉장히 중요하다고 할 수 있습니다

#2. <meta> 태그

<meta> 태그는 웹 페이지의 정보를 설명하는 태그입니다

<meta> 태그는 그 중 인코딩 관련해서 자주 사용됩니다

 

본인이 원하는 인코딩 값을 charset 속성을 활용해서

한글 등 문자가 웹 브라우저 상에서 깨지지 않도록 해줍니다

 

<meta charset="UTF-8">

#3. <head> 태그

<head> 태그는 본문을 설명하는 코드를 감싸는 상위 코드입니다

<meta>, <title>과 같은 태그들을 <head> 태그를 활용해서 감싸줍니다

 

<head>
    <meta charset="UTF-8">
    <title>WEB - HTML</title>
</head>

 

#4. <body> 태그

<body> 태그는 <head> 태그와 달리 웹 페이지에 나타나는 링크, 텍스트 등

본문에 해당하는 내용을 감싸주는 태그입니다

 

위에서 <head> 태그로 감쌌던 <title>, <meta> 태그를 제외한

모든 태그를 <body> 태그로 감싼다고 생각하면 되겠습니다

 

<body>
	<h3>HTML이란 무엇인가?</h3> 
	<p>HTML은 Hyper Text Markup Language의 줄임말로...</p>
</body>

#5. <html> 태그

그리고 이러한 <head>, <body> 태그를 최종적으로 감싸는

최고위층 태그가 있는데 그것이 바로 <html> 태그입니다

 

<html>
    <head>
        <meta charset="UTF-8">
        <title>WEB - HTML</title>
    </head>
    <body>
       <h3>HTML이란 무엇인가?</h3> 
       <p>HTML은 Hyper Text Markup Language의 줄임말로...</p>
    </body>
</html>

오늘은 HTML의 기본 구조를 담당하는 태그들에 대해 살펴보았습니다

<title>, <meta>, <head>, <body>, <html> 태그는 거의 모든 웹페이지에서 사용되는 태그이니

웹 페이지를 제작할 때 까먹는 일이 없도록 유의해야겠습니다

'프로그래밍 언어 > HTML' 카테고리의 다른 글

[HTML] img 태그  (0) 2021.05.01
[HTML] br, p 태그  (0) 2021.04.30
[HTML] h 태그  (0) 2021.04.30
[HTML] strong, u 태그  (0) 2021.04.29
'프로그래밍 언어/HTML' Related Articles more
Comments