🏗

HTML?


HTML

HTML(HyperText Markup Langauge)은 웹페이지의 '내용'과 '구조'를 담당하는 언어다.

브라우저는 HTML 문서를 읽어 어떻게 화면에 표시할지 결정한다.

기본 구조

1<!DOCTYPE html>
2<html>
3<head>
4 <title>Page Title</title>
5</head>
6<body>
7 <h1>My First Heading</h1>
8 <p>My first paragraph.</p>
9</body>
10</html>
  • <!DOCTYPE html>: 문서 형식 정의 태그로 웹 페이지의 형식을 나타낸다.
  • <html>: HTML 페이지의 루트 요소.
  • <head>: 웹 페이지의 메타 데이터를 담는다.

메타데이터?

메타데이터는 다른 데이터를 설명해주는 데이터다. 즉, <head>에 쓰인 메타데이터는 웹 페이지를 설명하는 데이터다.

  • <body>: 실제 보여지는 내용들을 담는다.

HTML5?

HTML5는 차세대 웹 표준으로 아래와 같은 기능들이 추가됐다.

  • 멀티미디어: 비디오 및 오디오를 자체적으로 지원한다.
  • 그래픽: SVG, 캔버스를 사용한 2차원 그래픽과 CSS3, WebGL을 사용한 3차원 그래픽을 지원한다.
  • 통신: 서버와 소켓 통신으로 양방향 통신이 가능하다
  • 디바이스 접근: 카메라, 동작센서 등의 하드웨어 기능을 직접 제어할 수 있다.
  • 오프라인 및 저장소: 오프라인 상태에서도 애플리케이션을 동작시킬 수 있다.
  • 시맨틱 태그: HTML 요소의 의미를 명확히 설명하는 시멘틱 태그를 도입해서 브라우저, 검색엔진, 개발자 모두에게 콘텐츠를 명확히 설명할 수 있다.
  • CSS3: CSS3를 완벽히 지원한다.

시멘틱 웹(Sementic Web)

시멘틱 웹은 기계가 웹사이트를 해석하기 쉽게 해주는 프레임워크이자 기술이다.

사용자가 모르는 웹사이트에 접근할 때는 보통 구글이나 네이버와 같은 검색 사이트를 이용한다. 어떤 웹이 검색 사이트에서 등장하기 위해서는 '검색엔진'이 웹사이트의 정보를 수집해야 한다. 검색엔진이 웹사이트 정보를 잘 수집하기 위해서는 HTML 코드만으로 의미를 인지해야 하는데, 그것을 돕는 것이 시멘틱 요소다.

시멘틱 요소는 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.

1<div class="header"></div>
2<header></header>

기존에 1번 줄과 같이 나타낼 수 있던 머리 부분을 2번 줄에서 시멘틱 태그를 사용함으로써 더 의미론적으로 나타낼 수 있다.

HTML5에서 새로 추가된 시멘틱 태그에는 header, nav, aside, section, article, footer가 있다.

웹페이지의 레이아웃 구성

일반적으로 웹페이지의 구조를 만들기 위해 주로 div 태그를 사용한다. 하지만, div는 의미론적으로 아무 의미도 가지지 않기 때문에 위에서 언급한 시멘틱 태그를 사용하는 것이 더 나은 방법이다.

header, nav, aside, section, article, footer 태그는 레이아웃을 구성하는데 사용되기 때문에 '레이아웃 요소'라고 한다.

레이아웃 요소는 일반적으로 다른 요소를 감싸는 포장지 역할을 한다.

참조:
https://poiemaweb.com/
https://ko.wikipedia.org/wiki/%EC%8B%9C%EB%A7%A8%ED%8B%B1_%EC%9B%B9