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

정의

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

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

 

출처 :

• Front-end(프론트엔드)란?
• html이란?
• html의 특징과 단점
• Semantic Tag 와 헷갈리는 tag들 정리
• 시맨틱 태그(semantic tag) 사용 방법
• [HTML / CSS] 웹 접근성? 웹 표준? 웹 접근성을 위한 규칙들
• 드림코딩 : https://www.youtube.com/watch?v=T7h8O7dpJIg