html 태그들을 정리해보았다
text 관련태그들
<h1>h1</h1>
~
<h6>h6</h6>
<b>굵게 표시됩니다.</b>
<i>기울임꼴로 표시됩니다.</i>
<strong>강하게 강조합니다.</strong>
<em>약하게 강조합니다.</em>
<ins>밑줄이 표시됩니다.</ins>
<del>취소선이 표시됩니다.</del>
<s>나도 취소선</s>
부분<u>밑줄</u>
<small>조그맣게</small>
이 밑에 가로줄
<hr>
이 위에 가로줄h1
~
h6
굵게 표시됩니다.
기울임꼴로 표시됩니다.
강하게 강조합니다.
약하게 강조합니다.
밑줄이 표시됩니다.
취소선이 표시됩니다.
나도 취소선
부분밑줄
조그맣게
밑에 가로줄
위에 가로줄
목록관련 태그들
<ul>
<li>순서가 없는 첫번째 항목</li>
<li>순서가 없는 두번째 항목</li>
</ul>
<ol>
<li>순서가 있는 첫번째 항목</li>
<li>순서가 있는 두번째 항목</li>
</ol>
<table> // 테이블을 만드는 태그
<tr> // 행을 시작하는태그
<th>A</th> // 테이블의 행, 열의 머리말을 나타낸냄
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>A1</td> // 표의 내용(table data), 셀을 표현한다
<td>B1</td>
<td>C1</td>
</tr>
</table>- 순서가 없는 첫번째 항목
- 순서가 없는 두번째 항목
- 순서가 있는 첫번째 항목
- 순서가 있는 두번째 항목
| A | B | C |
|---|---|---|
| A1 | B1 | C1 |
form 관련 태그들
<input>
text: 한 줄 짜리 문자열 값. 기본값이다
number: 숫자
url: 도메인 주소
email: 이메일
tel: 전화번호
search: 검색어
range: 지정한 범위의 숫자
color: 색
date: 날짜
time: 시각
datetime: 날짜+시각
checkbox: 선택/해제할 수 있는 항목
radio: 중복 선택불가한 선택/해제할 수 있는 항목
button: 버튼
reset: 누를 경우 입력값을 초기화시키는 버튼
file: 파일 업로드
</input>
<textarea> 여러 줄의 문자열 값
<datalist>: 검색어에 들어갈 목록을 지정
<select>: 선택 목록
<option>: 선택 목록에 들어갈 항목
시맨틱 태그들
Semantic은 '의미의', '의미론적인' 이라는 뜻을 가진 형용사다 따라서 시맨틱 태그란 의미가 있는 태그를 말한다
시맨틱 태그 장점
- SEO : 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다
- 코드 가독성 및 유지보수 : 태그의 이름만 보고도 어떤 영역인지 바로 확인이 가능하다
<header> 머리글, 제목, 헤더 태그
<nav> 다른 페이지로의 이동을 위한 링크 공간을 구성하는 태그
<aside> 사이드바 태그
<main> 콘텐츠 영역을 나타내는 태그
<section> 주제, 카테고리 별로 섹션을 구분하는 용도의 태그
<article> 기사, 블로그 등 텍스트 위주의 페이지를 구성하는 태그
<footer> 푸터 태그