08/19 : 정말 오랜만에 웹표준 태그에 대해 고민을 했다.
한 문장안에서 특정문구 및 단어를 강조하기 위해 마크업을 달리 표기하는 스타일링 작업이 많다. 이런 경우 PartialBoldText라는 컴포넌트를 사용해서 강조할 부분만 <b>로 따로 표기해주는 방식으로 작성했다.
지금은 모종의 이유로... 컴포넌트를 사용하지 못하고 있는데
그렇기 때문에 p태그 안에 inline속성의 span태그를 두어 span태그에 스타일을 따로 주는 방식으로 작성했다.
이걸 리뷰에서 p대신 div, span대신 i로 변경하자하고 변경이 되었다... p를 div로 변경하는 것은 아직 동의하지 못했고,
HTML<i> 태그
i는 익숙하지 않아 좀더 검색해보았다.
i태그는 인라인속성이며 기울여진 이태릭채로 표기되는 텍스트여서 주로 텍스트의 일부를 정의하거나 기술용어 등을 표기할 때 나타내고 적절한 상황이 없는 경우에만 사용할 것을 권장했다.
이번 스타일은 두꺼운 글씨로 강조하는 의미를 갖는 모습이었는데
때문에 i태그보단 강조된 텍스트를 나타내는 em태그나 중요함을 나타내는 strong태그가 적합할 것 같다. b태그를 사용할 수 도 있겠지만 b태그는 스타일적으로 두꺼움을 나타내는 것 같아서 의미를 부여할 수 있는 em과 strong이 더 강조되는 듯하다.
HTML<div> 태그
div태그 역시 article, nav 등 의미있는 태그를 사용하고 단순 스타일링을 위한 엘리먼트들의 박스 및 특별한 의미를 부여할 경우가 아닌 경우에만 사용하는 것이 권장된다.
웹접근성을 위해서는 단순히 스타일 특성을 나타내는 태그보다 의미를 나타내줄 수 있는 태그가 좋은 것 같다. 반대로 주의할 점은 h1, mark, b태그들 처럼 의미와 스타일요소를 동시에 부여하는 태그들이 있는데, 보여지는 레이아웃이나 스타일을 만들겠다고 전혀 의미와 부합하지 않은 태그를 쓰는 것 역시 금지이다. 예를들면 여러 큰 텍스트 들이 나열되어있는 화면에서 제목도 아닌 내용에 h1사이즈에 맞는 텍스트가 있다고 h1을 사용하면 안된다는 것이다. h1은 타이틀의 의미를 갖고 있기 때문에 제목 부분에서 사용할 필요가 있다.
이게 꼭 장애인 및 노인분들을 고려한 웹접근성이 아니더라도 개발자간 코드를 빠르게 파악할 수 있는 소통의 도구라고도 생각한다.
코드 상세내용을 보지 않더라도 대략적으로 어느 화면의 구조에 해당되는지 의미가 담긴 시맨틱태그를 통해 빠르게 파악할 수 있어 코드의 가독성을 높이기 때문이다.
정리하면 non-semantic tag보다 의미가 담긴 semantic tag를 우선적으로 사용할 것.
