시맨틱 마크업 정리 초안
회사 내부에서 앞으로 퍼블리싱 파트에 신규 인력이 충원될 시 사용할 가이드라인의 초안을 작성하고 있는데요.
손 가는대로 러프하게 작성한 다음, 이걸 담백하게 만들 작정입니다. 작업 중간중간에 짬을 내서 만들고 있어요.
오늘은 시맨틱 마크업 방법론 가이드라인 초안을 써봤는데, 내용이 어떤지 어렵지는 않은지 틀린 곳은 없는지 시간 나실 때 한번씩 살펴봐주십사 하고 부끄러움을 무릅쓰고 올려봅니다.
시맨틱 마크업은 아무리 고민해도 답이 안 나오던 파트인데, 이번에 나름대로 해답을 내리고 이를 정리했습니다.
그누보드나 영카트 등에도 다시 적용하자니 좀 깝깝해지기도 하는데 ㅎㅎ 나름의 답이 내려지니 후련하고 앞으로 불나게 코딩할 일만 남았구나 싶은 생각이 드네요.
제가 준비 중의 강좌에서 시맨틱 마크업, 아웃라인 파트는 이러한 내용을 기본으로 준비하고 있으니 강좌에 관심 있으신 분은 미리 숙지해두셔도 좋을 것 같네요.
and
냑 회원님 여러분들 나름의 방법론이 있다면 알려주세요.
그래서 열심히 살펴보고 개선할 점은 개선할 수 있게 도와주세요.
초안일 때 방향을 더 잘 잡는게 좋을 것 같네요. ^^;;
시맨틱 마크업 방법론
article section aside 등은 문서 본문으로부터 결정되는 방식이 일반적으로 설명되고 있다.
하지만 이 방법은 블로그와 같이 서비스 유형이 단순한 형태에 최적화 된 방법이라고 볼 수 있다.
웹 문서가 아무리 담백해져도 서비스의 다양성과 편리성은 당면한 과제일 수 밖에 없으며, 매번 본문으로부터 각 서비스의 의미를 결정짓는 일은 현실적이라고 말할 수 없다.
따라서 문서 본문으로부터 시맨틱 마크업을 결정짓는 것이 아닌, 각 요소별로 부모 요소가 가진 의미를 상속받아 자식 요소가 부모 요소에게 어떤 의미인지를 결정한다.
- html > body > 여기 에 해당하는 요소를 결정한다. ex) article section aside nav div 등
- 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.그누보드위의 방법 중 하나를 선택 혹은 혼용하는 것이 좋다.
정리하자면
문서 본문과의 관계는 최초 한번 정의하고, 이후 정의된 요소의 자식 요소는 정의 요소로부터 관계를 따져 의미를 부여한다.
댓글 3개
가브님 댓글 중 발췌 :
왜냐면, 일단 명세에서 aside 엘리먼트를 본문의 흐름에 관여하지만 본페이지와의 연관성이 미미한 컨텐츠를 래핑하는 용도로 작성되어있습니다. section 의 경우 책으로 따지면 한 목차를 갖거나 소제목을 갖는 중요한 컨텐츠의 래핑에 쓰이고(이래서 암묵적으로 heading 을 포함하여야 하는 근거가 생기는거죠), aside 같은 경우 각주의 모음을 래핑하는데 쓰는 경우일테니까요
이라는 부분은 찬성하기 어려워 보입니다.
section, article, div 정도의 유사점과 차이점을 고려해보고
aside 안쪽의 내용이 어느것에 적절한지에 따라 만들면 좋을 것 같아요.
내용따라 적용 태그나 방법이 달라지니 사실 어떤게 답이다 라고 설명하기가 애매하니까요.