집 > 기사 > 웹 프론트엔드 > HTML5의 일반적인 잘못된 사용법 3가지에 주의하세요.

HTML5의 일반적인 잘못된 사용법 3가지에 주의하세요.

php中世界最好的语言원래의: 2018-01-29 09:41:431862검색

이번에는 주의해야 할 HTML5의 일반적인 잘못된 사용법 세 가지를 알려드리겠습니다. 주의해야 할 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

사람들이 태그를 사용할 때 저지르는 가장 일반적인 실수 중 하나는 HTML5의 2f8332c8dcfd5c7dec030a070bf652c3을 dc6dce4a544fdca2df29d5ac0ea9906b와 임의로 동일시하는 것입니다. 즉, 태그를 직접 대체(스타일 지정)하는 것입니다. XHTML이나 HTML4에서는 다음과 같은 코드를 자주 볼 수 있습니다.

<!-- HTML 4-style code --><div id="wrapper">
    <div id="header">
        <h1>My super duper page</h1>
        Header content  </div>
    <div id="main">
        Page content    </div>
    <div id="secondary">
        Secondary content   </div>
    <div id="footer">
        Footer content  </div></div>

이제 HTML5에서는 다음과 같습니다.

이 코드를 복사하지 마세요! 이건 틀렸어!

<section id="wrapper">
    <header>
        <h1>My super duper page</h1>
        <!-- Header content -->
    </header>
    <section id="main">
        <!-- Page content -->
    </section>
    <section id="secondary">
        <!-- Secondary content -->
    </section>
    <footer>
        <!-- Footer content -->
    </footer></section>

사용법이 잘못되었습니다. **

는 스타일 컨테이너가 아닙니다. **section 요소는 문서 요약을 작성하는 데 사용되는 콘텐츠의 의미 부분을 나타냅니다. 헤더를 포함해야 합니다. 페이지 컨테이너 역할을 하는 요소(예: HTML 또는 XHTML 스타일)를 찾고 있다면 Kroc Camen이 제안한 대로 본문 요소에 직접 스타일을 작성하는 것이 좋습니다. 여전히 추가 스타일 컨테이너가 필요한 경우 div를 사용하세요.

위의 아이디어를 바탕으로 다음은 HTML5 및 일부 ARIA 역할 기능의 올바른 사용 예입니다(자신의 디자인에 따라 div를 추가해야 할 수도 있음)

<section id="wrapper">
    <header>
        <h1>My super duper page</h1>
        <!-- Header content -->
    </header>
    <section id="main">
        <!-- Page content -->
    </section>
    <section id="secondary">
        <!-- Secondary content -->
    </section>
    <footer>
        <!-- Footer content -->
    </footer></section>

이 사용은 올바르지 않습니다. : **

은 스타일 컨테이너가 아닙니다. **section 요소는 문서 요약을 작성하는 데 사용되는 콘텐츠의 의미 부분을 나타냅니다. 헤더를 포함해야 합니다. 페이지 컨테이너 역할을 하는 요소(예: HTML 또는 XHTML 스타일)를 찾고 있다면 Kroc Camen이 제안한 대로 본문 요소에 직접 스타일을 작성하는 것이 좋습니다. 여전히 추가 스타일 컨테이너가 필요한 경우 div를 사용하세요.

위의 아이디어를 바탕으로 다음은 HTML5 및 일부 ARIA 역할 기능의 올바른 사용 예입니다(자신의 디자인에 따라 div를 추가해야 할 수도 있음)

<body><header>
    <h1>My super duper page</h1>
    <!-- Header content --></header><div role="main">
    <!-- Page content --></div><aside role="complementary">
    <!-- Secondary content --></aside><footer>
    <!-- Footer content --></footer></body>

2. 다음 경우에만 사용하세요. 필요 헤더와 hgroup

에 작성할 필요가 없는 태그를 작성하는 것은 물론 의미가 없습니다. 안타깝게도 헤더와 hgroup이 아무 목적 없이 오용되는 경우를 자주 봅니다. 자세한 이해를 위해 헤더 및 hgroup 요소에 대한 두 기사를 읽어보면 다음과 같이 내용을 간략하게 요약할 수 있습니다.

header 요소는 소개 또는 navigation 보조 텍스트 집합을 나타내며 헤더

헤더는 하위 헤더, 자막, 다양한 로고 등과 같은 여러 레이어의 구조를 가지고 있습니다. hgroup을 사용하여 h1-h6 요소를 섹션 헤더로 결합합니다

헤더 남용

으로 인해 헤더가 여러 번 사용될 수 있습니다. 문서에서 이 코딩 스타일을 인기 있게 만들 수 있습니다.

