드림코딩 엘리님이 말하는 "시멘틱 마크업" 정리와 HTML 요소 참고서

출처 : https://blog.naver.com/PostView.naver?blogId=designup80&logNo=222703198843

---

시멘틱 마크업이란?

div, section, article, h2 등 수많은 태그들을 문서 내용에 맞게 선택해서 사용하는 것을 시멘틱 마크업이라 합니다.

 

---

시멘틱 마크업을 해야 하는 이유?

1. SEO - 검색엔진 최적화에 유리

2. 웹접근성 - 시각장애인들도 웹을 편리하게 접할 수있도록 도와줌

3. 유지보수 - 정리된 마크업은 코드 식별이 용이함

 

 

---

시멘틱 마크업을 할때 애매한 태그 

<article> vs <section>

<section>

div 대신에 정보글을 묶어줄 때 사용

<article>

body안에서 자제척으로 독립적으로 보여줘도 문제가 없는 완성된 정보를 묶어줄 때 사용

---

<i> vs <em>

<i>

시각적으로만 글자가 기울어져 보이게 하는 효과를 줄때 사용

<em>

문서에서 기울림 효과를 이용하여 강조를 하고 싶을 때 사용

---

 

<b> vs <strong>

<b>

시각적으로만 글자를 굵게 하는 효과를 줄때 사용

<em>

문서에서 볼드 효과를 이용하여 강조를 하고 싶을 때 사용

---

 

<button> vs <a>

<button>

글쓰기, 회원가입, 로그인 등 특정한 액션의 버튼에서 사용

<a>

웹문서 이동을 위한 링크에 사용

---

HTML 요소 참고서

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

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN