Jump to content
  • 0

HTML5

Spark89

Asked by Spark89,

 Share

Question

Spark89 Explorer

Spark89

Posted
Posted (edited)

Здравствуйте, уже неделю пытаюсь разобраться с новыми тегами <section>, <article>, <header>, <footer>, <nav>, <aside> . Залез в спецификации w3c и WHATWG, пролистал http://html5doctor.com/. В теории все получается просто, но когда начинаешь реально что-то писать приходит понимание, что ты нечего не понимаешь.
 

Набрел на http://www.creativebloq.com/html5/truth-about-structuring-html5-page-9122842#null (комменты вообще бомба) и понял, что никто толком о новых элементах HTML5 ничего не знает.

 

Сейчас думаю начать изучение верстки стандартными divами с ролями ARIA с точечными вкраплениями HTML5. Можно конечно лепить структурные теги HTML5 как вздумается, но где гарантия, что они будут в духе семантики? Когда начинаешь думать какая разница между <section> и <article> - крыша едет. Мне чистый JS дался с легкостью, а тут на таком простом застрял.

 

Вопрос к профессионалам, расскажите как и где Вы применяете <section>, <article>, <header>, <footer>, <nav>, <aside> ? Просто в моем понимании таких проблем со структурированием HTML документа не должно быть. Разметка это не то над чем нужно сидеть несколько дней, имхо.

Edited by Spark89
Link to comment
Share on other sites

18 answers to this question

Recommended Posts

  • 0
Spark89 Explorer

Spark89

Posted
  • Author
Posted (edited)
- большой блок (раздел). Например, левая колонка.

тоесть это div, но это не div

 

- Статья. Например, какой-нибудь пост.

<article> должен содержать часть самодостаточной информации, которая может быть вырвана из контекста всей страницы без потери смысла. Руководствуясь етим правилом я могу всю в страницу в <article> исписать

 

Перевод от SelenIT

Я видел ее в оригинале. Она помогла со всеми элементами кроме <article> и <section>

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

SelenIT

Posted
Posted
Руководствуясь етим правилом я могу всю в страницу в <article> исписать

Если добавление тега ничего не меняет — значит, он не нужен. Поэтому всю страницу не надо оборачивать ни в <article>, ни в <section> — достаточно <body>.

 

Вообще есть мнение, что более важен элемент <main> (появившийся уже после этой схемы). В принципе, во многих случаях достаточно разметить глобальные <header>/<footer>, <main> (1 шт.), <nav> и <aside> (сколько нужно), а без <article> и <section> вполне можно обходиться (тем более, что любой заголовок фактически создает <section> неявно)...

Link to comment
Share on other sites
  • 0
antonKar Explorer

antonKar

Posted
Posted
Руководствуясь етим правилом я могу всю в страницу в

исписать

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

  • Like 1
Link to comment
Share on other sites
  • 0
Spark89 Explorer

Spark89

Posted
  • Author
Posted (edited)

Хм, немного проясняется. Чтобы закрепить, допустим есть такое:

 

название статьи

фотография к статье

текст статьи

автор статьи

комментарии к статье

<!DOCTYPE html><html><head></head><body><article>	<header>		<h1>название статьи</h1>	</header>	<figure>		<img src="фотография к статье">		<figcaption>название фотографии</figcaption>		</figure>	<section> // <section> можно и на <div> поменять		<p>текст статьи</p>	</section>	<footer>		<p>автор статьи </p>	</footer>	<article> // согласно спецификации, но почему коменты нельзя обернуть в <aside>? 		<header>			<h3>тема комента</h1>		</header>		<section>			<p>сам коментарий</p>		</section>		<footer>			<p>автор комента </p>		</footer>	</article></article></body></html>
Edited by Spark89
Link to comment
Share on other sites
  • 0
Switch74 Rising Star

Switch74

Posted
Posted

Ну наверно из-за подобных вещей:
http://htmlbook.ru/html/command

http://htmlbook.ru/html/bdi

http://htmlbook.ru/html/input/type
http://htmlbook.ru/html/hgroup
Возможно данная ситуация изменилась за последние годики, но не по всем браузерам - это точно. К тому же бывает требуется поддержка старых версий. А делать 2 реализации одного и того же зачем?

 

