<aside> 태그 사용의 혼란

Question

나는 <aside> 태그에 대해 읽었으며 http://www.w3schools.com/tags/tag_aside.asp이지만이 태그의 실제 동기를 이해할 수 없습니다.

이 태그의 콘텐츠와 외부 콘텐츠의 차이점은 무엇입니까?

콘텐츠가 관련되어 있지만이 태그를 둘러싼 콘텐츠와 다른 경우 즉, div을 사용할 수 있습니다. 다른 태그와 비교하여이 태그의 특수성은 무엇입니까? 그것은 SEO에 도움이됩니까?

Answer 1

HTML5에서 body의 모든 내용은 부분의 일부입니다. 모든 섹션에는 header 및 footer이있을 수 있습니다. 모든 은이 아니며 header/footer에 해당 섹션의 주요 내용으로 간주 될 수 있습니다. aside element은 "페이지의 주요 내용과 별개로 간주되는 내용"으로 사용될 수 있습니다.

당신이 div 대신 aside를 사용하려는 경우는, 그 내용은 그 article의 다른 "진짜"의 주요 내용과 분리 할 수 ​​없습니다

<article> 
    <h1>Cute cat</h1> 
    <p>I like cats.</p> 
    <div class="aside"> 
    <!-- and now for something completely different --> 
    </div> 
    <p>Next time, I get a dog.</p> 
</article> 

당신은 HTML5의 단면 요소를 사용하지 않을 경우

<article> 
    <h1>Cute cat</h1> 
    <p>I like cats.</p> 
    <div class="aside"> 
    <h2>Good cat litter boxes</h2> 
    <!-- and now for something completely different --> 
    </div> 
    <p>Next time, I get a dog.</p> 
</article> 

문제 : 콘텐츠에 대한 유일한 대안은 명시적인 제목을 사용하는 것입니다 (이것은 우리가 HTML 4.01에서해야 할 것 인 것이다) 마지막 p는 012,356의 범위에있을 것입니다(새로운 암시 적 섹션을 시작 함). 그러나이 p은 고양이 쓰레기통 광고에 관한 것이 아니며, div 이전의 내용 일부입니다.

솔루션 :

귀여운 고양이 나 고양이처럼
:

<article> 
    <h1>Cute cat</h1> 
    <p>I like cats.</p> 
    <aside> 
    <h2>Good cat litter boxes</h2> 
    <!-- and now for something completely different --> 
    </aside> 
    <p>Next time, I get a dog.</p> 
</article> 

지금은 그 article의 주요 내용이다 분명하다.
다음에는 개가 있습니다. 모두가 고양이에 대해, 그리고 당신은 단지 그 article에서 고양이에 대한이 고양이 쓰레기 상자 광고 당신 때문에 글을 게시 :

그리고 aside은 부모 섹션에 접선 방향으로 관련이있다.

사용자 에이전트는이 정보를 사용하여 모든 종류의 작업을 수행 할 수 있습니다. 검색 엔진은 해당 콘텐츠의 관련성을 낮출 수 있습니다 (서비스가 다른 질문이고 SO에 관한 주제와 관련이없는 경우). 브라우저는이를 사이드 바로 표시하고 추출기는 무시할 수 있으며 화면 판독기는 주 화면을 읽을 때 건너 뛸 수 있습니다 콘텐츠 등