웹(Web)/HTML5

1-2. HTML 문서의 구조, html, head, body태그

도솔비 2020. 5. 2. 00:17

1-2. HTML구조

<!-- 문서의 기본구조 -->

<!doctype html>
<html>
    <head>
    ...
    </head>
    <body>
    ...
    </body>
</html>

<!doctype> : 문서유형선언문서의 유형을 지정하는 태그(같지만 태그가 아님)

html4에선 엄격모드, 호환모드, 프레임세트모드(기본값: 관용모드)등등 복잡하지만 html5에선 한줄로 끝

<!doctype>아니면 <!DOCTYPE>로 씀


<html> : 웹문서의 시작과 끝<head>와 <body>부분이 <html>과 </html>사이에 들어감
속성으로 lang이 쓰임

<html lang="언어코드"> ... </html>

lang으로 문서에서 사용할 언어를 지정가능

언어 독일어 영어 프랑스어 한국어 중국어 일본어
코드 de en fr ko zh ja

이외에도 엄청 많은데, ISO 639-1(국제표준화기구 언어약어 정의규정)에 따라 2글자 or 3글자 코드 할당.
참고 : https://homzzang.com/b/html-156


<head> : 문서에 대한 정보부분문서의 실질적인 내용이 아닌, 문서의 정보나 설정, 연결된 문서에 대한 내용이 들어감

* <head>태그안에 들어가는 태그

 

  • <meta>태그 :

    문자 인코딩, 문서키워드, 요약정보등을 표시하는 태그 (http-equiv, content, name 속성이 있음)
http-equiv="항목명" : name 속성 대신하여 사용(웹 브라우저가 서버에 명령 내리는 속성)
content="정보값" : meta정보의 내용을 지정
name="정보이름" : meta정보의 이름을 정할 수 있음(지정 안하면 http-equiv와 같은 기능)

한글의 문자 인코딩방법(utf-8)을 지정하는 코드

<meta charset="utf-8">

 

검색엔진에 의해 검색된 단어 지정하는 코드

<meta name="Keywords" content="검색되는단어">

 

검색결과에 표시되는 문자 지정하는 코드

<meta name="Description" content="페이지설명">

 

제목 지정하는 코드

<meta http-equiv="Title" content="웹 표준">

 

자세한 meta태그 정보는 참고 링크 : https://webclub.tistory.com/354

 

  • <title>태그 : 문서의 제목을 나타내는 태그 

문서 제목 설정하는 태그

<title>문서의 제목입니다</title>

 

  • <link> 태그 :
    주로 외부 파일을 연결할때 사용하는 태그(css파트에서 자세히 설명)
  • <style> 태그 :
    html문서 안에서 css를 그대로 사용하는 태그(css파트에서 자세히 설명)
  • <stript> 태그 :
    스크립트를 그대로 사용하거나, 외부 스크립트를 불러와 사용하는 태그

<body> : 문서에 대한 실질적인 내용, 웹 문서의 모든 컨텐츠, 보여지는 요소가 이안에 위치

브라우저에 실제로 표시될 내용, 문서의 몸통<img>, <p> 태그같은 지금부터 배울 대부분의 태그가 <body>태그 안에서 사용됨, 직접적으로 보여지는 모든것이 여기서 표시되며, 실질적인 정보를 가지고 있는 부분.