HTML & CSSHTML

HTML 기본 문서 구조

HTML, html, HTML basic syntax, html tag

HTML 기본 문서 구조

1. 태그

HTML은 웹 문서에 마크업을 하는 언어이다. 그 때 마크업을 사용하는 약속된 표기법이 태그 이다.

  • 태그는 <>를 사용한다.
    꺽쇠 사이에 들어가는 부분이 바로 tag 부분이다.

  • 소문자로 쓴다.(권장사항)
    대,소문자를 구분하진 않지만 HTML5 표준 명세에는 소문자를 권장하고 있다.

  • 여는 태그와 닫는 태그
    닫는 태그가 없는 경우도 있지만 닫는 태그가 필요한 태그에는 반드시 태그를 닫아주어야 한다.

  • 들여쓰기.
    쉽게 눈으로 확인하고 문서의 구조를 파악하기가 쉬워진다. tab키를 사용한다.

  • 속성을 파악해야 한다.
    태그 안에는 사용할 수 있는 속성값이 있다. 예를 들어 img 태그에는 src(주소값), width, height 등의 속성이 있다.

처음 만들어 보는 HTML 문서

문서 구조 살펴보기.

<!DOCTYPE html>

HTML5로 작성된 웹 문서라는 뜻이다. HTML4에서는 엄격모드, 호환 모드 등 꽤 복잡했지만 이젠 단 한줄이면 된다.

<html> ~ </html>

웹 문서의 시작과 끝이라고 보면 된다. 이 태그에는 lang이라는 속성에 언어를 설정해 줘야 하는데 특정 언어로 검색할 때 그 대상이 될 수 있다.

<head> ~ </head>

웹 문서를 해석하기 위해 필요한 정보들을 입력하는 곳이다.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>내가 처음 만드는 HTML 문서</title>

head 태그 안에는 meta태그와 title태그가 보통 표시 되는데 화면에 보이는 것은 title 태그이다. meta 태그는 실제 문서 내용이 아닌 문서를 해석하기 위해 사용되는 태그이다.

title태그에 문서 제목을 입력하는 이유는 웹 표준성과 관련되어 있다. 간혹 시각 장애를 가지고 계시는 분들이 인터넷을 이용할 때 보조 기기를 이용하는데, 제목을 듣고 이 사이트가 어떤 사이트 인지 알 수 있어야 하기 떄문이다.

meta 태그 안에는 문자 인코딩 방법이나 키워드 등을 지정한다.

<body> ~ </body>

웹 문서의 실질적인 내용(화면에 나오는 내용)이 나타내는 태그이다. 대부분의 태그는 이 태그 안에 들어간다.

사이트를 이용하기 위해선 서버단에서 호스팅 서버를 준비해서 FTP 프로그램을 이용해 배포해야 한다.

Share