Помощник
 |
|
|
|
|
Сообщение сайта
|
 Правильная схема из section и article |
NiceForce
|
Сообщение
#1
|
||
|
Новичок  Группа: Viewer Сообщений: 5 Регистрация: 31.10.2010 Поблагодарили: 1 раз Репутация:  0 
 |
|
||
 |
|
||
|
.Pothead.
|
 4.12.2012, 11:22;
Ответить: .Pothead.
Сообщение
#2
|
|
 0 Группа: User Сообщений: 10 Регистрация: 28.10.2012 Поблагодарили: 0 раз Репутация: 0
|
1. Смело можете использовать img внутри article.
2. Ваш вопрос заставил меня провести микроисcледование этого вопроса.. Начну с того, что мне стало интересно, какая вложенность хтмл5 элементов все-таки правильная. Валидный-то он будет, но вот как правильнее с точки зрения семантики? Задался этим вопросом со старта т.к. w3 вот какой пример приводят, описывая тег section: In the following example, we see an article (part of a larger Web page) about apples, containing two short sections. (в данном примере мы видим статью (часть большей веб страницы) о яблоках, содержащую две короткие секции) <article> <hgroup> <h1>Яблоки</h1> <h2>Вкусный фрукт!</h2> </hgroup> <p>Яблоко - зрелый плод яблочного дерева.</p> <section> <h1>Красные Великолепные</h1> <p>Эти яркие вкусные яблоки - самые распространенные и могут быть куплены в каждом супермаркете.</p> </section> <section> <h1>Антоновка</h1> <p>Этот сочный сорт яблок часто используют для приготовления яблочных пирогов.</p> </section> </article> а сразу после, наткнулся на несколько обратных примеров: http://noteskeeper.ru/54/ <section> <h2>Свежие статьи</h2> <article> <h2>Заголовок статьи 1</h2> <p>Текст статьи</p> </article> <article> <h2>Заголовок статьи 2</h2> <p>Текст статьи</p> <aside>Дополнительная информация, относящаяся к статье 2</aside> </article> </section> + на этомже сайте еще пару подобных примеров увидел, к примеру http://noteskeeper.ru/370/ Прихожу в замешательство.. Возвращаюсь на dev.w3.org нахожу еще пример интересный: (по сути это книга) <article class="book"> <header> <hgroup> <h1>Моя книга</h1> <h2>Семпл с небольшим кол-вом контента</h2> </hgroup> <p><small>Издано Dummy Publicorp Ltd.</small></p> </header> <section class="chapter"> <h1>Первая глава</h1> <p>Это первая глава. Больше сказать нечего.</p> <p>Но в ней два параграфа!</p> </section> <section class="chapter"> <h1>Идем далее: Вторая Глава</h1> <p>Bla dee bla, dee bla dee bla. Boom.</p> </section> <section class="chapter"> <h1>Третья глава: Пример</h1> <p>It's not like a battle between brightness and earthtones would go unnoticed.</p> <p>But it might ruin my story.</p> </section> <section class="appendix"> <h1>Appendix A: Обобщ. Примеры</h1> <p>Это демонстрация.</p> </section> <section class="appendix"> <h1>Appendix B: Некоторые заключения</h1> <p>Вобщем этот длинный пример показывает что вы <em>можете</em> стилизовать секции.</p> </section> </article> Получается вот значит у нас в руках книга с обложкой (article) и в ней значит есть главы (section). Ну сначала я окончательно запутался. Подумав, предположил, что на хтмл странице может ведь быть несколько книг.. как и новостей в нашем случае (в эту сторону я мыслить начал, т.к. пытался найти решение в котором оба ресурсы несут верный посыл). W3 уж точно врать не будет, но и с другим вариантом сталкивался неоднократно.. Рискну предположить что возможна подобного рода вложенность тегов (думая о веб странице целиком): <section> - раздел с новостями <article> - одна новость <section> - контент внутри новости .............. </section> </article> </section> Двигаюсь далее.. Смотрим примеры w3 приведенные в описании тега article: Это пример поста в блоге. <article> <header> <h1>The Very First Rule of Life</h1> <p><time datetime="2009-10-09">3 days ago</time></p> </header> <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p> <p>...</p> <footer> <a href="?comments=1">Show comments...</a> </footer> </article> Тот же пример, только с комментариями: <article> <header> <h1>The Very First Rule of Life</h1> <p><time datetime="2009-10-09">3 days ago</time></p> </header> <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p> <p>...</p> <section> <h1>Comments</h1> <article id="c1"> <footer> <p>Posted by: George Washington</p> <p><time datetime="2009-10-10">15 minutes ago</time></p> </footer> <p>Yeah! Especially when talking about your lobbyist friends!</p> </article> <article id="c2"> <footer> <p>Posted by: George Hammond</p> <p><time datetime="2009-10-10">5 minutes ago</time></p> </footer> <p>Hey, you have the same first name as me.</p> </article> </section> </article> ага.. вкладываем артикл в секшн, который вложен в артикл. Ну по идее это подтверждает мои мысли и я делаю вывод что article внутри section быть. Ну раз уж на то пошло - в нашем случае применение секшн внутри артикл бессмысленно (обращая внимание на первую часть последнего примера) Ну осмелюсь предположить что код может быть примерно таким: ... <section> // это блок с новостями <h1>Новости:</h1> <article> // сама новость <header> <h1>Заголовок</h1> <span>Оригинальное название</span> <span>Год выхода</span> </header> <img .....> // постер <p>текст статьи</p> <footer> счетчик просмотров / комментариев </footer> </article> <article> // пошла вторая новость <header> <h1>Заголовок</h1> <span>Оригинальное название</span> <span>Год выхода</span> </header> <img .....> // постер <p>текст статьи</p> <footer> счетчик просмотров / комментариев </footer> </article> ..... </section> ... Ну вот как-то так. Ну или вообще вместо section здесь использовать div дабы не дуреть )) Чем пользовался: http://dev.w3.org/html5/spec/single-page.html + страницы стороннего ресурса, ссылки на которые есть в тексте. На последнюю мысль о диве навела часть вот этой (http://web-standards.ru/articles/avoiding-html5-mistakes/) статьи, в которой говорится о неправильности использования тега section как обертки для оформления. Переводил текст с примеров w3 сам, так что не гарантирую 100% идентичность смысла) Всё вышеописанное - сугубо мои рассуждения по сабжу, они могут быть как верными, так и нет.. )) Надеюсь что хоть как-то помог))
|
|
|
|
|
|
|
|
Похожие темы
| Тема | Ответов | Автор | Просмотров | Последний ответ | |
|---|---|---|---|---|---|
 |
Правильная внутренняя оптимизация сайтов (SEO - Seach Engines Optimization) Работу делаем качественно и с любовью + Скидки |
0 | ITstaf | 991 | 20.7.2022, 10:17 автор: ITstaf |
|
Схема: 4000 ЖИВЫХ платежеспособных подписчиков в Telegram за 6 часов *** | 7 | almiranis | 5391 | 13.7.2019, 18:39 автор: -almiranis- |
|
Легкая схема заработка на хомячках и ньюфагах | 3 | Blizor01ter | 2561 | 25.4.2019, 0:10 автор: -Meronym- |
|
Нужна инфорграфика/схема работы для презентации |
1 | tube | 2505 | 2.4.2017, 9:51 автор: shredinger |
|
Серая схема с ярким профитом | 0 | GrizzLey | 1782 | 26.10.2016, 17:20 автор: -GrizzLey- |
|
Текстовая версия | Сейчас: 23.4.2024, 9:30 |
