Text-level semantics
<br> <wbr>
<br> : 줄바꿈을 위한 태그로 시멘틱한 태그가 아니다.
<wbr> : 페이지에서 한 줄로 표시가 되지 않을 때만 줄바꿈.
<a href="경로">
a 요소는 HTML의 핵심적인 요소로 링크를 만들 때 사용한다.
<a href="https://www.naver.com">click</a>
<a href="https://www.naver.com" target="_blank">click</a> 타겟 블랭크는 새 창에서 열린다.
<a href="#one">click</a> 해쉬링크. class로는 사용할 수 없고, **id로만** 사용 가능 함. 한 페이지 내에서 원하는 곳으로 이동하고 싶을 때!!<b> <strong>
<b> : 글꼴 굵게. css 나오기 전 사용하던 것.
<strong> : 굵은 글꼴로도 나오고, 중요도 표시해 줄 수 있다. 둘의 디자인적인 차이는 없지만 의미는 다르다. 스트롱은 강조!
<i> <em>
기울임 글꼴. i도 b태그와 마찬가지로 의미는 없었는데 HTML5부터 주 언어와 다른 언어로 표현되는 부분 등 어떤 이유로 주위와 구분해야하는 부분을 표현하기 위해 사용.
em 태그는 같은 기울임 글꼴로 표현되지만 강조의 의미가 있다. 스트롱이 조금 더 강한 강조.
<dfn>
현재 문맥에서 정의하고 있는 용어를 나타낸다. dfn의 가장 가까운 부모가 p 혹은 dt dd 쌍, section 요소일 경우 그 컨텐츠를 dfn의 정의에 대한 설명으로 간주한다.
<abbr>
abbreviation. 약자를 나타내고 싶을 때 사용. 보통은 혼자 쓰이고 dfn 태그로 감싸주기도 한다.
ASAP
(<abbr title="As soon as possible">ASAP</abbr>)
<sup> <sub>
sup는 윗첨자, sub는 아랫첨자를 나타낸다. 화학기호나 수학공식 등 첨자 기호를 이용해야 하는 곳에서만 사용한다.
22 = 4 (2<sup>2</sup> = 4)
CO2 (CO<sub>2</sub>)
<span>
인라인 요소들을 하나로 묶을 때 사용. div처럼 최후의 수단.
Embedded content
<img> : 이미지 삽입 시 사용.
- src(source)
src 속성이 무조건 있어야 한다. src의 ""안에는 절대경로나 상대경로를 넣어야 한다. - alt(alternative text)
이미지가 보이지 않을 때 alt에 적힌 텍스트를 보여준다. 스크린리더의 경우 alt값이 없으면 파일명을 읽기 때문에 공백으로 넣어야 한다. - srcset
화면 크기에 따라 그에 맞는 크기의 이미지를 나오게 할 수 있다. - sizes
뷰포트 조건에 따라 이미지가 차지하게 될 사이즈를 브라우저에게 알려준다.
<picture>
뷰포트의 너비에 따라 커지거나 작아지는 하나의 이미지를 사용하는 대신 서로 다른 디스플레이나 기기에서 해당 뷰포트에 알맞게 채워질 수 있도록 여러 개의 이미지 중에서 적절한 이미지를 사용할 수 있도록 해준다. 이미지 포맷 자체를 변경할 수 있다.
<picture>
<source media="(min-width: 700px)" srcset="/examples/images/people_960.jpg">
<source media="(min-width: 400px)" srcset="/examples/images/people_575.jpg">
<img src="/examples/images/people_200.jpg" alt="People">
</picture>