HTML 시맨틱 마크업

시맨틱 마크업은 뭐고 왜 필요할까????

 

시맨틱(Semantic)은 아래와 같은 의미를 가진다.

 

시멘틱 뜻은 알겠고 그러면 시맨틱 마크업은 의미의 마크업 일까요????

시맨틱 마크업은 마크업을 의미를 잘 전달할 수 있도록 작성하자 정도로 저는 이해하고 있습니다.

 

html4 까지는 이러한 것들이 없어서 태그의 이름이 제각각 이었습니다. 각자의 기호에 맞게 사용했기 때문이죠

그래서 검색엔진은 웹페이지의 내용을 올바르게 식별할수가 없었습니다. (기준이 제각각이고 의미도 다 다르니까 우선순위의 설정도 힘들고 여러가지 애로사항이 있었지 않았을까 생각이 드네요)

 

html5가 표준으로 체택되면서 이때 같이 등장한것이 <header>, <section>, <article>, <aside>, <footer>, <nav>, <main> 등등 

태그가 의미를 나타낼 수 있는 태그들이 많이 추가되었어요.

 

이 태그들이 등장하면서 검색엔진은 기준을 가질수 있었고 웹 페이지들의 내용을 올바르게 식별하는 것이 점차 가능해 졌습니다. 

w3c에 따르면 시멘틱 웹을 다음과 같이 정의합니다.

 

어플리 케이션, 기업 및 커뮤니티 전반에 걸쳐 데이터를 공유하고 재사용할 수 있습니다.

 

 

의미를 부여하는 몇가지 예를 확인해보겠습니다.

• 헤더와 푸터에 <header>, <footer> 사용
• 메인 컨텐츠에 <main> 사용
• 영역별로 나뉘어져야 할때는 <section> 사용
• 최상위 제목으로 <h1> 사용
• 내비게이션에 <nav> 사용

두개의 화면은 같게 노출시킬수 있긴합니다....

 

예를 들어 강조를 해야할때 <strong> 태그와 <b> 태그가 있습니다.

둘의 효과는 같습니다. b는 태그자체의 의미가 스타일(bold의 약자), strong은 태그자체의 의미가 강하게 라는 뜻을 가지고 있습니다.

이러할때 의미 부여가 되는 strong을 쓰는것이 시멘틱 마크업에 더 적합하지 않을까 생각합니다.

 

 

---

 

결론 

=> 시멘틱 마크업을 사용하자

이유는???

• 유지보수에 더 좋다 왜??? => 태그만 보고 위치와 역할 파악이 가능해진다.
• 검색엔진 최적화에 유리하다. 왜??? => 검색엔진이 시멘틱 태그를 중요한 키워드로 간주하기 때문에!!
• 스크린 리더가 의미를 파악하기 쉬워진다. mac의 voiceover를 이용하면 스크린 리더기가 화면을 읽어줍니다. 이때 header, footere등을 같이 읽어 준다면 대상자가 이해를 하기가 더 쉬워실 겁니다.

 

 

 

개인적으로 시맨틱 마크업이 잘 되어있다고 생각하는 사이트 

 https://www.lezhin.com/ko

레진코믹스 - 솔직한 재미 대폭발

 

 

출처 : 

http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/html/html5_semantic_elements.asp.html

HTML5 Semantic Elements

https://velog.io/@hyun_sang/HTML-%EC%8B%9C%EB%A7%A8%ED%8B%B1-%EB%A7%88%ED%81%AC%EC%97%85

[HTML] 시맨틱 마크업