HTML 필수 태그 : 텍스트, 그룹, 목록, 링크, 이미지, 텍스트 강조

텍스트 관련 태그

hn 태그

제목이나 주제와 같은 성격의 텍스트를 작성할 때 사용
h1 - h6
(⭐️ 중요도에 따라 구분)
블록 요소
실무에서는 상대적으로 h1 - h4 태그까지 자주 사용
hn 태그로 작성된 텍스트는 검색 엔진에서 키워드로 인식
(검색 엔진 최적화를 위해서 본문의 핵심이 되는 제목이나 주제를 잘 선택해서 작성해야함)
보통 하나의 HTML 확장자 파일 안에서는 h1 태그는 한 번만 사용하는 것을 권장

p 태그

단락(문단, 문장)을 구성할 때 사용
블록 요소

br 태그

줄바꿈을 할 때 사용
콘텐츠가 없는 문법

blockquote 태그

인용문을 작성할 때 사용
문장, 문단 단위로 긴 내용을 인용할 때
블록 요소
➕ cite 속성 사용 가능
(cite="출처 URL")

q 태그

문장 단위의 짧은 인용문을 작성할 때 사용
인라인 요소
큰따옴표("")로 묶여서 출력
➕ cite 속성 사용 가능
(cite="출처 URL")

ins, del 태그

ins : 어떠한 내용을 새롭게 삽입할 때 사용하는 태그
del : 어떠한 내용을 삭제할 때 사용하는 태그
인라인 요소
텍스트가 꾸며져서 출력

sub, sup 태그

sub : 아래 첨자
sup : 윗 첨자

See the Pen text tag by Ellie-Kang (@xtvhavvj-the-builder) on CodePen.

그룹 관련 태그

div 태그

블록 요소와 인라인 요소를 포괄적으로 그룹화할 때 사용
논 시맨틱 태그
웹 브라우저 상에서는 달라지는 건 없지만 코드에서는 그룹화로 구분 가능
CSS에서 스타일 처리할 때 중요
➕ class 속성 사용 가능

span 태그

인라인 요소만 그룹화할 때 사용
논 시맨틱 태그
작은 부분을 그룹화하여 강조
웹 브라우저 상에서는 달라지는 건 없음
CSS에서 스타일 처리할 때 중요

See the Pen group tag by Ellie-Kang (@xtvhavvj-the-builder) on CodePen.

목록 관련 태그

ul(unordered list) 태그

비순서형 목록 생성
불릿 기호로 목록 형태 텍스트 출력
목록 구성 : li (list item) 태그 사용

ol(ordered list) 태그

순서형 목록 생성
넘버링 목록 형태 텍스트 출력
목록 구성 : li (list item) 태그 사용

dl(definition list -> description list) 태그

정의형 목록 생성
목록 구성 : dt (description term), dd (description details) 태그 사용
dt : 설명의 주체가 되는 제목
dd : 설명하는 내용

See the Pen ul&ol&dl by Ellie-Kang (@xtvhavvj-the-builder) on CodePen.

링크, 이미지 관련 태그

a(anchor) 태그

다른 문서 또는 내부의 다른 영역과 연결할 때 사용
인라인 요소
✨ href 속성 필수 사용
href : 이동할 경로
href="#" : 개발 초기 단계에서 대상 경로가 명확하지 않을 때, 다른 페이지로 연결되지 않음
➕ target (자주 사용), title 속성 사용 가능
target 값으로 _blank 많이 사용
_blank : 새창으로 열리게 해줌
title : 링크 설명

img 태그

이미지 삽입할 때 사용
✨ src, alt 속성 필수 사용
인라인 요소

a 태그 + img 태그 = 이미지 링크

See the Pen link tag by Ellie-Kang (@xtvhavvj-the-builder) on CodePen.

텍스트 강조 관련 태그

strong 태그

텍스트 강조할 때 사용
굵은 글씨로 출력

em 태그

텍스트 강조할 때 사용
기울임체 로 출력

See the Pen strong&em by Ellie-Kang (@xtvhavvj-the-builder) on CodePen.