HTML

HTML

HTML(Hyper Text Markup Language)은 웹 페이지를 만들기 위한 언어입니다.
  • HT - Hyper Text : 문서와 문서를 연결
  • M - Markup : 마크업, 태그
  • L - Language : 언어
  • 즉, HTML이란? 문서와 문서로 연결된 태그 언어를 말합니다.

태그(Tag)

태그는 정보를 정의하는 방식을 정의합니다.
  • 태그는 열린 태그와 닫는 태그가 있습니다.
  • 닫는 태그에는 "/"가 있어야 합니다.
  • 닫는 태그가 필요없는 태그도 있습니다.
  • HTML5에서는 "/"를 생략할 수 있습니다.

블록 요소 / 인라인 요소(Block / Inline)

블록 요소는 박스, 인라인 요소는 텍스트틀 의미한다.
  • 블록 엘리먼트(Block Element)
    • 독립된 박스 영역으로, 한 줄에 하나의 블록 요소만 표현할 수 있다.
    • 블록 요소에는 블록 요소와 인라인 요소를 포함 할 수 있다.
    • <div>, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <li>
  • 인라인 엘리먼트(Inline Element)
    • 독립된 텍스트 영역으로, 한 줄에 여러 개의 인라인 요소를 표현할 수 있다.
    • 인라인 요소에는 블록 요소를 포함 할 수 없지만, 인라인 요소를 포함 할 수 있다.
    • <span>, <a>, <strong>, <em>, <img>

HTML Reference

Tag Description Contents Version
<h1>-<h6> 제목 영역을 설정한다. Block HTML4
<div> 문서의 섹션을 만들거나 영역을 나눌 때 사용한다. Block HTML4
<ul> unorderd list의 약자로, 순서가 필요 없는 li태그들을 묶어준다. Block HTML4
<ol> orderd list의 약자로, li태그들을 숫자 순서대로 묶어준다. Block HTML4
<li> 목록을 만들어 준다. ul이나 ol의 내부에 사용한다. Block HTML4
<p> 문단을 지정한다. Block HTML4
<span> 문장 단위에 CSS스타일을 지정해 텍스트의 영역을 설정한다. inline HTML4
<table> 표를 만들어 준다. 레이아웃을 만들 때도 사용할 수 있으나 추천되지 않는다. Block HTML4
<tr> table row의 약자로 표의 행을 나타낸다. Block HTML4
<th> table header의 약자로 표의 헤더 칸을 나타낸다. Block HTML4
<td> table data의 약자로 표의 칸을 나타낸다. Block HTML4
<thead> 열의 제목으로 구성된 행의 집합이다. table에서 한 번만 쓸 수 있고, tbody나 tfoot보다 먼저 사용해야 한다. Block HTML4
<tbody> 표의 본문에 해당하는 영역을 나타낸다. 여러 번 사용해 행을 그룹화 할 수 있다. Block HTML4
<tfoot> 표의 하단에 나오는 열의 요약으로 구성된 행의 집합이다. table에서 한 번만 쓸 수 있고, tbody보다 먼저 사용해도 표의 맨 마지막에 위치한다. Block HTML4
<col> colgroup 태그안에 사용해 각 열을 제어할 수 있다. span 속성을 사용해 제어할 열의 개수를 지정해 줄 수 있다. Block HTML4
<colgroup> col 태그를 그룹으로 묶어준다. 행이 아닌 열단위로 묶어 제어할 수 있다. Block HTML4
<br> line break의 약자로 텍스트의 줄을 바꾼다. 닫히는 태그가 필요없다. Block HTML4
<strong> 중요한 의미를 갖는 텍스트를 설정한다. Inline HTML4
<em> 텍스트를 강조를 할 때 사용한다. 중첩해 사용할 수 있고 중첩의 단계는 강조의 단계를 나타낸다. 기본적으로 Italic으로 표시된다. Inline HTML4
<b> 다른 텍스트와 단순 구별하고 싶을 때 사용한다. Inline HTML4
<mark> 중요성과 강조를 고려하지 않은 단순 참고용 표시를 할 때 사용한다. Inline HTML5
<address> 주소를 입력할 때 사용한다. Block HTML5
<section> 일반적으로 문서의 컨텐츠 섹션을 의미한다. Block HTML5
<article> 컨텐츠의 독립적인 항목을 나타내는 컨텐츠를 의미한다. Block HTML5
<nav> 페이지 내에서 이동 할 수 있는 네비게이션 링크 그룹이다. Block HTML5
<main> 웹 문서의 주요 컨텐츠 영역을 나타낼 때 사용한다. Block HTML5
<aside> 웹 문서의 메인 컨텐츠와 관련된 사이드 컨텐츠 영역을 나타낸다. Block HTML5
<header> 웹 문서의 헤더 영역을 나타낸다. Block HTML5
<footer> 웹 문서의 풋터 영역을 나타낸다. Block HTML5

