번역 작업 진행중입니다.

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> 요소는 <Ttile>, <TITLE>, 그 외 기타 가능한 모든 방법으로 작성할 수 있습니다.

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

  • HTML 소개

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

  • HTML 자습서

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

  • HTML 참고서

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

초보자 자습서

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

HTML 소개
This module sets the stage, getting you used to important concepts and syntax such as looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a web page.
멀티미디어와 임베딩
This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.
HTML 표
Representing tabular data on a webpage in an understandable, accessible way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.
HTML 폼
Forms are a very important part of the Web — these provide much of the functionality you need for interacting with websites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side/front-end parts of forms.
HTML으로 일반적인 문제 해결하기
Provides links to sections of content explaining how to use HTML to solve very common problems when creating a web page: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.

고급 주제

CORS 활성화한 이미지
The crossorigin attribute, in combination with an appropriate CORS header, allows images defined by the <img> element to be loaded from foreign origins and used in a <canvas> element as if they were being loaded from the current origin.
CORS 설정 속성
Some HTML elements that provide support for CORS, such as <img> or <video>, have a crossorigin attribute (crossOrigin property), which lets you configure the CORS requests for the element's fetched data.
HTML 포커스 관리
The activeElement DOM attribute and the hasFocus() DOM method help you track and control a user's interactions with elements on a web page.
rel="preload"로 콘텐츠 미리 불러오기
The preload value of the <link> element's rel attribute allows you to write declarative fetch requests in your HTML <head>, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements. This article provides a basic guide to how preload works.

참고서

HTML 참고서
HTML consists of elements, each of which may be modified by some number of attributes. HTML documents are connected to each other with links.
HTML 요소 참고서
Browse a list of all HTML elements.
HTML 속성 참고서
Elements in HTML have attributes. These are additional values that configure the elements or adjust their behavior in various ways.
전역 속성
Global attributes may be specified on all HTML elements, even those not specified in the standard. This means that any non-standard elements must still permit these attributes, even though those elements make the document HTML5-noncompliant.
인라인 요소와 블록 레벨 요소
HTML elements are usually "inline" or "block-level" elements. An inline element occupies only the space bounded by the tags that define it. A block-level element occupies the entire space of its parent element (container), thereby creating a "block."
링크 유형
In HTML, various link types can be used to establish and define the relationship between two documents. Link elements that types can be set on include <a>, <area> and <link>.
HTML audio와 video 요소가 지원하는 미디어 형식
The <audio> and <video> elements allow you to play audio and video media. These elements provide a browser-native alternative to similar capabilities found in Adobe Flash and other plug-ins.
HTML 콘텐츠 범주
HTML is comprised of several kinds of content, each of which is allowed to be used in certain contexts and is disallowed in others. Similarly, each has a set of other content categories they can contain and elements which can or can't be used in them. This is a guide to these categories.
호환 모드와 표준 모드
Historical information on quirks mode and standards mode.

관련 주제

CSS를 사용해 HTML 요소에 색 입히기
This article covers most of the ways you use CSS to add color to HTML content, listing what parts of HTML documents can be colored and what CSS properties to use when doing so. Includes examples, links to palette-building tools, and more.
모두 보기...

Join the Web layout community

Choose your preferred method for joining the discussion:

문서 태그 및 공헌자

최종 변경자: alattalatta,