시멘틱 관련 하여 질문 드립니다.

조회수 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

    • (•́ ✖ •̀)
      알 수 없는 사용자

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)