Jump to content
  • 0

Немного запутался в HTML5

bayanruby2

Asked by bayanruby2,

 Share

Question

bayanruby2 Explorer

bayanruby2

Posted
Posted

1 - когда использовать <section>?

так чтоли?


<section>
<header>
</header>
</section>
<section>
<article>
</article>
</section>

и т.д.?

2 - сколько можно использовать тег <nav>?

И как его использовать?

У меня есть меню в шапке горизонтальное и меню в сайтбаре вертикальное. Мне и то и то выделить тегом <nav>?

3 - во что обрамлять ссылки? <ul><li></li></ul>? Или чтото другое?

4 - у меня в статье будут сноски, типо доп. информация.

Во что мне её обрамлять? в <aside>? Или в <section>?

Пока вроде всё.

Заранее спасибо.

Link to comment
Share on other sites

28 answers to this question

Recommended Posts

  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Сугубо имхо, насколько я сейчас понимаю:

1) Нет, section должен выделять смысловой блок, желательно с заголовком, достойный включения в оглавление документа. Article - сам по себе разновидность section-а (более специфичная, самодостаточный контент, который можно целиком перенести из страницы, скажем, в RSS-ленту) и дополнительно оборачивать его в section не надо.

2) Сколько нужно, исходя из здравого смысла. Для двух таких меню - имхо, в самый раз.

3) Без разницы.

4) Aside - хорошо. Как вариант (если этих ссылок мало и они не стоят отдельного упоминания в оглавлении) можно рассмотреть footer.

А вообще не стоит придавать этим тегам слишком много значения, области применения у них всех достаточно гибкие, а здравый смысл рулит в любом случае.

На окончательную истину не претендую, буду рад поправкам и уточнениям!

Link to comment
Share on other sites
  • 0
bayanruby2 Explorer

bayanruby2

Posted
  • Author
Posted

SelenIT, спасибо за ответ.

Сегодня целый день HTML5 юзал в поисковиках.

Блин, информации пока не очень много, у буржуев есть, но у меня с английским не ахти, а гугл транслэйт переводит дословно и получается не статья, а бред какой-то. :)

Чем больше про HTML5 читаю, тем больше вопросов возникает.

Вот например:

1 - ПС уже в свои алгоритмы внесли поправки? С логичной вёрсткой на HTML5 документы лучше ранжируются/индексируются ПС?

2 - Когда наконец-то выйдет полностью HTML5?

3 - Почему его так долго делают? Ведь не пару энтузиастов над ним работают.

На htmlbook конечно много инфы, но там больше о HTML5 в целом говорится, о его возможностях, которые мне пока не нужны :)

Я бы хотел полностью понять как верстать на HTML5 логичный код, как использовать новые теги на практике, ну и т.д.

В этих уроках конечно подробно написано, но есть много ньюансов.

Да и с СЕО непонятно както)

раньше был один H1 а теперь их сколько хочешь вставляй, а как ПС вес распределяет?

Короче одни вопросы...

Я не ною, что типа ничего нету в сети, просто запутался. Может просветите? Ссылок надаёте полезных, кроме хтмлбук(уже всё прочитал).

Заранее спасибо!

С ув. Артём :)

Link to comment
Share on other sites
  • 0
Vlad Explorer

Vlad

Posted
Posted

1. Этого мы не узнаем, алгоритмы поисковиков держатся в секрете.

2. В 2014 году выйдет, где-то пробегала подобная информация. Но что значит выйдет? CSS2.1 только недавно "закончен", а пользовались им много лет, с HTML5 аналогично. Какие-то вещи уже "устаканились", в браузерах поддерживаются, в этой части изменения будут минимальны. Семантика же самый больной вопрос HTML5, на данный момент спецификация не даёт ответов на мучившие всех вопросы, приходится гадать и делать предположения. Так что полагайтесь на собственную логику и общую информацию. В буржуйнете аналогично дело обстоит, знания английского не поможет, все отделываются общими фразами, что вполне закономерно.

3. Вы похоже не работали в бюрократической системе с кучей разных отделов, когда для примера, одностраничный текст на сайт утверждается пару месяцев. Со спецификацией аналогично, с одной стороны бюрократическая машина, которая утверждает теги, тексты и содержание, с другой разработчики браузеров, которые продавливают свои интересы. В такой ситуации написание и утверждение может затянуться надолго. Но считаю, что разрабатывается довольно быстро сейчас, по сравнению со старпёрами и тормозами W3C, главный конфликт и противостояние HTML5-XHTML завершён.

Link to comment
Share on other sites
  • 0
Softlink Explorer

Softlink

Posted
Posted

