2016-12-26 2 views
1

<header> 내부 <figure>를 넣어 의미 정확한<article>에서 의미가있는 <figure>을 넣을 수 있습니까? <header>?

<article> 
    <header> 
     <h1>Article title</h1> 
     <p>Article kicker</p> 
     <figure> 
      <img class="featured-image" src="http://article.com/featured/image.jpg"> 
     </figure> 
    </header> 
    <div class="content"> 
     <p>Bla bla</p> 
     <p>Bla bla</p> 
    </div> 
    <footer> 
     <p>About author</p> 
    </footer> 
</article> 

인가,의 내가이 있다고 가정 해 봅시다?

사양, 즉 독립적이며, 임의로 캡션, 콘텐츠

단위 전형적 문서의 주 흐름에서 하나의 단위로 참조 을 같은 <figure> 정의

그것은 그 만들 것 <header> 내부에 넣을 경우

<figure><article>의 머리에 속한다는 대신 <article> 자체에 속하는? 주위를 둘러 보았지만 대답을 찾지 못했습니다.

+1

img에 alt 속성이 없으므로 세부 묘사가 부족합니다. – BoltClock

+0

@BoltClock 흥미 ​​롭습니다. 그렇다고해서 이미지와 알맹이가 모두 바뀌지는 않습니다. – deathlock

+1

아니, 당신은 여전히 ​​둘 다 가질 수 있습니다 - altca 텍스트는 이미지를 사용할 수없는 경우 대체 텍스트로 사용하는 동안 figcaption은 이미지에 대한 설명을 제공합니다. 같은 텍스트 일 ​​수도 있고, 대체 텍스트를 어떻게 반영 시킬지에 따라 다를 수도 있습니다. 다음 예를 참조하십시오. https://www.w3.org/TR/html5/embedded-content-0.html#images-that-include-text – BoltClock

답변

1

그림은 여전히 ​​기사의 일부입니다. 당신의 인물이 실제로 기사 머리글의 일부분이고 기사의 주요 내용이 아니라면 기사 머리글에있을 것입니다.

섹션 나누기와 관련하여 묻는다면, <header><footer>은 섹션 요소가 아니므로 그림은 여전히 ​​기사 개요에 포함됩니다. 같은 개요에

<article> 
    <!-- header --> 
     <h1>Article title</h1> 
     <p>Article kicker</p> 
     <figure> 
      <img class="featured-image" src="http://article.com/featured/image.jpg"> 
     </figure> 
    <!-- /header --> 
    <div class="content"> 
     <p>Bla bla</p> 
     <p>Bla bla</p> 
    </div> 
    <!-- footer --> 
     <p>About author</p> 
    <!-- /footer --> 
</article> 

결과 : 즉 제거하거나 <header><footer> 태그를 주석이다.

+0

설명해 주셔서 감사합니다. 추천 이미지는 기사 콘텐츠보다 헤더에 있어야한다고 생각하십니까? – deathlock

+0

@deathlock : 오른쪽에 대한 소리. 그래도 그림 요소에서 추천 이미지를 본 적이 있는지 모르겠습니다. 그러나 그것은 당신에게 달려 있습니다. – BoltClock

+0

왜 그렇습니까? 추천 이미지가 사라지지 않아야하나요? – deathlock

관련 문제