HTML: Hypertext Markup Language

HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소입니다. HTML은 웹 페이지의 내용을 서술하고 정의하는 데 사용합니다. HTML 말고도 웹 페이지의 모양과 표현을 서술하거나(CSS), 기능과 동작을 서술하는(JavaScript) 기술도 있습니다.

"Hypertext(하이퍼텍스트)"란 웹 페이지를 다른 페이지로 연결하는 링크를 말합니다. 링크는 웹의 근본적인 속성입니다. 인터넷에 자료를 올리고 다른 사람이 만든 페이지로 링크함으로써, 여러분은 월드 와이드 웹 세계의 능동적인 일원이 될 수 있습니다.

HTML은 웹 브라우저에 표시되는 글, 이미지 등의 다양한 컨텐츠를 표시하기 위해 "마크업"이라는 문법을 사용합니다. HTML 마크업은 <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video> 등 미리 정해진 수많은 "요소"를 사용합니다.

HTML 요소는 문서의 다른 텍스트와 "태그"로 구분합니다. 태그는 "<", 태그 이름, ">"로 이루어집니다. 태그 안의 요소명은 대소문자를 구분하지 않습니다. 즉, 대문자, 소문자, 아니면 섞어서도 작성할 수 있습니다. 예를 들어 <title> 요소는 <Title>, <TITLE>, 그 외 기타 가능한 모든 방법으로 작성할 수 있습니다.

아래에서 HTML을 더 깊이 배워보세요.

  • HTML 소개

    웹 개발을 새로 시작하는 분이라면 HTML 기초를 읽고, HTML이 무엇인지와 어떻게 사용하는지 배워보세요.

  • HTML 자습서

    HTML 사용법, 자습서, 완전한 예제 등은 HTML 익힘장에서 확인할 수 있습니다.

  • HTML 참고서

    방대한 참고서는 HTML을 구성하는 요소와 속성에 대한 자세한 내용을 담고 있습니다.

초보자 자습서

MDN의 HTML 익힘장은 가장 기초부터 HTML을 알려주는 여러개의 장을 가지고 있습니다. 이전 경험은 필요하지 않습니다.

HTML 소개
이 모듈은 기초를 다져서 당신이 HTML을 text에 적용하거나, 하이퍼링크를 작성하거나, HTML을 이용해 웹페이지를 개설하는 등의 중요한 개념과 구문에 익숙해지도록 합니다.
멀티미디어와 임베딩
이 모듈은 HTML으로 어떻게 당신의 웹페이지에 멀티미디어를 삽입하는 방법을 살펴봅니다. 이미지를 삽입하는 여러방법과 오디오,비디오,혹은 다른 웹페이지 자체를 삽입하는 방법을 포함하고 있습니다.
HTML 표
표 형태의 데이터를 이해하기 쉽고 접근성 높은 방식으로 웹페이지에 표현하는 것은 어려울 수 있습니다. 이 모듈은 기본적은 표 마크업과 캡션,요약을 사용하는 복잡한 요소들을 다룹니다.  
HTML 폼
폼은 웹에서 매우 중요한 부분입니다. 폼은 가입과 로그인, 피드백 전송, 제품 구매 등과 같은 대부분의 웹사이트 상호작용 기능을 제공합니다. 이 모듈은 폼의 클라이언트 사이드/프론트 엔드 부분의 폼을 생성하는 법을 다룹니다.
HTML으로 일반적인 문제 해결하기
웹페이지를 생성할 때 발생할 수 있는 매우 흔한 문제들을 HTML을 이용해 해결하는 방법에 대한 설명이 담긴 링크를 제공합니다 : 타이틀 다루기, 이미지와 비디오 삽입하기, 내용 강조하기, 기본 폼 작성하기 등 

고급 주제

CORS 활성화한 이미지

crossorigin 속성은 적절한 CORS 헤더와 조합하고, <img> 요소에 의해 정의된 영상을 외부 원료에서 로드하여 현재 원점에서 로드되는 것처럼 <canvas> 요소에 사용할 수 있도록 합니다.

