시멘틱 관련 하여 질문 드립니다.
조회수 1435회
안녕하세요 일전에form 관련 질문에서 야무선생님이 답변 주신 내용 입니다.
"시멘틱 폼 디자인 (writing a form in a meaningful (read: semantic) way) 에서는 사용자가 폼을 읽을 때 텍스트 콘텐츠의 흐름(flow)으로 읽히도록 구성해야 합니다.
그런 관점에서 단락(Paragraph) 요소는 글의 묶음으로 그 흐름을 처리할 때 사용할 수 있어요. 하지만 디비전(Division)은 의미 없는 묶음에 가깝습니다. (의미 있는 글의 흐름을 고려하지 않은거죠.)
그런 이유로 W3C에서 폼 컨트롤을 단락 요소로 감싼 것입니다. ^
그럼에도 꼭 단락 이어야 하는가? 물어보신다면 그렇지 않다고 이야기 드릴 수 있습니다. 디비전으로 감싼다고 해서 표준을 준수하지 않은 것은 아니에요. 보다 의미적(Semantic)인가 라면 다르겠지 만요.
폼 내부에 테이블을 사용할 수 도 있는 것이고, 단락을 사용할 수도 있고, 디비전을 사용할 수 도 있습니다. "
이 내용에서 "시멘틱 폼 디자인 (writing a form in a meaningful (read: semantic) way) 에서는 사용자가 폼을 읽을 때 텍스트 콘텐츠의 흐름(flow)으로 읽히도록 구성해야 합니다."
라고 말씀해 주신부분에 해당되는 내용이 w3c spec에 있는지 https://www.w3.org/TR/html52/grouping-content.html#the-p-element 에서 찾아 보았으나 짧은 영어 실력때문인지 찾을 수 없었습니다. 위에 말씀해 주신 부분은 따로 작성되어 있는 곳이 있는 건가요?? 아니면 오랜 트레이닝으로 깨닫게 되신 건가요??
예전에는 표준 === 시멘틱 인줄 알았는데 야무 선생님의 강의를 들으면서 제 생각이 틀렸구나를 알게 되면서 시멘틱적으로 생각하려 하는데 너무 접근하기가 힘드네요..
1 답변
-
수년 전 Form 스펙에 이런 문구가 있었습니다.
Any form starts with a form element, inside which are placed the controls. Most controls are represented by the input element, which by default provides a one-line text field. To label a control, the label element is used; the label text and the control itself go inside the label element. Each part of a form is considered a paragraph, and is typically separated from other parts using p elements. Putting this together, here is how one might ask for the customer's name:
...
현재 w3.org의 해당 문구는 아래와 같이 바뀌어 있습니다.
Any form starts with a form element, inside which are placed the controls. Most controls are represented by the input element, which by default provides a one-line text field. To label a control, the label element is used; the label text and the control itself go inside the label element. Each area within a form is typically represented using a div element. Putting this together, here is how one might ask for the customer’s name:
...
의미론적인 웹 개발이 표준에 가깝지만 정답은 아니니,
편의에 맞게 쓰시면 좋을 것 같습니다. 가급적이면 시맨틱하게 하시게요ㅋ
출처 : 스택오버플로 & https://www.w3.org/TR/html5/forms.html#the-form-element
-
(•́ ✖ •̀)
알 수 없는 사용자
-
댓글 입력