데이터 페이지에 대한 HTML 구조 시맨틱

Question

최대의 가독성 (접근성) 및 다양성을 위해 양식/ 세부 사항보기를 설계 할 때 사용하기에 가장 좋은 구조는 무엇입니까?

예를 들어, ASP.NET MVC 프레임 워크의 스캐 폴딩은 상단에 범례가 있고 모든 필드 (레이블 및 입력/ 편집기 세트)가있는 필드셋을 만듭니다.

사용하기 가장 다양한 구조는 무엇입니까?

예를 들어, 나중에 레이아웃을 변경하려면 하향식 대신 2 ~ 3 개의 필드를 나란히 사용하려면 구조적으로 관련이 없기 때문에 CSS를 통해서만 수행하고 싶을 것입니다.

감사,
키에 론

편집하다: 친구 추천은 DL, DT 및 DDS를 사용하는 것이 었습니다 ... 누구든지 그 생각이 있습니까?

Answer 1

PS 대신 DIV를 사용한다는 점을 제외하고 ASP.NET 스캐 폴딩에 의해 생성 된 구조와 매우 유사한 구조를 사용합니다.

<form>
    <fieldset>
        <legend>Legendary Fieldset</legend>
        <div>
            <label for="textBox">Text Input</label>
            <input name="textBox" id="textBox" />
        </div>
        <div>
            <label for="selectBox">Select box</label>
            <select name="selectBox" id="selectBox">
                <option>1</option>
                <option>2</option>
            </select>
        </div>
    </fieldset>
    <!-- more fieldsets if required -->
</form>

나는 텍스트 단락을 위해 의도 된 P 요소보다 의미 적으로 정확하기 때문에 DIV를 사용합니다.

예를 들어 Fieldset을 500px 너비와 Fieldset Div 250px를 250px로 만들 수 있으므로 나란히 달성 할 수 있기 때문에 다목적 구조도 스타일링 할 때 다양한 구조입니다. 또는 FieldSet Div와 FieldSet에 대해 동일한 너비를 가질 수 있습니다. 또는 필드 셋과 필드 세트의 너비를 같은 너비로 만들고 너비의 절반이고 떠 다니는 일부 div ( "반")에 클래스를 붙일 수 있습니다. 가능성은 실제로 끝이 없습니다.

어쨌든 이것은 내가 일상적인 물건에 사용하는 것입니다. 다재다능하지만 모든 요구 사항에 맞지 않을 수 있습니다.

편집하다 정의 목록에 관한 한, 그들은 의미 적으로 양식을 배치하는 데 사용해서는 안되는 특수 요소입니다.

Answer 2

나는 단지 기본 형태를 만들고 그 주위에서 구조가 자라도록합니다.

<form>
  <input>
  <input>
  <input>
</form>

그리고 그룹화가 필요할 때

<form>
  <div>
    <input>
    <input>
  </div>
  <input>
</form>

그런 다음 모든 프레젠테이션을 CSS로하십시오. 접근성을 테스트하는 가장 좋은 방법은 모든 스타일 시트를 끄고 사이트가 의미가 있는지 확인하는 것입니다.

양식은 블록 레벨 요소이므로 다른 요소를 포함하는 데 의미 적으로 정확합니다.