Сугубо имхо, насколько я сейчас понимаю:

1) Нет, section должен выделять смысловой блок, желательно с заголовком, достойный включения в оглавление документа. Article - сам по себе разновидность section-а (более специфичная, самодостаточный контент, который можно целиком перенести из страницы, скажем, в RSS-ленту) и дополнительно оборачивать его в section не надо.

А я вот например блок с комментариями засовываю в section, а отдельный комментарий в article, у которого имеется свой header с датой и именем.

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

А я вот например блок с комментариями засовываю в section, а отдельный комментарий в article, у которого имеется свой header с датой и именем.

Группировка блока связанных article-ов в общий section (в данном случае под общим заголовком "Комментарии") - это другое дело, это логично :). В примере у ТС был одиночный article в дополнительном section (насколько я понял), это избыточно.

Link to comment
Share on other sites
  • 0
bayanruby2 Explorer

bayanruby2

Posted
  • Author
Posted

Vlad, спасибо за ответ.

2. В 2014 году выйдет, где-то пробегала подобная информация. Но что значит выйдет? CSS2.1 только недавно "закончен", а пользовались им много лет, с HTML5 аналогично. Какие-то вещи уже "устаканились", в браузерах поддерживаются, в этой части изменения будут минимальны. Семантика же самый больной вопрос HTML5, на данный момент спецификация не даёт ответов на мучившие всех вопросы, приходится гадать и делать предположения. Так что полагайтесь на собственную логику и общую информацию. В буржуйнете аналогично дело обстоит, знания английского не поможет, все отделываются общими фразами, что вполне закономерно.

Ну тогда можно понять почему мало информации в сети.

Получается на HTML5 верстают, грубо говоря, по своей логике, кому как нравится?

А спецификацию планируют скоро доделать?))

Уж очень хочется!!! :)

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Не совсем, мало-помалу разработчики приходят к какому-то консенсусу (напр. вот хорошая статья по теме).

А со спецификацией хитро. Ее делают параллельно W3C и WHATWG, каждый свою версию. И если текущая версия W3C сейчас находится в статусе "полу-окончательного черновика" (принципиальные моменты меняться уже не будут, есть с полтора десятка багов, мешающих ее переводу в "кандидаты в рекомендации", но как только их разрулят — так сразу), то WHATWG обозвали свою версию "живым стандартом", который можно считать готовым в любой момент времени (по состоянию на этот момент), но постоянно эволюционирующий по мере прогресса браузеров, понятия "окончательной готовности" для него нет в принципе. В будущем он станет более продвинутым и "зрелым", но не "более готовым, чем сейчас". Поэтому пользоваться можно смело, единственное "но" — определение валидности конформности может меняться...

Link to comment
Share on other sites
  • 0
Vlad Explorer

Vlad

Posted
Posted

Есть рекомендуемая логика по использованию основных элементов, в мелочах же начинаются споры и прения, как "правильно" сделать. Так что нельзя сказать, что верстают как кому нравится.

Не ждите эту спецификацию, толку то от этого. Хотите использовать HTML5, так начинайте прямо сейчас, к тому времени как спека будет завершена все уже давно на HTML5 перейдут, а вы окажетесь в роли догоняющего.

Link to comment
Share on other sites
  • 0
bayanruby2 Explorer

bayanruby2

Posted
  • Author
Posted (edited)

Сейчас по своей логике сверстаю каркас сайта на HTML5 без КСС.

И кину сюда на суд форумчан :)

Посмотрю на сколько я правильно понял семантику/логичность HTML5

Но перед этим опять появились вопросы...

1 - <html lang="ru-RU">

Зачем нужен этот ланг? И на разных сайтов по разному: то так <html lang="ru">, то так <html lang="ru-RU">

2 - если я взялся верстать на HTML5 мне соблюдать таки моменты как <br /> <meta ... />?

Edited by bayanruby2
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

1) Насколько я понимаю, это важно, например, для поисковиков ("искать страницы только на русском" и т.п.) и автопереводчиков (Хром иногда предлагает "перевести страницу"). Код языка должен соответствовать стандарту BCP47, "ru" — самый общий вариант, "ru-RU" — более конкретный, с уточнением страны/региона.

2) И так, и сяк правильно, как самому больше нравится.

Link to comment
Share on other sites
  • 0
bayanruby2 Explorer

bayanruby2

Posted
  • Author
Posted (edited)

SelenIT, понял, дзякуй)

Ну как?

По назначению теги новые использую или напихал кучу мала? :)