请不要复制这段代码！此处并不需要header –>
<header>
    <h1>My best blog post</h1>
</header>
<!-- Article content --></article>

헤더 요소에 헤더 요소가 하나만 포함된 경우 헤더 요소를 삭제하세요. 기사 요소는 이미 헤더가 문서 요약에 표시되도록 보장하고 헤더는 위에서 정의한 대로 여러 요소를 포함할 수 없으므로 중복 코드를 작성하는 이유는 무엇입니까? 간단히 다음과 같이 작성하세요.

<article>
    <h1>My best blog post</h1>
    <!-- Article content --></article>

의 잘못된 사용 헤더 주제에 있어서 hgroup의 잘못된 사용을 자주 봅니다. 때로는 hgroup과 헤더를 동시에 사용하면 안 됩니다.

하위 헤더가 하나만 있는 경우

hgroup만 사용해도 괜찮습니다. . . 말도 안되는 소리 아닌가요? 첫 번째 질문은 일반적으로 다음과 같습니다.

请不要复制这段代码!此处不需要hgroup –>
    <hgroup>
        <h1>My best blog post</h1>
    </hgroup>
    <p>by Rich Clark</p></header>

이 예에서는 hgroup을 제거하고 제목이 원활하게 실행되도록 하세요.

<header>
    <h1>My best blog post</h1>
    <p>by Rich Clark</p></header>

두 번째 질문은 또 다른 불필요한 예입니다.

请不要复制这段代码!此处不需要header –>
<hgroup>
    <h1>My company</h1>
    <h2>Established 1893</h2>
</hgroup></header>

헤더의 유일한 하위 요소가 hgroup이라면 헤더는 무엇이 필요합니까? 헤더에 다른 요소(예: 여러 hgroup)가 없는 경우 헤더를 직접 제거하면 됩니다.

<hgroup>
    <h1>My company</h1>
    <h2>Established 1893</h2></hgroup>

3. 탐색에 모든 목록 스타일 링크를 넣지 마세요

HTML5에 30개의 새로운 요소가 도입되면서(원래 게시 당시)

의미론적

및 구조화된 태그를 구성할 때 우리가 선택할 수 있는 것도 있습니다. 조금 부주의해졌습니다. 즉, 우리는 초의미론적 요소를 남용해서는 안 됩니다. 불행히도 nav는 그러한 남용의 예입니다. nav 요소의 사양은 다음과 같이 설명됩니다. nav 요소는 탐색 연결을 포함하는 다른 페이지 또는 이 페이지의 다른 부분으로 연결되는 페이지의 블록을 나타냅니다.
참고: 페이지의 모든 링크를 nav 요소에 배치할 필요는 없습니다. 이 요소는 기본 탐색 블록으로 사용됩니다. 구체적인 예를 들자면, 바닥글에는 서비스 약관, 홈페이지, 저작권 안내 페이지 등 많은 링크가 있는 경우가 많습니다. 이러한 상황을 처리하는 데는 바닥글 요소만으로도 충분하지만 여기서는 nav 요소를 사용할 수도 있지만 일반적으로 불필요하다고 생각합니다.

핵심 단어는 '메인' 탐색입니다. 물론 우리는 "기본"이 무엇을 의미하는지 서로에게 하루 종일 이야기할 수도 있습니다. 그리고 저는 개인적으로 이렇게 정의합니다:

메인 네비게이션

사이트 검색

보조 네비게이션(약간의 논란의 여지가 있음)

인페이지 네비게이션(아주 긴 글 등)

절대적인 옳고 그름은 없기 때문에 따라서 비공식 여론조사와 저만의 설명에 따르면, 다음과 같은 상황에서는 놔두든 안 놔두든 어차피 중간에 넣지 않겠습니다:

페이지 매김제어

소셜 링크(일부 소셜 링크는 "정보" 및 "즐겨찾기"와 같은 기본 탐색이기도 함)

블로그 게시물 태그

블로그 게시물 카테고리

3단계 탐색

바닥글이 너무 깁니다

네비게이션에 일련의 링크를 넣을지 확실하지 않은 경우 "메인 내비게이션인가요?"라고 자문해 보세요. 이 질문에 답하려면 다음 첫 번째 원칙을 고려하세요.

섹션을 사용하는 경우 그리고 hx도 적절합니다. 그러면 nav를 사용하지 마세요 — Hixie on IRC

쉽게 액세스할 수 있도록 "빠른 점프"에서 이 nav 태그에 대한 링크를 추가하시겠습니까?

이 질문에 대한 대답이 "아니오"라면, 그냥 절하고 혼자 가세요.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트Other 관련 기사를 주목하세요!