[HTML] 정의 & 구조 & 특징들

Front-End/HTML & CSS

[HTML] 정의 & 구조 & 특징들

Voyage_dev 2022. 2. 21. 23:33

정의

HyperText Markup Language

HyperText : 웹 페이지에서 다른 페이지로 이동할 수 있도록 링크를 정의 (연결되어 있다)
Markup : 태그로 이루어져 있으며 웹 페이지의 구조를 정의 (형태나 효과)
Language : 언어
웹 페이지의 구조를 설명하는 프로그래밍 언어의 한 종류로 웹 브라우저에서 웹 페이지의 정보를 적절한 태그와 속성을 이용해서 명확한 의미를 가진 문서를 만들어 설명한다
‘무엇을 어디에 배치할지’ 구조화하는데 사용된다
- ex) 방 하나가 웹 페이지라고 생각하면 그 방 안에 가구들을 배치하는데 사용되는 것이 HTML!

특징

구조가 단순 / 문법이 쉽다

논리적이고 연산적인 요소가 없으며 단순한 구조를 가지고 있다

텍스트 파일

따로 컴파일 작업이 필요하지 X
편집과 수정 그리고 관리가 용이하다
즉시 적용 가능

마크업 언어

마크 삽입 즉, 형태나 효과 명령을 태그로 정의함으로 인해 파일 용량이 매우 작아진다
용량이 작아서 클라이언트 - 서버 간 빠른 문서 전달이 가능하다

단점

제한적인 태그

편의성이 크지만, 융통성 및 확장성이 결여

Page Structure (구조)

HTML의 구조는 크게 나뉘면 이런 느낌이고

복잡하게 보면 이런 느낌으로 나뉘어져 있다

web page structure - source : development tutorial

HEADER

웹 페이지의 타이틀, 링크 정보 등 여러 설정들이 모여 있는 영역이다
브라우저 탭에 표시되는 사이트 제묵을 말한다

<meta> : 인코딩 / 콘텐츠 타입을 표시

<style> : css와 관련, 사용하지 않아도 무방

<title> : 웹 페이지 제목

BODY

말 그대로 본체, 몸통을 의미
가장 중요하고 웹 페이지를 표현하는데 사용되는 영역
다양한 태그들이 존재하며 배치되는 것이 웹 페이지가 구조화 되는 것

FOOTER

header와 반대인 foot 즉, 맨 아래쪽 끝나는 부분에 위치한다

NAV

Navigation 내비게이션 메뉴바라고 할 수 있다
<div> 레이아웃을 사용해서 내비게이션을 생성하는 방법도 있다

ARTICLE

메인 컨텐츠로 표시되는 영역
바디는 아티클의 복합적인 구조로 이루어져 있기도 하다

SECTION

섹션은 아티클을 구성하는 부분
하지만 굳이 아티클을 먼저 선언할 필요는 없다
섹션이 아티클 아티클이 섹션처럼 사용될 수도 있다

ASIDE

페이지의 사이드 부분
왼쪽이든 오른쪽이든 상관은 없다

출처 :