<!DOCTYPE html>
<html lang="ru-RU">
	<head>
	<title>МОЯ ПЕРВАЯ ВЁРСТКА НА HTML5</title>
	<meta charset="utf-8">
	<meta name="description" content=" ">
	<meta name="keywords" content=" ">
	<link rel="stylesheet" href="reset.css">
	<link rel="stylesheet" href="index.css">
	<!--[if lt IE 9]> 
	 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	</head>
<body>
<header><!-- ШАПКА САЙТА -->
	<img src="" alt="" title="">
</header>

<aside><!-- ЛЕВЫЙ САЙТБАР -->
	<section><!-- ПЕРВАЯ КОЛОНКА - НАВИГАЦИЯ -->
		<nav>
			<ul>
			  <li></li>
			  <li></li>
			  <li></li>
			  <li></li>
			</ul>
		</nav>
	</section>
	<section>
		<!-- ВТОРАЯ КОЛОНКА - РЕКЛАМА -->
	</section>
	<section>
		<!-- ТРЕТЬЯ КОЛОНКА - СТАТИСТИКА САЙТА -->
	</section>
</aside>

<article><!-- КОНТЕНТ -->
	<header><!-- ШАПКА КОНТЕНТА -->
		<h1></h1><!-- НАЗВАНИЕ СТАТЬИ -->
		<!-- +ЕЩЁ БУДЕТ АВТОР СТАТИ, ДАТА СОЗДАНИЕ и т.п. -->
	</header>

<p></p>

<p></p>

	<aside>
		<!-- ДОПОЛНИТЕЛЬНАЯ ИНФА К СТАТЬЕ -->
	</aside>

<p></p>

	<footer><!-- ПОДВАЛ КОНТЕНТА -->
		<!-- АВТОРСКИЕ ПРАВА НА СТАТЬЮ... -->
	</footer>
</article>

<footer><!-- ПОДВАЛ САЙТА -->
	<p>ВСЕ ПРАВА ЗАЩИЩЕНЫ!</p>
</footer>
</body>
</html>

Edited by bayanruby2
Link to comment
Share on other sites
  • 0
Nanto Explorer

Nanto

Posted
Posted

А у HTML5 есть обратная совместимость? Что-то я сомневаюсь что прямо уж все выпущенные браузеры правильно расценят <footer>... Если обратной совместимости нет, то чего они так медленно и аккуратненько? Жахнули бы прямо с ходу абсолютно новый стандарт, который не поддерживает ни один из существующих браузеров и решайте сами куда смотреть - в прошлое или будущее!

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

bayanruby2, аутлайнер строит для этой разметки такое "оглавление" (outline):

  1. Untitled BODY

    1. Untitled ASIDE

      1. Untitled SECTION

        1. Untitled NAV

        2. Untitled SECTION
        3. Untitled SECTION


        4. No text content inside H1
          1. Untitled ASIDE

        Многовато безымянных секций — недостаток. Как минимум, nav в главном aside явно в добавочной section-обертке не нуждается. Но в остальном, на мой взгляд, вполне логичная структура!

        Nanto, обратная совместимость и стандартизация уже используемых подходов (принцип "мощения проторенных троп", "paving the cowpaths") — чуть ли не главная "фишка" HTML5. Новые теги специально выбирались с таким расчетом, чтобы по крайней мере не вызывать неприятных сюрпризов в существующих браузерах (например, поэтому отказались от использования dt/dd для details, т.к. они "своеобразно" парсятся в IE). При соблюдении минимальных правил предосторожности (напр., не злоупотреблять опциональными закрывающими тегами внутри новых тегов) они поддерживаются во всех браузерах новее FF2 (в IE6-8 — нужен JS-костыль для их стилизации), на переходный период вполне нормально "подстраховать" их дивами (по спецификации дивы как раз нужны для нетривиальных оформительских задач, а новые теги — главным образом для смыслового разделения контента).

Link to comment
Share on other sites
  • 0
bayanruby2 Explorer

bayanruby2

Posted
  • Author
Posted (edited)

Вы имеете ввиду вот это лишнее?

<aside><!-- ЛЕВЫЙ САЙТБАР -->

<section><!-- ПЕРВАЯ КОЛОНКА - НАВИГАЦИЯ -->

<nav>

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

</nav>

</section>

<section>

<!-- ВТОРАЯ КОЛОНКА - РЕКЛАМА -->

</section>

<section>

<!-- ТРЕТЬЯ КОЛОНКА - СТАТИСТИКА САЙТА -->

</section>

</aside>

Edited by bayanruby2
Link to comment
Share on other sites
  • 0
Vlad Explorer

Vlad

Posted
Posted

