기본 태그

제목, 부제목 태그

단계별 구획의 제목을 나타내기 위한 태그이다.

<h1> ~ <h6>

• 번호 높을수록 하위 제목
• 줄바꿈 적용
• 권장사항
  • h1는 페이지당 하나
  • 순서를 건너뛰지 말 것 (예: <h1> 다음에는 <h2>)
  • 시각적 효과를 위해 사용하지 말 것 (디자인은 CSS로)
  • 정보의 구조를 나타내는 용도로 사용하 것
    
    

줄바꿈 태그

<br> vs <p>

<br> : break

• 닫는 태그 필요X, 위치 무관
• 여러번 사용 → 여러 줄
• 단순 시각적인 줄 바꿈

<p> : paragraph

• 정보 부여: 한 문단, 정보 덩어리임을 나타냄
• CSS가 적용될 단위로 사용
• 단순 줄 바꿈X, 문단 구분을 위한 태그
  
  

강조 태그

<b> vs <strong>

<b> : bold

• 단순히 진하게

<strong>

• 컴퓨터에게 중요한 정보임을 알림
  (ex: 스크린 리더가 강하게 발음)
  
  

기울임 태그

<i> vs. <em>

<i> : italic

• 단순히 기울임

<em> : emphasize

• 컴퓨터에게 중요한 정보임을 알림
  
  

기타 태그

<small>

• 글씨를 작게

<cite> : citation

• 저작물의 출처 표기 (제목을 표시할 것)
  
  

기타 텍스트 관련 태그

<mark>

• 사용자가 관심을 가질 만한 정보 강조
  (ex: 검색 등 사용자의 행동과 연관 있는 단어)

<sup> : superscript (위첨자)

• 거급제곱, th 등 관례적으로 위 첨자로 넣는 글자일 때

<sub> : subscript (아래첨자)

• 화학 기호 등 관례적 아래 첨자

<s> : strike (취소선)

인용문 태그

<blockquote>

• 텍스트가 긴 인용문에 사용

속성	역할	값
cite	인용문의 출처 URL	URL 텍스트

가로선 태그

<hr>

• 주제나 분위기의 전환 구분
• 단순 밑줄은 CSS로 대신할 것
  
  

이미지 태그

<img> : image

속성	역할	값
src	포함하고자 하는 이미지의 절대/상대 경로	경로 텍스트
alt	이미지 설명 (스크린 리더가 읽어주는 값)	설명문 텍스트
width	이미지의 가로 길이 (CSS로 대체 가능)	단위 없는 정수값

하이퍼링크 태그

다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크 설정

<a> : anchor

속성	역할	값
href	하이퍼링크가 가리키는 URL
target	링크의 페이지를 열 창 지정	_self (현재 창), _blank (새 탭)

💥 기억하기

HTML 태그로 디자인을 하지 말 것 (디자인은 CSS로)
HTML 태그들의 주 용도는 정보의 구조와 특성 표현이다.