section

  • 일반적으로 문서의 컨텐츠 섹션을 의미한다.
  • 컨텐츠와 관련된 한 가지 주제의 영역을 말한다.
  • section은 문장이나 문서의 스타일링 요소가 아니기 때문에 편의나 영역을 위함이라면 div태그가 좋다.
  • section은 제목이 없는 경우는 섹션이라고 할 수 없기 때문에 제목을 제공해야 한다.
  • section은 일반적인 주제가 아니라면 구체적인 요소(article, aside, nav)를 사용하는 것이 더 적절하다.

article

  • 컨텐츠의 독립적인 항목을 나타내는 컨텐츠를 의미한다.
  • article은 포럼, 신문기사, 잡지, 블로그 항목, 게시판 글 등 컨텐츠의 독립적인 항목을 나타난다.
  • section이 하나의 주제를 나타낸다면, article은 주제를 묶은 독립적인 컨텐츠이다.
  • section 안에는 article을 쓸 수 있으며, article 안에도 section을 쓸 수 있다.

nav

  • 페이지 내에서 이동 할 수 있는 네비게이션 링크 그룹이다.
  • nav는 문서의 핵심적인 페이지의 메뉴 및 서브 메뉴에서 사용하고, 문서에서 주로 한 번만 사용한다.
  • 문서 안에 링크가 포함된 컨텐츠는 nav를 사용하지 않는다.
  • nav는 핵심적인 네비게이션에 사용해야 하므로 foot 내에 링크 그룹에 사용은 적절하지 않다.

main

  • 웹 문서의 주요 컨텐츠 영역을 나타낼 때 사용한다.
  • main은 웹 페이지에서 한 번만 사용 할 수 있으며, 접근성과 검색 영역의 노출을 향상시킨다.
  • article, aside, footer, header, nav를 하위 요소로 사용할 수 있다.

aside

  • 웹 문서의 메인 컨텐츠와 관련된 사이드 컨텐츠 영역을 나타낸다.
  • aside는 메인 컨텐츠와 관련된 사이드의 정보, 광고 등 부분적인 정보를 그룹화 할때 사용한다.

header

  • 웹 문서의 헤더 영역을 나타낸다.
  • header는 웹 페이지에 대한 소개, 네비게이션 영역, 테이블 영역, 검색 영역, 로고 영역을 포함한다.
  • header는 제목 태그가 포함 될 수 있으며, 필수 조건은 아니다.
  • header는 섹션 컨텐츠가 아닌 그룹화하기 위한 요소이므로 section을 포함 할 수 없다.

footer

  • 웹 문서의 풋터 영역을 나타낸다.
  • footer는 저작권 정보, 회사 정보, 관련 링크, 주소, 바닥글, 사이트 정보 등을 포함한다.
  • footer는 섹션 컨텐츠가 아닌 그룹을 나타내는 요소이며, section, article, aside 등을 포함 할 수 있다.

HTML5에서 새로 생긴 태그

