h1 ~ h6
웹브라우저가 작성된 제목의 정보를 통해 자동으로 콘텐츠의 표를 만든다.
제목을 건너뛰지 말고 순차적으로 기입해야 한다.
ex) h1 -> h2 O, h1 -> h3 X
페이지 당 1개의 h1태그를 사용해야 한다.
p
vs code에서 lorem을 타이핑하면 긴 문장 테스트를 할 수 있다.
p태그는 글자의 height값 만큼 여백을 생성한다.
여백을 만들기 위해 p태그를 사용하면 안된다. 스크린 리더 사용자에게 부정적 경험 전달
p태그 안에는 block요소 삽입 불가. 태그가 자동으로 닫힘
br
문단 구분을 하기 위해 br태그를 여러번 이어 사용하는 것은 권장하지 않는다.
<br>, <br/> 모두 HTML5에서 정상 인식한다.
개인적으로 <br/>선호. 할거면 한 스타일만 사용할 것
blockquote(block) ~ q(inline)
인용을 위한 목적 = 다른 사람의 글을 인용 ex) 대사
cite속성을 통해 인용된 정보에 대한 소스 문서 또는 메시지를 URL로 지정 가능.
(blockquote)
blockquote는 들여쓰기가 자동으로 된다.
block요소이므로 자식으로 다른 태그 삽입 가능
(q)
q는 자동으로 “”삽입
pre
작성한 코드 그대로 출력된다. 띄어쓰기, 줄 바꿈 등
고정폭 글꼴을 사용한다.
figure, figcaption
(figure)
figure은 독립적인 콘텐츠를 표현한다.
ex) 이미지, 코드, 문단 등
자동으로 들여쓰기 적용
(figcaption)
figcaption을 통해 독립적인 요소의 설명을 붙일 수 있다.
figcaption은 필수는 아니다. 하지만 대부분은 사용한다.
hr
br과 같이 빈 요소다. 문단의 구분 선을 표현
abbr, address, cite, bdo
(abbr)
약어를 표현하는 태그. title속성을 통해 원래 의미 표현
ex) WWW => World Wide Web
점선 자동 적용
(address)
주소를 나타내는 태그. 이태릭체 자동 적용
(cite)
인용의 출처를 표현하는 태그. 이태릭체 자동 적용
(bdo)
문자열을 뒤집는 태그. ex)아랍어
뒤집으려면 dir속성에 rtl기입해야 적용됨
b, strong
둘 다 적용되는 스타일은 “굵은 글씨 요소”로 동일
(b)
독자의 주의를 요소의 콘텐츠로 끌기 위한 용도의 태그
ex) 요약 키워드, 리뷰의 제품명 등 *특별한 중요성을 갖지 않음
문장 전체를 강조하는 스타일 용도는 아님
(strong)
중대하거나 긴급한 콘테츠를 나타내는 태그(높은 중요도)
스크린 리더기에서 strong태그로 감싼 부분을 강조해서 읽음
i, em
둘 다 적용되는 스타일은 “보통 기울임꼴”로 동일
(i)
어떤 이유로 주위 텍스트와 구분해야 하는 부분을 나타낸다.
ex) 기술, 용어, 외국어 구절, 등장인물 등
(em)
텍스트의 강조를 나타낼때 사용
스크린 리더기에서 em태그로 감싼 부분을 강조해서 읽음
mark, small, sub, sup
스타일을 위한 태그가 아닌 의미 전달 태그로 사용해야 한다.
(mark)
현재 맥락에 관련이 깊거나 중요한 텍스트를 하이라이트 처리 하는 태그
(small)
덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타내는 태그
(sub)
아래 첨자 ex) 화학식 등
(sup)
위 첨자 ex) 거듭제곱의 지수 표기 등
del, ins, code, kbd
스타일을 위한 태그가 아닌 의미 전달 태그로 사용해야 한다.
(del)
삭제 된 텍스트 범위를 표시
(ins)
추가 된 텍스트 범위를 표시
(code)
짧은 코드 조각을 나타내는 태그. 인라인 요소
많은 코드 내용을 작성할 시 pre태그로 감싸서 사용하는 것을 권장.
(kbd)
키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 표현하는 태그
a
(속성)
(href)
href = 페이지 위치, 파일, 이메일 주소 등의 URL로 연결할 수 있는 하이퍼링크 생성
메일은 mailto:, 전화번호는 tel:앞에 작성
ex) mailto:aaa@gmail.com
(target)
_self(기본값) = 현채 창에서 링크 접속
_blank = 새로운 창에서 링크 접속
엔티티(Entity)
HTML 구문 자체로 인식하는 특수 문자들을 표현할때 사용
ex) <, >, “, ‘, &
| 성격 | 실재 | 메모 |
|---|---|---|
| & | & | 엔터티 또는 문자 참조의 시작으로 해석됩니다. |
| < | < | 태그 의 시작으로 해석됨 |
| > | > | 태그 의 끝으로 해석됨 |
| " | " | 속성 값 의 시작과 끝으로 해석됩니다. |
| | 깨지지 않는 공간으로 해석됩니다. | |
| : | : | : 으로 인식 |
