728x90
시멘틱마크업(Semantic markup)
시멘틱(semantic)의 사전적인 뜻 '의미론적인'으로 해석이 가능하며
의미에 맞는는 태그를 사용하라는뜻!
ex)
- 헤드/푸터에 <header> 와 <footer> 사용
- 메인 컨텐츠에 <main> 과 <section> 사용
- 독립적인 컨텐츠에 <article> 사용
- 최상위 제목으로 <h1> 사용
- 순서가 없는 목록으로 <ul> 과 <li> 사용
- 내비게이션에 <nav> 사용 etc..
이런식으로 태그가 가진 의미에 맞는 태그를 사용하여야해
시멘틱 마크업을 해야 하는 이유?
1. SEO(Search Engine Optimize) - 검색엔진 최적화에 유리
2. 웹접근성 - 시각장애인들도 웹을 편리하게 접할 수있도록 도와줌
3. 유지보수 - 정리된 마크업은 코드 식별이 용이함
ex 1) 1
왼쪽 처럼 작업한다면 작업할곳을 찾기 힘들지만 우측 처럼 작업한다면 자신이 작업해야할곳을 쉽게 찾아갈수있음
ex 2)
See the Pen Untitled by getgrovy (@getgrovy) on CodePen.
테그가 가지는 의미 자체가 스타일이면 마크업 자체가 스타일을 갖는 것이기 때문에 시맨틱 마크업에 적합하지 않아
내용을 강조할경우 <strong>테그를 사용하여 강조하는것이 맞다고 생각해
논리적인순서 마크업(Logical sequence markup)
시멘틱 마크업과함께 논리적인 순서에 의한 마크업
디자인의 순서 보다는 논리적 내용에 대한 순서대로 마크업하라는뜻!
일반인은 상관이 없으나 해당내용을 찾기 힘든 사람들은 어려움이 따르기 때문에 올바른 순서대로 왼쪽 사진과 같이 정렬하여 표현해야 함 !
12345 순서대로 이동할경우 O
12435 순서대로 이동할경우 X
결론...
디자인의 시각적 흐름보다는
논리적인 순서를 따르는것이 중요!