HTML5의 구조 및 의미 : 시맨틱 블록 수준 요소

저자：Eve Cole 업데이트 시간：2025-05-04 17:48:02

댓글 : HTML5는 또한 순수한 의미 론적 블록 수준 요소를 추가합니다. 그림 대화를 제외하고 내 기사와 책에서 처음 두 요소를 사용하고 있습니다. 내가 자주 사용하지 않는 세 번째 요소는 주로 서면 텍스트로 사용됩니다. 제쳐두고 요소는 설명, 프롬프트, 사이드 바, 따옴표, 추가 주석 등을 나타냅니다. 즉, 이야기의 주요 줄 외부의 내용. 예를 들어, 개발자에서

HTML5는 또한 순전히 시맨틱 블록 수준 요소를 추가합니다.

그림을 제외하고

나는 내 기사와 책에서 처음 두 요소를 사용하고 있습니다. 내가 자주 사용하지 않는 세 번째 요소는 주로 서면 텍스트로 사용됩니다.

곁에

따로 요소는 설명, 프롬프트, 사이드 바, 따옴표, 추가 주석 등을 나타냅니다. 예를 들어, DeveloperWorks 기사에서는 종종 테이블 형식으로 작성된 사이드 바가 표시됩니다. 코드 3, DeveloperWorks 사이드 바는 HTML4로 작성되었습니다.

<td>

<p> <aname = xf-value> <spanclass = smalltitle> .xf-value </span> </a> </p>

<p>

<codeType = inline> .xf-value </code> selectorIdHerestyLestHeInput

FieldValueButnotitsLabel

withecurrentcss3draft.theexplereally with with with the

<codeType = inline> :: value </code> pseudo classinsteadlikeso :

</p>

<preclass = displaycode> 입력 :: 값 {width : 20em;}

#ccnumber :: value {너비 : 18EM}

#zip :: value {너비 : 12em}

#state :: value {너비 : 3em} </pre>

</td> </tr> </tbody> </table> <br>

<p>

그러나 Firefox에는 Tyetsupport This Syntax가 없습니다.

</p>

</td> </tr> </table>

HTML5에서는이 사이드 바를보다 의미있는 방식으로 작성할 수 있습니다 (HTML5로 작성된 Code 4 DeveloperWorks 사이드 바 참조.

<따로>

<h3> .xf-value </h3>

<p>

<codeType = inline> .xf-value </code> selectorIdHerestyLestHeInput

FieldValueButnotitsLabel

withecurrentcss3draft.theexplereally with with with the

<codeType = inline> :: value </code> pseudo classinsteadlikeso :

</p>

<preclass = displaycode> 입력 :: 값 {width : 20em;}

#ccnumber :: value {너비 : 18EM}

#zip :: value {너비 : 12em}

#state :: value {너비 : 3em} </pre>

<p>

그러나 Firefox에는 Tyetsupport This Syntax가 없습니다.

</p>

</제쳐두고>

브라우저는이 사이드 바를 어디에 넣을 위치를 결정할 수 있습니다 (작은 CSS 코드가 필요할 수 있음).

수치

그림 요소는 블록 레벨 이미지를 나타내며 설명을 포함 할 수도 있습니다. 예를 들어, 많은 DeveloperWorks 기사에서 HTML4에 작성된 DeveloMERWORKS 다이어그램의 코드 5 라벨링 결과가 그림 1에 나와 있음을 알 수 있습니다.

<name = fig2> <b> 그림2.installmozillaxformsDialog </b> </a> <br/>

<imgalt = awebsiteIsRequestingPermissionToInstallTheFollowingItem :

Mozillaxforms0.7 Unsigned

src = installdialog.jpgborder = 0height = 317hspace = 5vspace = 5width = 331/>

<br/>

그림 1. 설치 mozillaxformsDialog

HTML5에서는이 다이어그램을보다 의미적인 방식으로 작성할 수 있습니다 (HTML5로 작성된 코드 6 DeveloperWorks 다이어그램을 참조하십시오.

<Legend> figure2.installmozillaxformsDialog </legend>

<imgalt = awebsiteIsRequestingPermissionToInstallTheFollowingItem :

Mozillaxforms0.7 Unsigned

src = installdialog.jpgborder = 0height = 317hspace = 5vspace = 5width = 331/>

</그림>

가장 중요한 것은 브라우저 (특히 스크린 리더)가 이미지와 설명을 명확하게 연관시킬 수 있다는 것입니다.

그림 요소는 이미지를 표시 할 수 없습니다. 또한 오디오, 비디오, iframe, 객체 및 임베드 요소를 지정하는 데 사용할 수도 있습니다.

대화

대화 상자 요소는 여러 사람 간의 대화를 나타냅니다. html5dt 요소는 스피커를 나타낼 수 있고, html5dd 요소는 음성 내용을 나타낼 수 있습니다. 따라서 대화는 오래된 브라우저에서 합리적인 방식으로 표시 될 수 있습니다. 코드 7은 갈릴레오의 대화에 관한 유명한 대화를 보여줍니다.

코드 7. Galilean 대화는 HTML5로 작성되었습니다

<대화>

<dt> simplicius </dt>

<dd> theStrightlineaf에 따르면

그리고 곡선에 따르면, 그러한 곡선 준비가 포함되어 있지 않습니다

Forsuchause. </dd>

<dt> sagredo </dt>

<dd> butishouldtakeneitherofthem,

Thestraightlineacliquely

DrawLinePendicular Tocd, Forthis는 Tome처럼 보일 것입니다

Tobetheshortest, Aswellasbeinguniqueamongthe

어쩌면 infinitenumberoflongerandunequalones

반대의 지점에서 그려진 지점에서 그려진

linecd. </dd>

<dt> salviati </dt>

<dd> <p> yourchoice와 you you

adduceforitseemtomemecellent.sonowwehaveit

첫 번째 차원은 astraightline에 의해 결정됩니다.

이것들 (즉, 폭) byanotherstraightline 및

TONELYSTRAIGHT, BUTATANGLESTOTHAT

결정 theLength.thuswehave 정의 thetwo

표면의 치수; Thatis, Lengthandbreadth. </p>

<p> 부서 지하 히로 adtodeMineaHeight

예를 들어, Howhigh thisplatformisfromthePavementDown

아래에서

MayDrawInfinitelines, CurvedorStraight 및 Allof

포장 도로에 대해 무한 지점까지 다른 길이

아래에서는 어느 쪽이 끊어 질 것인가? </p>

</dd>

</대화>

이 요소의 정확한 구문에 대해서는 여전히 논란이 있습니다. 어떤 사람들은 대화 요소 (예 : 스크립트의 단계 설명과 같은)에 비 다이얼 리그 텍스트를 포함시키고 싶어하며, 다른 사람들은 DT 및 DD 요소를 확장하는 역할을 좋아하지 않습니다. 특정 문법에 대한 논쟁에도 불구하고, 대부분의 사람들은 그러한 의미 론적 방식으로 대화를 표현하는 것이 좋은 일이라고 생각합니다.

(계속하려면)