-
HTML - 웹페이지 기본 태그 (html, head, body)front-end/HTML 2021. 10. 21. 19:37728x90
HTML은 Hyper Text Markup languege로 배웠다. HTML은 마크업 즉 구조를 생성하는 언어이다. 웹페이지 구조를 만들기 위해서 HTML은 여러 가지 Tag들을 제공한다. 그중 아주 기본이 되는 태그 10가지에 대해 알아보자
1. html
- html tag는 메인 루트 태그로 HTML 문서의 최상단 요소를 나타낸다.
- 모든 다른 요소는 <html> 요소의 하위 요소이다.
- 전역 속성을 가지고 있으며, 주로 lang 특성을 선언한다. (스크린 리더가 읽을 때 효율적이라나, 뭐라나... )
👍 <! DOCTYPE html>은 HTML 태그는 아니다. 다만 HTML버전이 무엇인지 웹 브라우저에 알려주는 역할을 한다. 그도 그럴 것이 수학 문제를 국어 답안지로 체점할 수는 없는 거랑 같은 이치다.
<!DOCTYPE html> <html lang="ko"> </html>2. head
- head tag는 메타 데이터를 포함하기 위한 요소이며, 웹 페이지에 단 하나만 존재한다.
- head 요소는 화면에 표시되지 않는다. 문서에 대한 정보만 가지고 있고 화면에 보이지는 않는다.
- 다음과 같은 요소들은 head 요소에 포함되어야 한다.
<title />
<style />
<base />
<link />
<meta />
<script />
<noscript />
<template>
위 요소들은 head 요소에 포함되는 요소로, 브라우저에 노출되지 않는다.
👀 <head /> vs <header/>
문자적으로만 보면 큰 차이는 없다. 하지만 head는 컴퓨터 보는 영역(사람이 읽을 수 있는 정보가 아님)이고, header는 유저 즉 브라우저가 읽고 보여주는 정보(사람이 읽을 수 있는 정보)라고 생각하면 된다.<!DOCTYPE html> <html lang="ko"> <head> <title> 첫번째 웹 페이지 <title/> </head> </html>3. body
- body tag는 브라우저에 표시되는 요소이며, 웹 페이지에 단 하나 존재한다.
- html 문서의 텍스트, 이미지, 리스트 등과 같이 모든 콘텐츠를 포함하는 영역이다.
- 전역 속성을 포함하고 있으며, 이외에도 다양한 속성을 지원하는데 그중 onload를 그나마 많이 사용한다.
<!DOCTYPE html> <html lang="ko"> <head> <title> 첫번째 웹 페이지 <title/> </head> <body> </body> </html>느낀 점 및 정리
- 웹페이지를 구성하는 html, body, head에 대해 알아보았다.
- 모든 웹페이지는 html, head, body가 하나씩 존재하고 있다.
- 다음 포스트에서는 head에 포함될 수 있는 웹페이지 정보 관련 태그에 대해 알아보자
728x90'front-end > HTML' 카테고리의 다른 글
HTML5 - Form 셀렉트 박스(Select box) 만들기 (0) 2021.10.14 HTML5 시맨틱(Semantic) 요소 (0) 2021.10.06 HTML 이란? (0) 2021.10.04