А у HTML5 есть обратная совместимость? Что-то я сомневаюсь что прямо уж все выпущенные браузеры правильно расценят <footer>... Если обратной совместимости нет, то чего они так медленно и аккуратненько? Жахнули бы прямо с ходу абсолютно новый стандарт, который не поддерживает ни один из существующих браузеров и решайте сами куда смотреть - в прошлое или будущее!

Как по вашему браузеры должны расценивать <footer>? Показать его содержимое? Покажут все, включая Netscape, так что в этом плане есть "обратная совместимость". Применить стили к footer? Применят только браузеры, поддерживающие этот тег. Но ведь всего-то надо добавить в стилях display:block и подключить простенький скрипт, который создает элемент через document.createElement('footer'). После этого все браузеры, включая их устаревшие версии, добавят стиль к элементу.

Link to comment
Share on other sites
  • 0
bayanruby2 Explorer

bayanruby2

Posted
  • Author
Posted

SelenIT, а почему?)

Какбы асайд - это левый блок.

Делим левый блок на 3 подблока и в каждом подблоке свои причуды: нав, сёрч, реклама,...

Или вот так например? 


<section>
<aside>
   <nav>
   </nav>
</aside>

<aside>
   <div class="search">
   </div>
</aside>

<aside>
   <div class="reklama">
   </div>
</aside>
</section>

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Article, aside, nav — это, по сути, специализированные разновидности section, они, как и section, указывают место раздела в "оглавлении" (которое "document outline") и, вдобавок, раскрывают "природу" этого раздела. Article — самодостаточная публикация, aside — "вольные ассоциации" на главную тему, nav — основная навигация. И основная навигация явно не часть "вольных ассоциаций", а самостоятельный подраздел того же ранга. И, совсем по-хорошему, всем этим разделам нужны бы заголовки.

Link to comment
Share on other sites
  • 0
bayanruby2 Explorer

bayanruby2

Posted
  • Author
Posted 

<!DOCTYPE html>
<html lang="ru-RU">
        <head>
        <title>МОЯ ПЕРВАЯ ВЁРСТКА НА HTML5</title>
        <meta charset="utf-8">
        <meta name="description" content=" ">
        <meta name="keywords" content=" ">
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="index.css">
        <!--[if lt IE 9]> 
         <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

        <![endif]-->
        </head>
<body>
<header><!-- ШАПКА САЙТА -->
        <img src="" alt="" title="">
</header>

<aside><!-- ЛЕВЫЙ САЙТБАР -->
        <section><!-- ПЕРВАЯ КОЛОНКА - НАВИГАЦИЯ -->
                <nav>
                        <ul>
                          <li></li>
                          <li></li>
                          <li></li>
                          <li></li>
                        </ul>
                </nav>
        </section>
        <section>
                <!-- ВТОРАЯ КОЛОНКА - РЕКЛАМА -->
        </section>
        <section>
                <!-- ТРЕТЬЯ КОЛОНКА - СТАТИСТИКА САЙТА -->
        </section>
</aside>

<article><!-- КОНТЕНТ -->
        <header><!-- ШАПКА КОНТЕНТА -->
                <h1></h1><!-- НАЗВАНИЕ СТАТЬИ -->
                <!-- +ЕЩЁ БУДЕТ АВТОР СТАТИ, ДАТА СОЗДАНИЕ и т.п. -->
        </header>

<p></p>

<p></p>

        <aside>
                <!-- ДОПОЛНИТЕЛЬНАЯ ИНФА К СТАТЬЕ -->
        </aside>

<p></p>

        <footer><!-- ПОДВАЛ КОНТЕНТА -->
                <!-- АВТОРСКИЕ ПРАВА НА СТАТЬЮ... -->
        </footer>
</article>

<footer><!-- ПОДВАЛ САЙТА -->
        <p>ВСЕ ПРАВА ЗАЩИЩЕНЫ!</p>
</footer>
</body>
</html>

У меня фиксированный сайт.

А в новой вёрстке на хтмл5 вёрстка начинается с тега хеадер и какбы нету контейнера, с помощью которого я потом в стилях выравняю макет по центру и дам width.

Можно както подругому выровнять макет по центру и дать размер width? Не добавляя <див класс="контейнер">?

В боди по центру выровнять, а главным тегам задать width?

Link to comment
Share on other sites
  • 0
Softlink Explorer

Softlink

Posted
Posted

У меня фиксированный сайт.

А в новой вёрстке на хтмл5 вёрстка начинается с тега хеадер и какбы нету контейнера, с помощью которого я потом в стилях выравняю макет по центру и дам width.

Можно както подругому выровнять макет по центру и дать размер width? Не добавляя <див класс="контейнер">?

В боди по центру выровнять, а главным тегам задать width?

Никто не запрещает обернуть все в див.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept