기본태그 어디까지 아니? 인라인 태그

모든 태그 정리한것 아님. 필요한것만 빼서 정리.

1. <a>

https://developer.mozilla.org/ko/docs/Web/HTML/Element/a

<a> - HTML: Hypertext Markup Language | MDN

 

- 기본적으로 링크(href)를 위한 태그이나 href요소는 필수가 아님.

- href에 #를 쓰면 페이지가 새로고침/최상단으로 이동하는데 개발/접근성 처리시 주의(링크할 필요없으면 href를 없애고, 버튼으로 사용할꺼면 role=button 추가)

- <a>안에 또다른 <a>를 쓰는것은 금지되어있음.

- download 요소가 있어서 href에 파일링크, download에 이름을 별도 지정하여 다운로드받게 할 수 있음 (IE안됨)

 

기본 aria	(href 있으면) link
가능 aria	(href 있으면) button checkbox menuitem menuitemcheckbox menuitemradio option radio switch tab treeitem (href 없으면) 아무꺼나

---

2. <b>

https://developer.mozilla.org/ko/docs/Web/HTML/Element/b

<b> - HTML: Hypertext Markup Language | MDN

- 굵은 글씨 용도였으나 지금은 css로 가능함.

- 스타일 용도라 아무 의미가 없기때문에 <strong>(핵강조)나 <em>(조금 강조)을 쓰는것이 적절함.

---

3. <em>

https://developer.mozilla.org/ko/docs/Web/HTML/Element/em

<em>: 강세 요소 - HTML: Hypertext Markup Language | MDN

- <b>와 다르게 의미가 있는 태그기때문에 기울임 효과주려고 쓰는것은 비추.

- 둘다 기울임 효과가 있지만 <em>은 콘텐츠 강조, <i>는 기술용어/생각/외국어/주위 텍스트와 다른 어떤것을 나타내고 싶을때 사용함.

<!-- <em> -->
<!-- "해라!" 라는 강조의미 -->
Just <em>do</em> it already!

<!-- <i> -->
<!-- 강조 아님(사람 이름이 아니고 선박 이름을 나타냄) -->
The <i>Queen Mary</i> sailed last night.
<!-- 외국어 -->
라틴어 문구 <i>Veni, vidi, vici</i>는 음악과 예술, 문학에 자주 등장합니다.
<!-- 등장인물 생각 -->
I looked at it and thought <i>This can't be real!</i>
<!-- 용어 -->
The term <i>bandwidth</i> describes the measure of how much information...

---

4. <mark>

https://developer.mozilla.org/ko/docs/Web/HTML/Element/mark

<mark> - HTML: Hypertext Markup Language | MDN

- 텍스트 내 연관성을 가진 부분을 강조할때 사용함(관심가질만한 부분, 단어 검색결과에서 단어 하이라이트)

- 그냥 텍스트 자체가 중요해서 강조하고싶으면 <strong>, <em>을 쓰는것이 적절함.

- 스크린리더는 <mark>태그를 안읽고 넘어가며, 가상선택자를 이용해 읽고 넘어가게 할 수 있음(센스리더는 불가)