HTML : 시멘틱 마크업과 논리적인 순서 마크업이 무엇일까?????

시멘틱 마크업 & 논리적인 순서 마크업

시멘틱 마크업

시멘틱 마크업(Semantic)의 사전적 뜻은 "의미론적인" 정도로 해석할 수 있다.
이것은 마크업을 할 때 의미를 부여하는 태그로 보면 된다.
실제로 마크업을 할 때는 작업자마다 콘텐츠의 의미를 해석하는 차이가 조금 있을 수도 있지만 가급적 시멘틱하게 마크업을 하려고 노력하는 것도 중요하다.
시멘틱 마크업은
종종 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻이다. 시멘틱은 즉, 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻한다.
애초에 프로그래밍 언어는 사람과 기계와의 정해진 약속이며 HTML 역시 마찬가지이다.
시멘틱 마크업은 적절한 HTML 요소를 올바르게 사용하는 것에서 시작한다.

<b> 굵은 </b>   <strong> 중요한 </strong>

위 코드를 작성해서 화면을 보면, 각각의 요소가 같은 모습으로 표현되나 그 의미가 같지는 않다.
<b>는 의미 없이 단순히 텍스트를 굵게 표현하는 태그지만, <strong>은 중요하다는 의미를 지닌다.

<strong>은 중요하다는 의미에 맞춰 브라우저에 의해 굵은 스타일로 표현된 것이다.
따라서 중요하다는 의미를 포함할 때는 <b>가 아닌 <strong>을 사용하는 것이 적절하고 시멘틱한 마크업이다.

논리적 순서 마크업

시멘틱한 마크업과 함께 논리적인 순서에 의해 마크업을 하는것도 매우 중요하다.
논리적 순서에 의한 마크업은 키보드나 터치패드와 같은 입력 장치만으로 HTML 문서의 모든 콘텐츠를 논리적 순서로 이동하여 사용 할 수 있도록 하는 입력 장치 접근성과 밀접한 관련이 있다.