홈페이지를 구성하는 HTML5 를 알아보자!

728x90

HTML은 Hyper Text Markup Language의 약자이다.

웹페이지를 구성하기 위한 표준 마크업 언어이며,각각의 태그마다 특성이 있습니다.

그럼 HTML은 어떻게 사용해야 하는지필수적인 것부터 알아보도록 합시다!

DOCTYPE 선언기존에 사용하던 XHTML이나 HTML4.X 버전일 때에는DOCTYPE선언이 다음과 같이 매우 길었습니다.

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

하지만 HTML5에서는 엄청 간단해졌죠.

<!DOCTYPE html>

이 정도로 간단해졌어요... DOCTYPE선언 이유는

웹브라우저마다 다 다르기 때문에 선언을 안 하게 되면

웹브라우저의 호환 모드로 인식하여

내용이 깨지거나 다르게 나오게 되는 경우가 발생해요.

그래서 DOCTYPE선언을 통해 표준으로 나타내 줌으로써

브라우저별 다르게 표시되는 상황을 막아주는 것이죠.

참고로 DOCTYPE을 소문자로 사용하든 섞었쓰든

지장은 없으나 공식 표기가 대문자로 표기해주는 것이니

대문자로 써주도록 합시다.

그리고 HTML5로 홈페이지를 구성하기 위해서는

head와 body에 대해서도 잘 알아야 해요.

head 에는 주로 홈페이지를 대표하는 홈페이지명

홈페이지에 필요한 meta태그 등을 기록해요

body는 사용자에게 보여주는 영역 값들을 보통 작성하죠.

<!DOCTYPE html>
<html lang="ko">
<head>
	<title>이곳에 홈페이지제목을 기록하죠.</title>
</head>
<body>
	이곳에 홈페이지에 보여줄 내용들을 기록합니다.
</body>

보시면 html lang이라는 게 있어요. 저걸 표기해주는 이유는

웹 접근성을 위해 표기를 해주는 거예요.

도대체 왜?

세상에는 눈이 불편하신 분들이나 다른곳이 불편하신분들이

같이 공생하며 서로서로 도와가며 살아가고 있죠.

일반인이라면 그냥 사용하면 되지만

시력저하나 선천적 장애를 가지고 계신 분들에게

웹 사용 시 도움을 주는 스크린리더 같은 보조 공학이 있습니다.

이런 스크린리더가 처음 접근했을 때 한국어인지

영어인지 등을 알려주는 친절한 태그에요.

그리고 head 안에는 title이 꼭 있어야 해요.

title안에 홈페이지 제목 기입하여 나타내 주도록 합시다.

body안에는 홈페이지를 열었을 때 보여주는 내용들을

기입하는 곳이에요. 앞으로 body안에 쓸 태그들을

다뤄보도록 할게 요.

[HTML5] 시맨틱태그란 뭘까? (feat.header,footer,section) (0)	2022.11.15
[HTML5] h태그에 대해 알아보자! (feat.p태그) (0)	2022.11.15

김개의 생활