Jump to content
  • 0

Оцените семантику

Mr.Smith

Asked by Mr.Smith,

 Share

Question

Mr.Smith Explorer

Mr.Smith

Posted
Posted (edited)

Здравствуйте,

оцените, пожалуйста, структуру: 

<!doctype html>
<head>
<!-- Metatags and other... -->
</head>
<body>
 <section>
  <header>
<!-- Logo and banner -->
  </header>
  <nav><!-- Speedbar --></nav>
  <article>
   <h1><!-- Title --></h1>
<!-- Content -->
   <nav><!-- Navigation (Pager) --></nav>
  </article>
  <aside>
   <menu>
<!-- Menu -->
   </menu>
  </aside>
  <div id="empty"></div>
 </section>
 <footer>
<!-- Footer -->
 </footer>
</body>
</html>

. Футер прижат к низу окна. Также интересно стало, если подключить скрипт http://html5shiv.googlecode.com/svn/trunk/html5.js, нужно ли дополнительно в CSS добавлять свойство 

display: block;

для тегов, введенных в HTML5?

P.S. Отредактируйте, пожалуйста, заголовок темы, я неверно высказался...

Edited by Mr.Smith
Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Если под меню понимается обычное навигационное меню, а не панель "социальных" кнопок или чего-то похожего, то лучше будет его в nav запихнуть. А внешний section для такой структуры не нужен, body хватит. Прижатие футера с семантикой не связано, а вот display:block пока актуален.

Link to comment
Share on other sites
  • 0
Mr.Smith Explorer

Mr.Smith

Posted
  • Author
Posted (edited)

Валидатор сообщает, что тег <menu> поддерживают не все браузеры, но он ведь был введен именно с целью задания меню, если не ошибаюсь, а тег <section> я использую, чтобы футер прижать к низу окна, т.е. CSS: 

html, body { height: 100%; }
section { margin: 0; min-height: 100%; padding: 0; }
* html section { height: 100%; }
#empty { clear: left; height: 70px; }
footer { height: 60px; margin: -70px 0 0; padding: 0; }

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

Edited by Mr.Smith
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
тег <menu> поддерживают не все браузеры, но он ведь был введен именно с целью задания меню, если не ошибаюсь

Да — в HTML2 или где-то около того. Но в HTML5 <menu> — интерактивный элемент, ближе к контролам форм, предназначен в основном для веб-приложений. А для блоков навигационных ссылок, которые уместно скопом пропускать по команде а-ля "skip navigation", есть nav.

тег <section> я использую, чтобы футер прижать к низу окна

А вот за такое надо бы канделябром заставить переписывать спеку от руки — это прямое издевательство над ее буквой и духом, всё равно что использовать <blockquote> для отступов...

Link to comment
Share on other sites
  • 0
Mr.Smith Explorer

Mr.Smith

Posted
  • Author
Posted (edited)

Не буду спорить по поводу тега <menu>, читал о нем здесь http://htmlbook.ru/html/menu. Количество включений тега <nav> неограниченно? Если я использую тег <section> неверно - подскажите как в моем случае тогда делать лучше..., т.к. снова таки не понимаю, читаю на странице http://htmlbook.ru/html/section, что тег <section>

Задает раздел документа, который может включать в себя заголовки, шапку, подвал и текст.
. У меня также... Edited by Mr.Smith
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Количество включений тега <nav> неограниченно?

Ограничено здравым смыслом автора :). Основной критерий для <nav>, насколько я сейчас понимаю — уместно ли "skip navigation" для этого блока. Вводные и поясняющие ссылки можно внести в header и footer статьи (например, имхо, "хлебные крошки" — speedbar это ведь они? — иногда могут быть уместны в header'е, а постраничка — в footer'е, хотя это вопрос дискуссионный и спека дает здесь достаточную свободу для "авторского стиля").

Если я использую тег <section> неверно - подскажите как в моем случае тогда делать лучше..., т.к. снова таки не понимаю, читаю на странице http://htmlbook.ru/html/section, что тег <section>

Задает раздел документа, который может включать в себя заголовки, шапку, подвал и текст.
. У меня также...

Спека открытым текстом запрещает использовать section для оформления, для этого есть div. Section нужен для обособления логических блоков и построения схемы документа (примерно аналог разделов в вордовском документе, заголовки которых используются при автогенерации оглавления). В данном случае логический блок всего один, поэтому дополнительно обособлять его не нужно.

Link to comment
Share on other sites
  • 0
Mr.Smith Explorer

Mr.Smith

Posted
  • Author
Posted (edited)

Да, speedbar - это хлебные крошки. Согласен, единого формата не может быть, лично я вижу картину так, что хлебные крошки не стоит вставлять в тег <header>, но это мое мнение лишь. С постраничной навигацией также, т.к. считаю, что она относиться непосредственно к контенту.

Если правильно понял, то уместно будет заменить в моем случае тег <section> на <div id="container">, ну, и тег <menu> на <nav>, но последнее, я так понимаю, зависит от вкусовых качеств.

Если есть какой-то более удобный способ футер прижать в низу окна, буду признателен.

Также возник такой вопрос. Сказано, что для тега <script> и <style> не обязательно указывать атрибут type, т.к. браузеры уменют определять тип содержимого, а как быть с тегом <link>, к примеру, 

<link href="style.css" rel="stylesheet" type="text/css">

. Корректно ли будет писать просто 

<link href="style.css">

?

P.S. Что такое "спека"? :)

Edited by Mr.Smith
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

лично я вижу картину так, что хлебные крошки не стоит вставлять в тег <header>, но это мое мнение лишь. С постраничной навигацией также, т.к. считаю, что она относиться непосредственно к контенту.

Header и footer могут быть не только у всей страницы, но у отдельной секции или статьи, я имел в виду именно последний случай.

Если правильно понял, то уместно будет заменить в моем случае тег <section> на <div id="container">, ну, и тег <menu> на <nav>, но последнее, я так понимаю, зависит от вкусовых качеств.

Насчет div — в целом верно, нюансы прижатия футера целиком принадлежат CSS и от разметки не зависят (иногда удобно в качестве контейнера использовать body, иногда это налагает слишком много ограничений). Но вот nav и menu, имхо, всё же не взаимозаменяемы. К сожалению, толкового примера правильного использования menu я пока не видел...

Также возник такой вопрос. Сказано, что для тега <script> и <style> не обязательно указывать атрибут type, т.к. браузеры уменют определять тип содержимого, а как быть с тегом <link>, к примеру, 

<link href="style.css" rel="stylesheet" type="text/css">

. Корректно ли будет писать просто 

<link href="style.css">

?

P.S. Что такое "спека"? :)

Да, у link тоже можно опускать type, но rel="stylesheet" всё равно нужен, иначе браузер не поймет, что это файл стилей.

На P.S.: "спека" — сленговая калька от английского сокращения слова "спецификация" :)

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
×
×
  • 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