HTML

HTML

HTML(HyperText Markup Language)은 웹 페이지를 만들기 위한 언어입니다.
  • HT - HyperText : 문서와 문서를 연결
  • 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 Content Version
<h1>~<h6> <h1>~<h6> 태그는 제목 영역을 설정합니다. Block HTML4
<div> <div>는 문서의 섹션을 만들거나 영역을 나눌 때 사용합니다. Block HTML4
<ul> unordered list의 약자로, 순서가 필요 없는 목록을 만듭니다. Block HTML4
<ol> ordered list의 약자로, 순서가 있는 목록을 만듭니다(숫자). Block HTML4
<li> List Item의 약자로 ul태그와 ol태그의 내부에서 사용되는 태그입니다. Block HTML4
<dl> HTML4
<dd> . HTML4
<dt> . HTML4
<p> paragraph의 약자로 문단을 정의합니다. Block HTML4
<span> <div> 태그와 비슷하게 레이아웃을 설정할 때 쓰입니다. 하지만 영역에 꽉차게 표시되지 않고, 크기를 설정 할 수 없습니다. Inline HTML4
<table> 표를 만들때 쓰는 태그입니다. Block HTML4
<tr> table row의 약자로 표의 가로줄을 만드는 태그입니다. Block HTML4
<th> table head의 약자로 표의 제목을 쓰는 태그입니다. Block HTML4
<td> table data의 약자로 표의 셀을 만드는 태그입니다. Block HTML4
<thead> 표의 머리부분을 나타내는 태그입니다. Block HTML4
<tbody> 표의 본문을 나타내는 태그입니다. Block HTML4
<tfoot> 표의 꼬리부분 나타내는 태그입니다 Block HTML4
<col> col요소는 하나 이상의 행을 나타냅니다. Block HTML4
<colgroup> colgroup요소는 테이블에서 하나 이상의 행의 그룹을 나타냅니다 Block HTML4
<br> 줄바꿈을 할 때 사용하는 태그입니다. Inline HTML4
<strong> 중요한 의미를 갖는 텍스트를 설정합니다. (굵은 글씨) Inline HTML4
<em> 텍스트를 강조할 때 사용합니다. (이탤릭체 표시) Inline HTML4
<b> 다른 텍스트와 단순 구별하고 싶을 때 사용합니다. Inline HTML4
<mark> 중요성과 강조를 고려하지 않는 단순 참고용 표시를 할 때 사용합니다. Inline HTML5
<address> 문서 또는 문서의 저자 / 소유자의 연락처 정보를 정의합니다.
<section> section 요소는 일반적인 문서 또는 프로그램의 섹션을 나타냅니다. (콘텐츠) Block HTML5
<article> article 요소는 문서나 페이지, 또는 사이트의 독립적인 부분을 구성하는 섹션을 나타냅니다. Block HTML5
<nav> nav 요소는 페이지의 부분이나 다른 페이지로 링크된 구획을 나타냅니다: Block HTML5
<main> main 요소는 웹 문서의 주요한 내용을 담는 태그입니다. Block HTML5
<aside> aside 요소는 주위 요소의 내용과 접점을 이루는 섹션으로, 보통 사이드바 형태로 표현됩니다. Block HTML5
<header> header 요소는 헤더 영역, 즉 소개 또는 내비게이션 그룹을 나타냅니다. Block HTML5
<footer> ooter 요소는 보통 작성자, 연관된 문서에 대한 링크, 저작권 정보, 기타 흡사한 정보를 담습니다. Block HTML5

section

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

article

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

nav

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

main

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

aside

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

header

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

footer

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

HTML5에서 새로 생긴 태그

  • <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> : 줄 분리 지점을 정의합니다.

html5에서 의미가 변한 속성

속성 기존의미 변한의미
i 기울임 글자를 표현 다른 언어에서 숙어구, 기술 용어, 학명 표시 같은 일반적인 사용 이나 소리나 분위기를 대체하는 문구 등에 사용
b 의미 없는 굵은 글자를 표현 인쇄상 강조 표현을 가진 텍스트 뿐만 아니라 제품 소개 내 제품명, 문서 초록의 키워드 같은 아주 특별한 중요도는 갖지 않으나 일반적인 강조의 목적에 사용
em 강조글자 표현 중요한 정보를 강조할 때 사용
menu ul태그와 같은 목록의 의미 실제적 문서 메뉴 정보를 제공하는 데 사용
strong 강조글자 표현 중요한 의미를 나타낼 때 사용
address 제작자 정보에 이용 실제 연락 정보를 나타내기 위해 사용
hr 가로줄 삽입 단락 단위의 주제 바꿈을 할 때 사용
small 기본 글자 크기보다 작은 글자 표현 저작권, 세부 주석 등 크기를 작게 표시하는 콘텐츠에 사용

html5에서 없어진 태그

  • acronym
    • 약어나 이니셜 표시
    • 대체 태그 : abbr
  • applet
    • 자바 애플릿 삽입
    • 대체 태그 : object
  • basefont
    • 기본 폰트 지정
    • 대체 태그 : object
  • big
    • 텍스트 사이즈를 크게 함
    • 대체 태그 : CSS사용
  • dir
    • 디렉토리 내용 표시
    • 대체 태그 : CSS사용
  • font
    • 폰트 지정
    • 대체 태그 : CSS사용
  • frame
  • frameset
  • noframes
  • strike
    • 취소선
    • 대체 태그 : s, del 혹은 CSS사용
  • tt
    • 글꼴을 같은 폭으로 표시
    • 대체 태그 : CSS사용