HTML 일반적인 태그 모음
a
- a(Anchor) 태그는 현재 페이지에서 다른 페이지로 이동할 수 있는 링크를 만들기 위해 사용한다.
- 자동으로 닫는 태그 x
- 시멘틱 O <!-- 검색엔진이 이 태그를 봤을 때 의미가 있다는 뜻-->
- 속성
href : 이동할 주소 및 경로
target : 이동할 방식
_blank : 새로운 탭에서 이동
_self : 현재 탭에서 바로 이동
<a href="https://naver.com" target="_blank">네이버</a>
b
- b(Bold) 태그는 텍스트를 굵게 만든다.
- 자동으로 닫는 태그 x
- 시멘틱 x
- 단순히 텍스트를 굵게 만들기 위해서는 <b>태그가 아닌 css의 font-weight 속성을 사용해야 함
strong
- 텍스트를 굵게 만든다
- 자동으로 닫는 태그 x
- 시멘틱 o
- 검색 엔진 최적화(SEO, Search Engine Optimization)가 이루어져, 검색 엔진으로 하여금 해당 태그가 가지고 있는 내용이 문서에서 중요한 내용임을 알림
- 스크린 리더(Screen Reader)로 하여금 해당 태그의 내용을 강한 어조로 읽게 하여 웹 접근성(Web Accessibility)을 향상시킨다.
<b>이거는 b태그의 내용</b>
<strong>이거는 strong의 내용</strong>
br
- br(Break)태그는 개행을 위해 사용한다.
- 자동으로 닫는 태그 o
- 시멘틱 x
- 문서 레이아웃(디자인)을 목적으로 사용하면 안됨
<br>
h1, h2, h3, h4, h5, h6
- h1, h2, h3, h4, h5, h6(Heading)태그는 이를 포함하는 태그의 제목이나 간략한 주제를 나타내기 위해 사용
- 자동으로 닫는 태그 x
- 시멘틱 o
- 숫자가 작을수록(1에 가까울수록) 의미가 크다.
- <h1> 주로 문서의 제목과 동일하게 지정, 문서에 하나만 존재하는 편
- 동일한 단계 안에 동일한 등급의 헤딩 태그를 두지 않는 것이 좋다.
<h1>이거는 h1 내용</h1>
<h2>이거는 h1 내용</h2>
<h3>이거는 h1 내용</h3>
<h4>이거는 h1 내용</h4>
<h5>이거는 h1 내용</h5>
<h6>이거는 h1 내용</h6>
cite
- 텍스트를 기울이기 위해 사용
- 자동으로 닫는 태그 x
- 시멘틱 o
- 단순히 텍스트를 기울이기 위해선 css의 font-style 속성을 사용해야 함
- 출판물, 영화 등 저작물의 출처나 제목 등 표시
em
- em(Emphasize), 텍스트를 기울이기 위해 사용
- 자동으로 닫는 태그 x
- 시멘틱 o
- 단순히 텍스트를 기울이기 위해선 css의 font-style 속성을 사용해야 함
- 문장, 문장의 일부를 강조
i
- i(Italic), 텍스트를 기울이기 위해 사용
- 자동으로 닫는 태그 x
- 시멘틱 o
- 단순히 텍스트를 기울이기 위해선 css의 font-style 속성을 사용해야 함
- 본문의 주된 언어와 다른 언어를 담음
<cite>cite 내용</cite>
<em>em 내용</em>
<i>i 내용</i>
img
- Image 태그는 이미지를 삽입
- 자동으로 닫는 태그 o
- 시멘틱 o
- 속성
alt : src 속성에 명시된 이미지를 표시할 수 없을 때 대신(Alternative)하여 표시할 텍스트 문자열, 해당 속성을 명시하지 않는 것은 html5 표준 위반
src : 표시할 이미지의 주소, 경로 혹은 64진법(Base64) 데이터 문자열이다.
<img alt="라면" src="https://i.namu.wiki/i/8s7OaNPsZ8KC1e8RQ6QZEwgfFUoIVVOIm0jA72-UO6Imw0OgI1aEK_DulMeXWbg4tstts3IQFMJS0jmYKD9rzQ.webp"> <!--사진의 사이트가 막히면 못불러옴-->
li
- List Item, 목록의 항목 하나를 가지기 위한 태그
- 자동으로 닫는 태그 x
- 시멘틱 o
- 부모로 <ol>, <ul> 태그만 가짐
ol
- Ordered List, 순서와 유관한 항목을 가지기 위한 목록 태그
- 자동으로 닫는 태그 x
- 시멘틱 o
- 자식으로 <li> 태그만 가짐
ul
- Unordered List, 순서와 무관한 항목을 가지기 위한 목록 태그
- 자동으로 닫는 태그 x
- 시멘틱 o
- 자식으로 <li> 태그만 가짐
<ol>
<li>
<h2>프론트</h2>
<ol>
<li>HTML</li>
<li>css</li>
<li>javascript</li>
</ol>
</li>
</ol>
<ul>
<li>메일</li>
<li>카페</li>
<li>블로그</li>
</ul>
u
- Underline, 오자를 강조하기 위함, 시각적 효과로 밑줄이 그임
- 자동으로 닫는 태그 x
- 시멘틱 o
- 단순히 밑줄을 긋기 위해선 css의 text-decoration 속성을 사용해야 함
<u>외</u> <u>않됀데</u>?sub
- Subscript, 아래 첨자를 위해 사용
- 자동으로 닫는 태그 x
- 시멘틱 x
sup
- Superscript, 위 첮마를 위해 사용
- 자동으로 닫는 태그 x
- 시멘틱 x
3의 3승은 3<sup>3</sup>으로 표시
물의 원소 표시는 H<sub>2</sub>O와 같이 한다.
p
- 문단을 만들 때 사용
<p>1234</p>
<p>5678</p>