회사 내부에서 앞으로 퍼블리싱 파트에 신규 인력이 충원될 시 사용할 가이드라인의 초안을 작성하고 있는데요.
손 가는대로 러프하게 작성한 다음, 이걸 담백하게 만들 작정입니다. 작업 중간중간에 짬을 내서 만들고 있어요.
오늘은 시맨틱 마크업 방법론 가이드라인 초안을 써봤는데, 내용이 어떤지 어렵지는 않은지 틀린 곳은 없는지 시간 나실 때 한번씩 살펴봐주십사 하고 부끄러움을 무릅쓰고 올려봅니다.

시맨틱 마크업은 아무리 고민해도 답이 안 나오던 파트인데, 이번에 나름대로 해답을 내리고 이를 정리했습니다.
그누보드나 영카트 등에도 다시 적용하자니 좀 깝깝해지기도 하는데 ㅎㅎ 나름의 답이 내려지니 후련하고 앞으로 불나게 코딩할 일만 남았구나 싶은 생각이 드네요.

제가 준비 중의 강좌에서 시맨틱 마크업, 아웃라인 파트는 이러한 내용을 기본으로 준비하고 있으니 강좌에 관심 있으신 분은 미리 숙지해두셔도 좋을 것 같네요.

and
냑 회원님 여러분들 나름의 방법론이 있다면 알려주세요.
그래서 열심히 살펴보고 개선할 점은 개선할 수 있게 도와주세요.
초안일 때 방향을 더 잘 잡는게 좋을 것 같네요. ^^;;

강좌안내보기

시맨틱 마크업 방법론

article section aside 등은 문서 본문으로부터 결정되는 방식이 일반적으로 설명되고 있다.
하지만 이 방법은 블로그와 같이 서비스 유형이 단순한 형태에 최적화 된 방법이라고 볼 수 있다.
웹 문서가 아무리 담백해져도 서비스의 다양성과 편리성은 당면한 과제일 수 밖에 없으며, 매번 본문으로부터 각 서비스의 의미를 결정짓는 일은 현실적이라고 말할 수 없다.
따라서 문서 본문으로부터 시맨틱 마크업을 결정짓는 것이 아닌, 각 요소별로 부모 요소가 가진 의미를 상속받아 자식 요소가 부모 요소에게 어떤 의미인지를 결정한다.

1. html > body > 여기 에 해당하는 요소를 결정한다. ex) article section aside nav div 등
2. html > body > x > 여기부터~ 에 해당하는 요소는 1에서 결정한 요소로부터 결정한다.

ex) 나쁜 예

aside.광고 > aside.그누보드

위의 예는 aside 자식 요소가 모두 aside 인데, 문서 본문과 관계가 없다는 것을 두번 얘기하는 것과 마찬가지이다.
즉, 관련없음 > 관련없음 이 되는 것인데, 이것은 문서와 관련 없음을 의미하기도 하지만 aside.광고와 aside.그누보드 역시 관계가 없다는 의미가 된다.
부모와 자식 간에 의미 없는 관계가 형성된다면, 억지로 부모 요소를 만들 필요가 없다. design 혹은 grouping 때문에 어쩔 수 없다면

ex) 좋은 예1

div.광고 > aside.그누보드

ex) 좋은 예2

aside.광고 > div.그누보드

ex) 좋은 예3

aside.광고 > section.그누보드

위의 방법 중 하나를 선택 혹은 혼용하는 것이 좋다.

정리하자면
문서 본문과의 관계는 최초 한번 정의하고, 이후 정의된 요소의 자식 요소는 정의 요소로부터 관계를 따져 의미를 부여한다.