CORS 설정 속성

<img><video>와 같이 CORS를 지원하는 일부 HTML 요소에는 크로스 오리진 속성(crossOrigin property)이 있어 요소에서 가져온 데이터에 대한 CORS 요청을 구성할 수 있다.

HTML 포커스 관리
activeElement DOM 특성과 hasFocus() DOM 방식은 웹 페이지의 요소와 사용자의 상호 작용을 추적하고 제어하는 데 도움이 됩니다.
rel="preload"로 콘텐츠 미리 불러오기

<link>요소의 rel 속성의 프리로드 값을 사용하면, 브라우저의 메인 렌더링 작업이 시작되기 전 페이지 로드 과정 중 라이프사이클 초기에 프리로딩을 시작하고자 하는 리소스를 지정하여 HTML <head>에 선언적인 가져오기 요청을 쓸 수 있습니다. 이것은 리소스들이 더 일찍 이용가능 하도록 만들고 페이지의 첫 번째 렌더를 차단할 가능성을 감소시켜 성능 향상에 이르게 합니다. 이 글은 프리로드(preload) 작동 방법에 대한 기본적인 지침을 제공합니다.

참고서

HTML 참고서
HTML은 요소로 이루어져있으며, 각각의 요소는 몇개의 속성으로 수정될 수 있습니다. HTML 문서는 서로 링크로 연결되어 있습니다.
HTML 요소 참고서
이 페이지는 모든 표준 HTML 태그들(HTML5 태그,비표준 태그,폐기된 태그 포함)을 나열합니다.
HTML 속성 참고서
HTML의 요소들은 속성을 가지고 있습니다; 속성은 사용자가 원하는 조건을 충족하기 위해 다양한  방법으로 요소들을 구성하거나 행동을 조절할수 있는 추가적인 값입니다.
전역 속성
전역 속성(Global attributes)은 모든 HTML 요소에 지정할 수 있으며, 심지어 표준에 명시되지 않은 요소에 대해서도 지정할 수 있습니다. 이는 어떠한 비표준 요소도 이 속성들을 허용해야 함을 의미합니다(이런 비표준 요소를 사용한다는 것은 해당 문서는 더 이상 HTML5를 준수하지 않는 것을 의미하지만).
인라인 요소와 블록 레벨 요소
HTML(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지합니다. 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다.
링크 유형
HTML에선 두 문서간의 관계를 명시할 때 여러 링크 타입 속성을 사용합니다. 타입이 설정될 수 있는 링크 타입 요소들은 <a>, <area>, 또는 <link>가 있습니다.
HTML audio와 video 요소가 지원하는 미디어 형식

<audio><video> 요소를 통해 오디오와 비디오 미디어를 재생할 수 있습니다. 이러한 요소는 Adobe Flash 및 기타 플러그인에 있는 유사한 기능에 대한 브라우저 고유의 대안을 제공합니다.

HTML 콘텐츠 범주

HTML은 몇 가지 종류의 콘텐츠로 구성되어 있으며, 각 콘텐츠는 특정 맥락에서 사용될 수 있고, 다른 맥락에서는 허용되지 않습니다. 마찬가지로, 각 범주에는 포함할 수 있는 다른 콘텐츠 범주와 그 범주 안에서 사용할 수 있거나 사용할 수 없는 요소들이 있습니다. 이것은 이러한 범주에 대한 지침입니다.

호환 모드와 표준 모드
쿼크(quirks) 모드 및 표준 모드에 대한 내역 정보.

관련 주제

CSS를 사용해 HTML 요소에 색 입히기

이 문서에서는 HTML 문서의 어떤 부분을 색칠할 수 있는지에 대하여, 그리고 사용할 CSS 속성을 나열하면서 CSS를 사용하여 HTML 컨텐츠에 색을 추가하는 대부분의 방법을 다룬다. (예제, 팔레트 구축 도구 링크 등.)

모두 보기...