HTML

HTML(Hyper Text Mark up 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	Contents	Version
<h1>~<h6>	<h1>~<h6>는 제목 영역을 설정합니다.	Block	HTML4
<div>	<div>는 문서의 섹션을 만들거나 영역을 나눌 때 사용합니다.	Block	HTML4
<ul>	<ul>는 unordered list의 약자로 순서가 필요없는 목록을 만듭니다.	Block	HTML4
<ol>	<ol>는 ordered list의 약자로 순서가 필요한 목록을 만듭니다.	Block	HTML4
<li>	목록을 만들때 <ul>와 같이 쓰이는 태그입니다.	Block	HTML4
<p>	<p>는 paragraph의 약자로 문단을 표현할 때 쓰이는 태그입니다.	Block	HTML4
<span>	<span>는 텍스트 일부분에 글자색/폰트/배경색 등을 지정할 때 사용하는 태그입니다.	Inline	HTML4
<table>	<table>는표를 나타내는 HTML 태그이며,내부에 행을 나타내는 tr과 셀을 나타내는 th, td 태그 등이 사용됩니다.	Block	HTML4
<tr>	<tr>는 table row의 약자이며,표 내부에서 행을 나타내는 태그입니다.	Block	HTML4
<th>	<th>는table header의 약자이며,헤더 칸(cell)을 나타내는 태그입니다. 기본 스타일: 중앙 정렬,두껍게(font-weight:bold)	Block	HTML4
<td>	<td>는 table data의 약자이며,일반적인 칸(cell)을 나타내는 태그입니다.기본 스타일: 왼쪽 정렬(text-align:left)	Block	HTML4
<thead>	<thead>는 테이블 태그 안에서 표의 머릿말 부분의 태그입니다.	Block	HTML4
<tbody>	<tbody>는 테이블 태그 안에서 표의 본문부분의 태그입니다.	Block	HTML4
<tfoot>	<tfoot>는 테이블 태그 안에서 표의 꼬리부분의 태그입니다.	Block	HTML4
<col>	<col>는 테이블 하나 이상의 열 td에 대해 속성 값을 정의하는 태그입니다. 각 셀에 스타일을 반복하는 대신에 열에 대하여 스타일을 적용하는데 유용하며 <table>/ <colgroup> 요소 안에서만 사용가능합니다. html은 <col>의 닫는 태그가 없습니다.	Block	HTML4
<colgroup>	<colgroup>는<col>와 함께 쓰이며 여러 개의 col요소를 하나의 그룹으로 묶는태그입니다.	Block	HTML4
<br>	줄 바꿈을 하는 태그로써 닫는 태그가 없습니다.	Block	HTML4
<strong>	글자를 굵게 표시하여,텍스트를 중요하게 보이고자 할 때 사용합니다.	Inline	HTML4
<em>	emphasized text의 약자로 특정 텍스트를 강조하고자 할 때 사용합니다.	Inline	HTML4
<b>	다른 텍스트와 단순 구별하고자 할때 사용합니다.	Inline	HTML4
<mark>	중요성과 강조를 고려하지 않은 단순 참고용 표시를 할 때 사용합니다.	Inline	HTML5
<address>	하단에 표시되는 정보를 표기할 때 사용합니다.	Block	HTML5
<section>	section요소는 문서나 응용프로그램의 일반적인 섹션을 표현합니다.	Block	HTML5
<article>	article요소는 문서내에서 독립적인 컨텐츠를 나타냅니다.	Block	HTML5
<nav>	nav요소는 다른 페이지나 같은 페이지 안에 다른 부분으로 이어주는 네비게이션 링크로 구성된 섹션을 표현합니다.	Block	HTML5
<main>	main요소는 문서의 중요한 내용을 담는 태그 이며,<div id="main"> 과 같은 의미입니다.	Block	HTML5
<aside>	문서의 주요 부분을 표시하고 남는 사이드바 콘텐츠를 표시합니다.	Block	HTML5
<header>	문서나 구역의 도입 부분, 혹은 상단 네비게이션 요소의 그룹을 지정합니다.	Block	HTML5
<footer>	문서나 특정 구역에 대한 하단부(푸터, 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는 섹션 콘텐츠가 아닌 그룹을 나타내는 요소이며, section,article, aside 등을 포함 할 수 있습니다.

HTML5에서 새로 생긴 태그

-새로운 구조적 태그-

<article> :뉴스 기사나 블로그 글 같은 독립적인 텐츠를 표시합니다. 티스토리의 경우 본문이나 보호글, 공지사항, 방명록 등 한페이지에 보여지는 부분을 넣을 수 있습니다.
<aside> :문서의 주요 부분을 표시하고 남는 사이드바 콘텐츠를 표시합니다.
<bdi> :바깥쪽의 여러 텍스트와 다른 방향으로 서식이 지정된 글의 부분을 구분하기 위해 사용됩니다.
<command> : 사용자가 동작시킬 수 있는 명령 버튼을 정의 합니다.
<details> :사용자가 보거나 감출 수 있는 추가적인 상세 사항을 정의 합니다.
<summary> :<details> 요소를 위한 제목을 정의합니다.
<figure> :부가적인 설명글(캡션)이 붙을 일러스트레이션, 다이어그램, 사진, 코드 목록과 같은 컨텐츠를 지정합니다.
<figcaption> :<figurev> 요소에 대한 설명글을 정의합니다.
<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> :줄 분리 지점을 정의합니다.

-새로운 미디어 요소들-

<audio> :사운드 컨텐츠를 정의합니다.
<video> :비디오나 영상을 정의합니다.
<source> :<video>나 <audio> 태그 내부에 여러개의 미디어 자원을 지정합니다.
<embed> :외부 프로그램이나 상호 작용적인 컨텐츠를 위한 컨테이너를 정의합니다. (플러그인용)
<track> :<video>나<audio> 요소에 대해 텍스트 형태의 트랙 정보나 자막을 지정해 줍니다.

-새로운 폼 요소-

<datalist> :사용자가 텍스트 필드에 내용을 입력할 때 선택할 수 있는 값들을 목록으로 보여줍니다.
<keygen> :양식을 서버로 전송할 때 한 쌍의 키를 만들어 private key는 로컬에 저장하고 public key는 서버에 저장합니다.
<output> :수학적인 계산의 결과값을 표시합니다

HTML5에서 의미가 변한 속성

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

HTML5에서 없어진 태그

Professional web publishers

uuiiop132.dothome.co.kr

HTML

HTML

태그(Tag)

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

HTML Reference

section

article

nav

main

aside

header

footer

HTML5에서 새로 생긴 태그

-새로운 구조적 태그-

-새로운 미디어 요소들-

-새로운 폼 요소-

HTML5에서 의미가 변한 속성

HTML5에서 없어진 태그

kimsojin