WEB/FrontEnd

[HTML] 1. HTML5

xgoo 2024. 8. 30. 21:43
반응형

HTML(HyperText Markup Language)

HTML은 우리들이 흔히 알고 있는 프로그래밍 언어가 아니며 단순한 형태인 태그를 사용하는 마크업 언어다.
태그는 "<"로 시작하여 ">"로 끝나는 구조를 이루고 이 HTML 태그들은 프론트엔트에서 틀을 잡기 위한 언어이다.
뼈대를 제작하는 언어로 생각하면 쉽다.

HTML5의 기본 형태 


1. <!DOCTYPE html> 태그

정식명칭은 Document Type Declaration이라고 하고 의미는 "문서 형식 선언"이라고 한다.
이 태그는 브라우저로 웹 사이트를 접속했을 때 웹 문서의 형식 및 버전을 식별하기 위해 존재 하는 코드이다.

왜 써야 할까?


해당 태그가 없다고 해서 사이트가 출력이 안 되는 것은 아니다.
태그가 없이 출력하게 되면 브라우저가 쿼크 모드(Quirk Mode)로 렌더링하게 된다.
쿼그 모드란 최신 버전이 아닌 HTML4 이전의 표준적인 HTML CSS를 지원하기 때문에
최근에 생긴 태그나 css 코드를 브라우저가 해석하는데 문제가 생기게 된다. 
따라서 문서의 시작을 알림과 동시에 쓰는 것이 좋다.

2. <html> 태그

html 태그는 html의 시작을 알리는 태그이다.
이 태그 안에서는 html에서 사용하는 태그만 사용해야 한다.

3. <head>와 <body> 태그

head 태그와 body 태그는 html 태그 안에서 존재하는 태그이다.
head 태그는 해당 html 문서의 정보(제목,설명)를 기입하거나 외부 css코드를 받아 올때 사용된다.

body 태그는 실제 웹 문서가 브라우저를 통해 표시될 내용을 작성하는 공간이다.

4. </> 태그 

<html></html> 이 태그 처럼 각 태그는 시작 태그와 종료 태그가 존재한다.
이런 태그는 범위를 지정한다고 생각하면 쉽다. 하지만 꼭 태그가 태그의 끝이 존재하는 것은 아니다.
<img> 태그 처럼 단순이 시작 태그만 있는 태그도 존재한다. 





반응형

'WEB > FrontEnd' 카테고리의 다른 글

[HTML] 6. List Tag  (0) 2024.09.13
[HTML] 4. image tag  (0) 2024.09.05
[HTML] 3. text tag  (0) 2024.08.31
[HTML] 2. Meta Tag  (0) 2024.08.30