***** 1 - Блог Стефанова М.А.
advertisement
Sectioning tags <body> Содержит контент страницы В документе может быть только 1 такой тэг Document sections <article> <section> <nav> <aside> <h1>,<h2>,…<h6> <header> <footer> <address> <hgroup> <article> Представляет законченную (самостоятельную) структуру в документе, страничке, приложении Может храниться на сервере отдельно Может быть использована повторно Содержит тэги sectioning и flow content-а (почти все тэги, которые могут содержаться в <body>) Вложенный тэг <article> должен быть релевантным по отношению к внешнему тэгу Не может содержать тэг <main> <section> Представляет обобщенную (generic) часть документа или приложения. Используется для группировки элементов определенной тематики (для семантического разделения документа на тематические секции) Содержит тэги flow content-а Тема идентифицируется заголовками (вложенные тэги <h1>…<h6>) Часто несколько тэгов <section> «объединяются» тэгом <article> Если нужно управлять отображением части документа – используйте <div> а не <section> <nav> Представляет часть страницы (документа), содержащую ссылки на другие страницы (документы) или на другие части внутри страницы (документа) Содержит тэги flow content-а (но не <main>) Не все ссылки описываются этим элементом. Как правило только основные блоки навигации (меню) <aside> Представляет часть страницы, содержащей контент, косвенно связанный с внешним контентом, но обрабатываемый отдельно от него. Содержит тэги flow content-а (но не <main>) Применение – врезки, сноски, пояснения. Не путать с текстом в скобках (он является частью main flow content-а) <aside> <article> <p> The Disney movie <em>The Little Mermaid</em> was first released to theatres in 1989. </p> <aside> The movie earned $87 million during its initial release. </aside> <p> More info about the movie... </p> </article> <aside> <article> <h1>News from Switzerland</h1> <aside> <h1>Switzerland</h1> <p>Switzerland, a land-locked country in the middle of geographic Europe, has not joined the geopolitical European Union, though it is a signatory to a number of European treaties.</p> </aside> </article> <h1>…<h6> Определяют заголовки частей документа Уровни заголовков ранжируются от 1 до 6. <h1> - наивысший ранг <h6> - низший ранг В одной секции может быть несколько заголовков одного уровня Заголовок такого-же или более высокого ранга начинает новую секцию. Заголовок меньшего ранга стартует новую подсекцию Могут содержать элементы, относящиеся к phrasing content-у Уровень заголовка подбирайте исходя из семантики разметки Не лучший пример разметки HTML5 <h1>Блог Стефанова М.А.</h1> <h2>Пересдачи</h2> <p>Информация о пересдачах...</p> <h2>Добавлены ЛР по некоторым предметам</h2> <h3>Предмет 1</h3> <p>Информация о добавленных лабах...</p> <h3>Предмет 2</h3> <p>Информация о добавленных лабах...</p> <h2>Проверьте гугл док с успеваимостью</h2> <p>Информация о том, почему его нужно проверить...</p> Как правильно <main> <h1>Блог Стефанова М.А.</h1> <nav> <section> <h2>Пересдачи</h2> <p>Информация о пересдачах...</p> <a href=“...”>Ссылка на полный текст</a> </section> <section> <h2>Добавлены ЛР по некоторым предметам</h2> <nav> <section> <h3>Предмет 1</h3> <p>Информация о добавленных лабах...</p> <a href=“...”>Ссылка на страницу предмета</a> </section> <section> <h3>Предмет 2</h3> <p>Информация о добавленных лабах...</p> <a href=“...”>Ссылка на страницу предмета</a> </section> </nav> </section> </nav> </main> В свою очередь, запись о пересдачах: <article> <h1>Информация о пересдачах</h1> <section> <h2>ПО-21</h2> <p>Сдавать лабы за прошлый семестр можно во время пары</p> <aside> <p>Поскольку лабы за этот семестр вы все равно не сдаете, то я хотя бы не просто так на паре сидеть буду</p> </aside> </section> <section> <h2>ТП-21</h2> <p>Сдавать лабы за прошлый семестр можно во время пары ПО-22</p> <aside> <p>ПО-22 все равно на парах не появляются, так что все ок</p> </aside> </section> </article> <header> Представляет краткое описание (intro) части (секции) документа. Этот тэг НЕ определяет часть документа, задается внутри sectioning тэгов и может содержать тэги flow content-а (но не <main>, <header> и <footer>) Как правило содержит заголовки (h1…h6) внешней секции и такие элементы как логотип, форма поиска и т.д. <header> <h1>Мольберт Краскин</h1> <p>Дизайнер «от бога»</p> <img href=“logo.png”/> </header> <header> <body> <header> <h1>Little Green Guys With Guns</h1> <nav> <ul> <li><a href="/games">Games</a> <li><a href="/forum">Forum</a> <li><a href="/download">Download</a> </ul> </nav> <h2>Important News</h2> <p>To play today's games you will need to update your client.</p> <h2>Games</h2> </header> <p>You have three active games:</p> ... <footer> Представляет дополнительную информацию по части (секции) документа. Этот тэг НЕ определяет часть документа, задается внутри sectioning тэгов и может содержать тэги flow content-а (но не <main>, <header> и <footer>) <footer> Как правило содержит информацию о секции: Автор Ссылки на похожие / связанные документы Copyright … Если элемент содержит другие секции, то они представляют: Приложение Библиографию Указатели (индексы на след или предыдущую страницу) Выходные данные Подробные лицензионные соглашения … <header> ... <footer> <nav> <section> <h1>Статьи</h1> <p><img src="images/responsiveDesign.jpeg" alt="”>.Узнайте как создать адаптивный дизайн сайта. Первая часть статьи посвящена резиновой верстке, вторая – медиа запросам. <a href="articles/responsiveDesign/1">Part1</a>· <a href="articles/responsiveDesign/2">Part 2</a></p> </section> <ul> <li> <a href="/about”>Обо мне...</a> <li> <a href="/feedback">Обратная связь</a> <li> <a href="/sitemap”>Карта сайта</a> </ul> </nav> <p><small>Copyright © 2015 Мольберт Краскин</small></p> </footer> </body> <address> Представляет только контактные данные для ближайшего корневого тега <body> или <article> Если ближайший корневой тэг - <body>, контактная информация относится ко всему документу Обычно записывается внутри тега <footer> вместе с другой инфой <footer> <address> Если Вам интересно сотрудничество, пишите <a href=mailto:godsPower@supadesign.com>Мольберт Краскин</a>. </address> <p><small>Copyright © 2015 Supa Design Group</small></p> </footer> Еще примеры body <!DOCTYPE HTML> <html> <head> <title>Steve Hill's Home Page</title> </head> <body> <p>Hard Trance is My Life.</p> </body> </html> article <article> <img src="/tumblr_masqy2s5yn1rzfqbpo1_500.jpg" alt="Yellow smiley face with the caption 'masif'"> <p>My fave Masif tee so far!</p> <footer>Posted 2 days ago</footer> </article> <article> <img src="/tumblr_m9tf6wSr6W1rzfqbpo1_500.jpg" alt=""> <p>Happy 2nd birthday Masif Saturdays!!!</p> <footer>Posted 3 weeks ago</footer> </article> Еще примеры section <h1>Biography</h1> <section> <h1>The facts</h1> <p>1500+ shows, 14+ countries</p> </section> <section> <h1>2010/2011 figures per year</h1> <p>100+ shows, 8+ countries</p> </section> nav <nav> <ul> <li><a href="/">Home</a> <li><a href="/biog.html">Bio</a> <li><a href="/discog.html">Discog</a> </ul> </nav> Еще примеры aside <h1>Music</h1> <p>As any burner can tell you, the event has a lot of trance.</p> <aside>You can buy the music we played at our <a href="buy.html">playlist page</a>.</aside> <p>This year we played a kind of trance that originated in Belgium, Germany, and the Netherlands in the mid 90s.</p> h1-h6 <h1>The Guide To Music On The Playa</h1> <h2>The Main Stage</h2> <p>If you want to play on a stage, you should bring one.</p> <h2>Amplified Music</h2> <p>Amplifiers up to 300W or 90dB are welcome.</p> Еще примеры header <article> <header> <h1>Hard Trance is My Life</h1> <p>By DJ Steve Hill and Technikal</p> </header> <p>The album with the amusing punctuation has red artwork.</p> </article> footer <article> <h1>Hard Trance is My Life</h1> <p>The album with the amusing punctuation has red artwork.</p> <footer> <p>Artists: DJ Steve Hill and Technikal</p> </footer> </article>
