1. 텍스트 표현

<!--주석--> // 주석  

<br> // 엔터키 기능  

<p></p> // 문단을 나눠 독립된 단락을 생성 다른 내용과의 구분을 위해 단락 전후에서 자동 줄바꿈 수행 

&nbsp  // 두 칸 이상의 연속된 공백, 예약어로 사용되는 문자 

xmrtnanswk //

<hr> // 텍스트 사이 수평선 그리는 것 ( 단락 주제를 구분함)

<hn></hn> // 단락의 제목을 지정하는 태그 

<pre></pre> // 텍스트를 자유롭게 표시(문자가 입력된 형식을 그대로 유지하여 출력)

<blockquote></blockquote> // 상하 줄바꿈으로 시작되는 단락의 생성 및 들여쓰기

2. 글자 스타일 지정


<b></b> // 진하게 표시 

<i></i> // 기울어진 형태

<s></s> // 글자 가운데를 통과하는 줄(취소선)을 표시

<u></u> // 밑줄을 표시 

<sup></sup> // 글자를 위첨자 로 표시

<sub></sub> // 글자를 아래첨자 로 표시

<small></small> // 기본 글자의 크기보다 작은 크기의 글자로 표시

<cite></cite> // 책 , 시 , 그림, 영화 등의 작품 제목을 표시

<code></code> // 컴퓨터 코드를 표시

<samp></samp> // 프로그램의 샘플 출력을 표시

<var></var> // 변수를 표시

<dfn></dfn> // 용어에 대한 정의를 표시

<em></em> // 강조하는 내용을 표시

<strong></strong> // 중요한 내용을 표시

<abbr></abbr> // 축약형을 표시

<address></address> // 실제 우편물 주소를 표시 

<kbd></kbd> // 키보드로 입력한 내용임을 표시

<q></q> // "짧은 인용구를 표시"

3. 목록지정

* 목록의 종류

1) 순서 없는 목록(Unordered List)

  • 글머리 기호 (•) 를 붙여 목록의 각 항복을 표시한다.
 <ul>...</ul>
       ㄴ 자식요소 -> li

2) 순서 있는 목록(Ordered List)

순서(1,2,3,⋯)를 매겨서 목록의 각 항목을 표시 
<ol> ⋯ </ol>
     ㄴ 자식 요소 → li

3) 서술 목록(Description List)

어떤 용어나 이름에 대해서 서술하는 형식 
<dl> ⋯ </dl>
     ㄴ 자식 요소 → dt, dd

4) 정리

<ul></ul>  // 순서 없는 목록을 지정하는 태그 

<li></li> // 자식 태그로 각 항목의 내용을 표현할 때 사용 들여쓰기 , 자동 줄바꿈 , 종료태그 없이 사용가능 

<ol></ol> // 각 항목 앞에 순서를 나타내는 기호 붙여서 표시 ( 순서 있는 기호 -> 숫자(기호) , 영문자, 로마자 등)


<dl></dl> // 용어 이름을 나열하고, 이에 대한 설명을 제공하는 목록 (부모)

<dt></dt> // 용어/이름을 나열하기 위한 것, 자동 줄바꿈 (위에 자식)

<dd></dd> // 나열된 용어 / 이름 대한 설명을 표시 자동 줄바꿈 및 들여쓰기 기능 (아랫 자식)

4. 콘텐츠 그룹핑

1) 콘텐츠 컨테이너_01

<div> // 태그 ( 블록요소 ) 
 ㄴ HTML 요소를 묶어 하나의 논리적인 다위의영역을 구성 논리적으로 구분된 대량의 
 내용에 대해 css 스타일 지정 또는 전체 페이지의 공간을 분할하여 레이아웃 구성하는데 사용

2) 콘텐츠 컨테이너_02

<span> // 태그 (인라인 요소)
  ㄴ  텍스트의 일부에 대해 CSS 스타일 지정 또는 javascript에서 조작할때 유용