HTML5 태그 정리

"Do it! HTML5+CSS3 웹 표준의 정석"을 공부하고, 복습하기 위해 요약한 내용 입니다.

HTML 텍스트 관련 태그

블록 태그

<hn> 제목 </hm> : 제목 표시 n은 1부터 6까지

<p> 단락 </p> : 단락

<br> : 줄바꿈

<hr> : 수평 줄 삽입, css에서 가로선 없앨 수 있음

<blockquote> 인용문 </blockquote> : 인용문, cite 속성으로 인용 사이트 주소 표시 가능

<pre> 텍스트 </pre> : 입력하는 그대로 화면에 표시, 대체 텍스트 추가하는 것이 좋음

인라인 태그

<strong> 굵게 강조할 텍스트 </strong> : 화면 낭독기 구별 O

<b> 굵게 표시하라 텍스트 </b> : 화면 낭독기 구별 X

<em> 이탤릭체로 강조할 텍스트 </em>

<i> 이탤릭체로 표시할 텍스트 </i>

<q> 인용 내용 </q> : 인라인 인용문 블록으로 따옴표가 발생, cite 속성 사용 가능

<mark> 형광 텍스트 </mark> : css background-color를 이용해 색 변경 가능

그 외 태그

<abbr title="full">약어</abbr>

<cite> 참고 내용 </cite>

<code> 소스코드 </code>

<small> 부가정보, 작게 표시 </small>

_아래첨자 , ^위첨자

<s> 취소선 </s> , <u> 밑줄 </u>

HTML 목록 관련 태그

순서목록

순서있는 목록(Ordered List)

<ol>

<li>리스트</li>

<li>리스트</li>

</ol>

순서 있는 목록(Unordered List>

<ul> </ul>

: css 속성값 : list-style-type, start

설명 목록

<dl>

<dt> 제목 </dt>

<dd> 설명 </dd>

...

</dl>

HTML 테이블 관련 태그

기본적인 표 구조

<table>

<caption> 테이블 제목 </caption>

<thead>

<tr>

<th> 제목셀 </th>

</tr>

</thead>

<tbody>

<tr>

<td> 내용셀 </td>

</tr>

</tbody>

</foot> ... </tfoot>

</table>

그 외 colspan, rowspan, colgroup 태그

HTML 이미지 태그

<img src="주소" alt="대체텍스트">

설명글이 있는 이미지

<figure>

<img src="abc.png" alt="abc">

<figcaption> 설명 글 </figcaption>

</figure>

HTML 링크 태그

<a href="링크주소"> 텍스트/이미지 </a>

css에서 text-decoration으로 underline 변경 가능

<a>태그의 속성값 :

1. target="_blank" : 새창으로 열기

2. download : 클릭 시 다운로드

<a>태그를 이용해 앵커 만들기 - Jumping

1. <태그 id="Anchor name"></태그>

2. <a href="#Anchor name"></a>