Мне вот интересно, кто-нибудь пользовался такой интересной штукой как http://htmlbook.ru/html/keygen, на сколько хорошо она работает?

И зачем нужен например такой http://htmlbook.ru/html/mark, али span не хватает?

Link to comment
Share on other sites
  • 0
Int Explorer

Int

Posted
Posted

али span не хватает?

Так-то и div хватало для всего, но придумали семантику. Вот и mark наверное для этого же.

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

Link to comment
Share on other sites
  • 0
Spark89 Explorer

Spark89

Posted
  • Author
Posted (edited)

Если верить этому комментарию из http://www.creativebloq.com/html5/truth-about-structuring-html5-page-9122842#null :

i watched a presentation by John-Foliot, and in it he said that
1) These new html5 sectioning tags are interpreted as "divs" in browsers that don't understand them, and therefore using these tags with ARIA roles does provide forward and backward compatibility. please how true is this?
2)What is/are the implications of this, if true?

то все новые теги это сплошной epic fail и div вечен :) .

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

SelenIT

Posted
Posted
про семантику для mark ни чего толком не написано - тег для оформления текста
 

Вроде как это всё-таки оформление выделенного текста. И главред W3C-версии спецификации, а заодно accessibility-маньяк Стив Фолкнер требует от браузеров, чтобы это было видно скринридерам и т.п. (правда, я вот так сходу не пойму, в чем это должно выражаться, и мозилловцы, похоже, тоже).

 

се новые теги это сплошной epic fail и div вечен

Вынужден признать существенную долю правды в выводе, но вряд ли это можно вывести именно из того конкретного коммента... :)

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

  • Similar Content

    • Mix9
      див уходит за границу экрана
      By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
    • Young
      Расположение картинки и фигур на сайте
      By Young
      Столкнулся с проблемой , когда вставил картинку , весь текст съехал в лево , а сама картинка , должна находиться с низу сайта
      И еще вопрос , как сделать так , чтобы когда я уменьшал размер сайта , облаки оставались на своих местах ?
      HTML
      CSS
       

      решено 
    • vladdvin
      Неотображаемый текст в шапке сайта.
      By vladdvin
      Верстаю макет с Фигмы - https://www.figma.com/file/2rdy1qjBTl7D6BAC8S4qlf/Webovio?node-id=0%3A1. Наверстал
      CSS
      В результате отображается следующая картинка

      в режиме инструментов разработчика. А вне режима вообще отображает

      Подскажите как добиться отображения текста как на макете.
    • Hinn
      Верстка/Разработка сайта/Создание логотипов
      By Hinn
      Всем приветик, начинающий фрилансер. Ищу первые заказы в данной сфере. Занимаюсь:
      • На малом уровне версткой;
      • Хорошо разбираюсь в таких CMS: как Wordpress и Tilta - легко и быстро разработаю одно страничные, многостраничные сайты, интернет-магазины (могу как дорабатывать, так и создания с нуля, так же занимаюсь переносом одного сервера на другой);
      • Увлекаюсь разработкой логотипов (логотипы с нуля, доработка логотипа, рисование логотипа по эскизу).
      Готов заниматься работой за любую плату. Так же присутствует портфолио, но за частую людям интересно когда о тебе есть отзывы. Поэтому пришел сюда за практическим опытом, и поиском постоянной работы.
      Использую:
      - Верстка: (HTML5/CSS3), верстаю из Figma, Photoshop, illustrator.
      - Разработка сайта: (CMS WordPress, Tilta).
      - Разработка логотипа: (Photoshop, illustrator)
      Если не знаю чего-то необходимого для Вашего проекта\работы -- обязательно разберусь (все-таки начинающий фрилансер).

      Если вы разработчик и вам некому спихнуть рутинную работу - я с радостью возьму её на себя;

      телеграмм: HinnWork;
      почта: balistic.baty@gmail.com

      Открыт для любых предложений. 
    • qqruz
      Публикация последних видео с нескольких каналов на сайт
      By qqruz
      Мне нужен код для автоматической публикация последних видео с нескольких каналов ютюб, что бы они шли последовательно. Я перерыл весь интернет и нечего не нашел, сам тоже пытался написать, но из-за слабого знания языка и малого количества видео не могу. Надеюсь на чью-то поддержку.
×
×
  • 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