<구조적 태그>
Tag Description
<article> 뉴스 기사나 블로그 글 같은 독립적인 텐츠를 표시합니다. 티스토리의 경우 본문이나 보호글, 공지사항, 방명록 등 한 페이지에 보여지는 부분을 넣을 수 있습니다.
<aside> 문서의 주요 부분을 표시하고 남는 사이드바 콘텐츠를 표시합니다.
<bdi> 바깥쪽의 여러 텍스트와 다른 방향으로 서식이 지정된 글의 부분을 구분하기 위해 사용됩니다.
<command> 사용자가 동작시킬 수 있는 명령 버튼을 정의 합니다.
<details> 사용자가 보거나 감출 수 있는 추가적인 상세 사항을 정의 합니다.
<summary> details 요소를 위한 제목을 정의합니다.
<figure> 부가적인 설명글(캡션)이 붙을 일러스트레이션, 다이어그램, 사진, 코드 목록과 같은 컨텐츠를 지정합니다.
<figcaption> figure 요소에 대한 설명글을 정의합니다.
<footer> 문서나 특정 구역에 대한 하단부(푸터, Footer)를 정의합니다.
<header> 문서나 구역의 도입 부분, 혹은 상단 네비게이션 요소의 그룹을 지정합니다.
<hgroup> 문서의 제목부가 여러 단계로 나눠져 있는 경우 <h1>에서 <h6>까지의 요소들을 집합으로 묶습니다.
<mark> 의미적으로 중요한 부분을 강조하기 위해 사용합니다. 시각적 효과는 없지만, 내용상 다른 부분보다 중요한 부분임을 표시할때 사용할 수 있습니다. 시각적 효과는 CSS를 통해 mark { font-weight:bold; color:black; }와 같은 형태로 적용할 수 있습니다.
<meter> 특정 범위내에서 특정한 수치를 나타낼때 사용하는 태그 입니다. 지정된 값은 시각적으로 게이지바 (프로그래스바) 형태로 화면에 나타납니다. 현재 크롬, 오페라 웹브라우저만 이 태그를 지원하고 있습니다.
<nav> 네비게이션 링크 포함된 영역임을 나타낼때 사용합니다.
<progress> 작업의 진행률을 프로그래스바 형태로 나타냅니다. 크롬과 오페라에서만 지원되고 있습니다.
<ruby> 텍스트 위에 주석을 달때 사용하는 태그로서, 일본어나 중국어와 같은 동아시아 문자열을 표현할때 사용합니다.
<rt> ruby 요소 하위에 사용되며, 텍스트 윗쪽에 달릴 실제 주석의 내용을 정의합니다.
<rp> ruby 문자열 주석 태그를 지원하지 않는 웹브라우저에서 표시될 메시지를 정의합니다.
<section> 문서의 구역을 정의합니다.
<time> 날짜나 시간을 정의합니다.
<wbr> 줄 분리 지점을 정의합니다.
<dialog> 대화를 의미있는 콘텐츠로 만들고자 할때 사용하며 <dt>에 말하는 사람 <dd>에 내용을 작성한다.
<새로운 미디어 요소>
Tag Description
<audio> 사운드 컨텐츠를 정의합니다.
<video> 비디오나 영상을 정의합니다.
<source> video나 audio 태그 내부에 여러개의 미디어 자원을 지정합니다.
<embed> 외부 프로그램이나 상호 작용적인 컨텐츠를 위한 컨테이너를 정의합니다. (플러그인용)
<track> video나 audio 요소에 대해 텍스트 형태의 트랙 정보나 자막을 지정해 줍니다.
<새로 생긴 Canvas 요소>
Tag Description
<canvas> 웹상에 그래픽을 표시합니다. API와 함께 사용해 다양한 애플리케이션을 만들수 있습니다.
<새로운 폼 요소>
Tag Description
<datalist> 사용자가 텍스트 필드에 내용을 입력할 때 선택할 수 있는 값들을 목록으로 보여줍니다.
<keygen> 양식을 서버로 전송할 때 한 쌍의 키를 만들어 private key는 로컬에 저장하고 public key는 서버에 저장합니다.
<output> 수학적인 계산의 결과값을 표시합니다.

HTML5에서 의미가 변한 속성

Tag Description
hr 원래 단순한 가로줄을 나타내는 태그 였으나, 페이지의 주제가 바뀔 때 내용을 분리시키는 의미가 HTML5에서 추가되었다.
u 양식상 일반적인 텍스트보다 돋보여야 할 때 쓴다. 예를 들어 철자가 틀린 단어나, 중국어로 번역된 고유 명사등이 있다. 별도의 CSS없이 쓰면 브라우저에서는 밑줄을 긋는 것이 기본값이다.
i 어떠한 이유로 일반적인 텍스트보다 돋보여야 할 때 쓴다. 예를 들어 전문 용어, 외국어의 구절등이 있다. 별도의 CSS없이 쓰면 브라우저에서는 이태릭체로 표기하는 것이 기본 값이다.
s 더 이상 옳지 않은 내용을 나타내는 데에 쓴다. 별도의 CSS없이 쓰면 브라우저에서는 취소선을 긋는 것이 기본값이다. 더 적절한 시맨틱 태그가 있을 경우 그 것을 쓴다.
strong HTML4에서는 강한 강조를 의미했지만, HTML5에서는 중요성으로 의미가 변경되었다.

HTML5에서 없어진 태그

  • basefont
  • big
  • center
  • font
  • s
  • strike
  • tt
  • u
  • frame
  • framesets
  • noframes
  • acronym
  • applet
  • isindex
  • dir