HTML5의 구조와 의미(3): 의미 블록 수준 요소_html5 튜토리얼 기술

HTML5는 또한 순전히 의미 있는 블록 수준 요소를 추가합니다.
그림 대화 상자
저는 기사와 책에서 처음 두 요소를 사용해 왔습니다. 제가 자주 사용하지 않는 세 번째 요소는 주로 서면 텍스트에 사용됩니다.
aside
aside 요소는 지침, 팁, 사이드바, 인용문, 추가 메모 등, 즉 서사의 주요 줄을 벗어난 내용을 나타냅니다. 예를 들어,developerWorks 기사에서 테이블 형식으로 작성된 사이드바를 자주 볼 수 있습니다. HTML4로 작성된 개발자Works 사이드바는 코드 3을 참조하세요.

.xf-value

The.xf-valueselectorusedherestylestheinput
fieldvaluebutnotitslabel.Thisisactuallyinconsistent
withthecurrentCSS3draft.Theexamplereallyshouldusethe
::valuepseudo-classinsteadlikeso:

input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em}

.xf-value .xf-value선택기는 입력 스타일에 사용필드 값이지만 레이블은 아닙니다. 이는 실제로 현재 CSS3 초안과 일치하지 않습니다. 이 예에서는 다음과 같이::value의사 클래스를 사용해야 합니다.input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em} 그러나 Firefox는 이 구문을 지원하지 않습니다.
HTML5에서는 이 사이드바를 보다 의미 있게 작성할 수 있습니다. HTML5로 작성된 코드 4 개발자Works 사이드바를 참조하세요.

.xf-value

여기에서 .xf-value선택기가 사용된 스타일은 입력
필드 값이지만 레이블은 아닙니다. 이는 실제로
현재 CSS3draft와 일치하지 않습니다. 이 예는 실제로
::valueps e를 사용해야 합니다. 우도 - classinsteadlikeso:

input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em}

그러나 Firefox는 이 구문을 지원하지 않습니다.

브라우저는 이 사이드바를 배치할 위치를 결정할 수 있습니다(약간의 CSS 코드를 사용하여).
Figure
Figure 요소는 블록 수준의 이미지를 나타내며 설명을 포함할 수도 있습니다. 예를 들어, 많은 DeveloperWorks 기사에서 이러한 마크업을 사용하여 HTML4로 작성된 코드 5 개발자Works 다이어그램을 볼 수 있습니다. 결과는 그림 1에 나와 있습니다.
그림 2.MozillaXForms 설치 대화상자

MozillaXForms0.7Unsigned"
src="installdialog.jpg" border="0"height ="317"hspace="5"vspace="5"width="331"/>



그림 1.MozillaXForms 설치 대화상자

HTML5에서 이 다이어그램은 보다 의미론적인 방식으로 작성될 수 있습니다. HTML5로 작성된 코드 6 DeveloperWorks 다이어그램을 참조하세요.

그림 2.MozillaXForms 설치 대화상자

MozillaXForms0.7Unsigned"
src="installdialog.jpg" border="0"height="317 "hspace="5"vspace="5"width="331"/>


가장 중요한 점은 브라우저(특히 스크린 리더)가 그림과 설명을 명확하게 연결할 수 있다는 것입니다.
그림 요소는 그림만 표시할 수 있는 것이 아닙니다. 또한 이를 사용하여 오디오, 비디오, iframe, 개체 및 삽입 요소에 설명을 추가할 수도 있습니다.
dialog
대화 상자 요소는 여러 사람 간의 대화를 나타냅니다. HTML5dt 요소는 화자를 나타낼 수 있고, HTML5dd 요소는 음성 내용을 나타낼 수 있습니다. 따라서 대화는 이전 브라우저에서도 합리적인 방식으로 표시될 수 있습니다. 코드 7은 갈릴레오의 "두 가지 주요 세계 시스템에 관한 대화"의 유명한 대화를 보여줍니다.
코드 7. HTML5로 작성된 갈릴리 대화

Simplicius

직선AF에 따르면
곡선에 따르면
이미 제외되었습니다

사그레도

하지만
직선 A가 비스듬하게 진행된다는 점을 감안하면
직선은
CD에 수직으로 그려야 합니다. 왜냐하면 이
가장 짧은 것처럼 보일 뿐만 아니라
한 지점에서 다른 모든 지점까지 그려질 수 있는 더 길고 동일하지 않은

무한한 수의
반대편

라인CD.

살비아티

차원을 정의했습니다. ,길이와 너비.


그러나 높이를 결정해야 한다고 가정해 보겠습니다. 예를 들어

아래의 포장 도로에서
이 플랫폼의 높이는

플랫폼의 어느 지점에서나
포장 도로의 무한한 지점까지
유한한 선을 그릴 수 있습니다.
아래 중 어떤 줄을 활용하시겠습니까?

이 요소의 정확한 구문에 대한 논쟁이 있습니다. 어떤 사람들은 대화 상자 요소 내에 대화 상자가 아닌 텍스트(예: 스크립트의 단계 방향)를 포함하기를 원하고 다른 사람들은 dt 및 dd 요소의 역할을 확장하는 것을 좋아하지 않습니다. 특정 구문에 대해서는 논쟁이 있지만 대부분의 사람들은 이러한 의미론적 방식으로 대화를 표현하는 것이 좋다는 데 동의합니다.

　
　(계속)