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>, <ul>, <li> <ol >, <dt>,<dd>
  • 인라인 엘리먼트(Inline Element)
    • 독립된 텍스트 영역으로, 한 줄에 여러 개의 인라인 요소를 표현할 수 있습니다.
    • 인라인 요소에는 블록 요소가 포함 될 수 없지만, 인라인 요소는 포함 될 수 있습니다.
    • <span>, <a>, <strong>, <em>, <img>, <b>, <i >
  • http://coderap.tistory.com/303

HTML

Tag Description Block Version
<h1>~<h6> 제목 영역을 설정할 때 사용 Block HTML4
<div> 문서의 섹션을 만들거나 영역을 나눌 때 사용 Block HTML4
<ul> 순서가 없는 목록을 정의 Block HTML4
<ol> 순서가 있는 목록을 정의 Block HTML4
<li> 목록의 항목을 정의 Block HTML4
<p> paragraph의 약자로 문단을 의미, 태그와 태그 사이에 위치하는 내용이 하나의 문단을 구성 Block HTML4
<span> "Inline Text Container인데, 그 자체로는 아무 역할도 하지 않고,문장의 특정 구역에 CSS스타일을 지정할 때 사용 Inline HTML4
<table> 표를 만드는 태그, 전체구성 레이아웃을 만드는 데도 사용 Blcok HTML4
<tr> table row의 약자. 가로줄을 만드는 역할 Block HTML4
<th> table head의 약자. 표의 제목을 쓰는 역할 Block HTML4
<td> table date의 약자. 셀을 만드는 역할 Block HTML4
<tbody> 테이블의 바디 부분의 그룹을 태그 Block HTML4
<thead> 테이블의 헤드 부분의 그룹을 태그 Block HTML4
<tfoot> 테이블의 풋터 부분의 그룹 태그 Block HTML4
<col> 테이블 하나 이상의 열 TD에 대한 속성 값을 정의. cloumn별로 속성을 제어할 수 있도록 한다. Block HTML4
<colgroup> 열의 구조적인 그룹화를 위해서 사용하며, <col>을 포함하는 부모요소. Block HTML4
<br> Line Break를 의미, 강제 줄바꿈 Inline HTML4
<storong> 중요한 의미를 적는 텍스트를 설정 / 글자가 두껍게 표현 Inline HTML4
<em> 텍스트를 강조할 때 사용 Inline HTML4
<b> 다른 텍스트와 단순 구별하고 싶을 때 사용 Inline HTML4
<mark> 중요성과 강조를 고려하지 않은 단순 참고용 표시를 할 때 사용 Inline HTML5
<address>
<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는 핵심적인 네비게이션에 사용해야 하므로 footer 내에 링크 그롭의 사용은 적절하지 않다.

main

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

aside

  • 웹 문서의 메인 콘텐츠와 관련된 사이드 콘텐츠 영역을 나타냄
  • aside는 메인 콘텐츠와 관련된 사이드의 정보, 광고등 부부넞ㄱ인 정보를 그룹화

header

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

footer

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

HTML5 에서 새로 생긴 태그

새로운 태그

HTML5에서는 태그 자체에 의미를 부여하는 시맨택 마크업(Semantic Markup)을 사용합니다. 아래 태그들은 그에 걸맞게 새로 추가된 태그들로, 이름만으로도 충분히 용도을 짐작할 수 있을 것입니다. 되도록 아래의 태그들을 사용해서 문서의 구조를 만들고 콘텐츠를 삽입하는 것이 논리적인 웹 문서를 만드는 지름길 입니다.

section 일반적인 문서나 애플리케이션 영역을 표시합니다. 섹션의 제목을 나타내는 h1~h6와 함께 사용할 수 있습니다.
article 뉴스 기사나 블로그 글 같은 독립적인 콘텐츠를 표시합니다.
aside 문서의 주요 부분을 표시하고 남는 사이드 바 콘텐츠를 표시 합니다.
hgroup 제목과 그에 관련된 부제목을 하나로 묶습니다.
header 헤더 부분으로 사이트 소개나 네비게이션 등을 표시하기도 하고 내용 중간에서는 머리글 역할을 하기도 합니다.
footer 푸터 부분을 표시합니다. 사이트 제작자나 저작권 정보 등을 나타낼 때 주로 사용합니다.
nav 사이트 안의 내비게이션 요소를 표시합니다.
figure,figcaption 그림이나 비디오 같은 멀티미디어 콘텐츠에 캡션을 붙이려고 할 때 사용합니다.
audio, video 멀티미디어 콘텐츠를 표시합니다. 애플리케이션 개발자들이 사용자 인터페이스를 직접 만들 수 있는 API를 제공합니다.
embed 플러그인 콘텐츠를 표시합니다.
mark 텍스트에 형광펜으로 칠한 것과 같은 강조 효과를 만듭니다.
progress 시간이 걸리는 작업과정을 막대로 표시합니다.
meter 측정값을 표시합니다.
time 날짜나 시간을 표시합니다.
ruby, rt, rp 루비 문자를 표현합니다.
canvas 웹상에 그래픽을 표시합니다. API와 함께 사용해 다양한 애플리케이션을 만들수 있습니다.
command 사용자 실행 명령어를 표시합니다.
details 추가적인 정보나 사용자가 요청하는 정보를 표시합니다.
datalist 사용자가 텍스트 필드에 내용을 입력할 때 선택할 수 있는 값들을 목록으로 보여줍니다.
keygen 양식(form)을 서버로 전송할 때 한 쌍의 키를 만들어 private key(프라이비트키)는 로컬에 저장하고 public key(퍼블릭 키)는 서버에 저장합니다.
output 수학적인 계산의 결과값을 표시합니다.

HTML5 에서 의미가 변한 속성

태그 HTML4에서의 의미 HTML5에서의 의미
a href="#" 또는 href="javascript:;"로 지정해야 널 링크로 사용할 수 있습니다. href 속성 없이 사용하면 '널 링크'로 사용됩니다.
address 이름이나 이메일 주소, 전화번호 등 제작자에 대한 정보를 표시합니다. 실제 우편물 주소를 표시합니다.
b 텍스트를 진하게 표시합니다. 텍스트를 진하게 표시할 뿐 아니라, 제품 소개서안의 제품명, 요약 문서 안의 키워드처럼 특별하게 중요하지는 않지만 진하게 표시하려고 할 때 사용합니다.
hr 가로줄을 표시합니다. 단락 단위로 주제를 바꾸려고 할 때 사용합니다.
i 텍스트를 기울어지게 표시합니다. 텍스트를 기울어지게 표시할 뿐 아니라, 중요한 정보가 들어 있지 않은 주변 콘텐츠로부터 텍스트를 따로 표시할 때 사용합니다.
menu (사용하지 않도록 권고) 실제 문서 메뉴 정보를 제공하는데 사용합니다.
small 작은 글자로 표시합니다. 세부 주석이나 법적 인쇄 문서에서 작은 인쇄 정보를 표시할 때 사용합니다.
strong 글자를 강조합니다. 단순히 진하게 표시하는 것보다 더 중요한 정보를 표시할 때 사용합니다.

HTML5 에서 없어진 태그