С оглед на събитията от последния месец и количеството сайтове, които мина през ръцете ми, като изпитващ в Академията на Телерик, установих, че голяма част от хората имат проблем със семантичното структуриране на страниците си. Това ме провокира да споделя част от ресурсите, които използвам. Ето няколко snippet-a, които можете да използвате (надявам се, нещата да ви станат по – ясни след като ги прегледате).
HTML5 Structure snippet
<meta charset="UTF-8" />
<header>
<nav>
<ul>
<li>New menu</li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h2>Article header</h2>
Posted on <time datetime="20012-09-12T16:31:24+02:00">September 12th 2012</time> by <a href="#">Pavel Kolev</a> - <a href="#comments">16 comments</a>
</header>Some Paragraph
</article>
</section>
<aside>
<h2>About section</h2>
Some Paragraph
</aside>
<footer>
Copyright 2012 New name
</footer>
HTML5 Article Structure
<article class="entry">
<header>
<h1 class="entry-title">My Article</h1>
<time class="updated" datetime="2012-09-12 11:11:03-0400">09-12-2012</time>
<p class="inline author card">By <span class="fn">Pavel Kolev</span></p>
</header>
<div class="entry-content">
...article text...
...article text...
<figure>
<img alt="" />
<figcaption>Figure Caption</figcaption>
</figure>
...article text...
...article text...
<aside>
<h2>Share this Article</h2>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Etc</li>
</ul>
</aside>
<div class="entry-content-asset">
<a href="photo-full.png">
<img alt="" />
</a>
</div>
...article text...
...article text...
<a class="entry-unrelated">Find Great Vacations</a>
</div>
<footer>A version of this article appeared in print on September 12,
2012, on page ...
<div class="source-org card copyright">Copyright 2012 <span class="org fn">Pavel Kolev</span></div>
</footer>
</article>
Loading ...
Полезно!
Имам въпрос в единия случай си поставил заглавието на с a в другия , въпросът ми е правилно ли е при наличие на име/лого на сайта да го поставяме в и заглавията на статиите/новините също да е с или те трябва вече да са с ?
Малко анти – хак-а ми ти направи въпроса нечетим… ако може пак да го зададеш с таговете написани по друг начин
Имам въпрос в единия случай си поставил заглавието на article с h2 a в другия h1, въпросът ми е правилно ли е при наличие на име/лого на сайта да го поставяме в h1и заглавията на статиите/новините също да е с h1 или те трябва вече да са с h2?
Благодарности за подборката!
Същевременно бих подходил иначе за употребата на и . не е всеобемен таг, заместваш wrapper-и и div-ове за стайлинг. Тъкмо обратното. съдържа -и.
Също така, бих включил в HTML5 Structure snippet-а в и на самия , така както правилно е направено в HTML5 Article Structure.
По принцип, внимание трябва да се обръща и на тага: например, логото не е и могат да бъдат не само images, но и video, audio, table, etc.
Полезен източник за мен е уебсайтът http://html5doctor.com/
Благодарности за подборката!
Същевременно бих подходил иначе за употребата на таговете section и article . section не е всеобемен таг, заместващ wrapper-и и div-ове за стайлинг. Тъкмо обратното. article съдържа section-и.
Също така, бих включил в HTML5 Structure snippet-а footer и в самия artcle, така както правилно е направено в HTML5 Article Structure.
По принцип, внимание трябва да се обръща и на fig тага: например, логото не е fig tag и fig могат да бъдат не само images, но и video, audio, table, etc.
Полезен източник за мен е уебсайтът http://html5doctor.com/
Само с това за section-а не съм съгласен. Артикъла ти може да съдържа section-и в това няма проблем но самия wrapper за артикълите ти семантично е правилно да е section(пак зависи разбира се от това колко точно артикъл-а ще пъхаш вътре)
Вярно е, зависи от конкретния случай…
Струва ми се, че ще е правилно, ако в HTML5 Structure snippet-а ред 16 бъде div с id (id=section дори) – така няма да се наруши семантичната структура…
От друга страна, в HTML5 Article Structure div-овете с клас entry-content… могат да бъдат сменени със section.
Разбира се, предложените HTML5 Structure snippet и HTML5 Article Structure повод за размисъл…
Благодаря за статията!
За съжаление все още виждам много противоречиви публикации на тема HTML5 семантика, като вярвам, че с времето тези противоречия ще се изчистят.
Например съм чел, че е добре section елемента да има нестнато заглавие. А проверка може да се прави например в HTML 5 Outliner: http://gsnedders.html5.org/outliner/
Относно елемента time, който аз също често използвам, в последната си документация от 29-ти март, 2012г. w3c премахна употребата на атрибута pubdate. Тук има подробности по темата: http://www.w3.org/wiki/User:Tantekelik/drop_pubdate
Поздрави и нека повече статии за семантика да има :).
[…] Може да съдържа собствена структура – <header><footer> и т.н. За по – подробно описание на структурата прочети тук […]
[…] pavelkolev.com » HTML речник on HTML5 Snippets […]
[…] Писане на семантичен HTML – това е похват, който указва на търсещата машина какво представлява всеки сегмент от страницата. Да приемем, че уебсайта ви съдържа хедър (горна част със заглавие и меню), главен контейнер на съдържание под него и футър с информация и линкове в долната част. Обикновено тези елементи се изграждат като отделни логически полета (чрез <div></div> таг). Тук възниква проблем, защото търсещите машини не категоризират по еднакъв начин съдържанието на тези полета. Ето защо в HTML 5 съществуват така наречените семантични тагове. По-конкретно те са: <header>, <footer>, <nav>, <section>, <article>, <aside>, <figure>, <figcaption>, <audio>, <video>, <details>, <summary>, <hgroup> и <time>. Тези тагове представляват вид метаданни , чрез които, от една страна, разделяме логически страницата си по разбираем за самите нас начин, а от друга страна – указваме на Google колко важно за нас е съдържанието във всяка отделна секция. Минавайки през кода, алгоритъмът лесно отчита, че в <header> частта се намира главното заглавие на нашата страница, а в <article> е съсредоточено самото съдържание на сайта ни. Конкретни примери за структуриране на HTML документ със семантични тагове можете да разгледате тук: http://pavelkolev.com/html5-snippets/. […]
Здравейте,
този клас div class=”entry-content” не трябва ли да се замени грешно ли е да се заменят с section, a sъщо My Article, не може ли да бъде записан без класа а просто в css h1 да наследи класа entry на артикъла
за първия ти втъпрос – може да се замени със section – зависи от ситуацията… за втория класа само ти помага след това да можеш да селектираш този елемент, в случая също не е задължителен