← Форум / HTML5 / Разметка HTML5 и структура сайта
Я недавно начал изучать HTML5. Также изучил блочную верстку. Я сделал сайт с помощью div, но без использования тегов HTML5, а теперь хочу конвертировать в HTML5. Сайт [URL="ссылка]ссылка]. На нем несколько шаблонов страниц. Разметка главной страницы и некоторых других такая:
//ТЕЛО САЙТА
<div>Все тело сайта
<div>Левая верхняя часть над фото-баннером</div>
<div>Правая верхняя часть над фото-баннером</div>
<div>Фото-баннер</div>
<div>Блок с логотипом, поиском и контактами
<div>Блок с логотипом</div>
<div>Бок с поиском</div>
<div>Блок с контактами</div>
</div>
//МЕНЮ САЙТА
<div>Блок с меню</div>
//КОНТЕНТ САЙТА
<div>Блок со всем контентом
<div>Левая колонка
<div>Блок с картой города</div>
<div>Блок с баннером</div>
<div>Блок с новостями</div>
</div>
<div>Центральная колонка (основной контент)</div>
<div>Правая колонка
<div>Блок виджетом погоды города</div>
<div>Блок с web-камерой города</div>
</div>
<div>Блок с ссылкой на страницу каталога объектов города</div>
<div>Блок с горизонтальной прокруткой объектов города
<div>Внутренний блок для работы горизонтальной прокрутки
<div>Блок объекта 1</div>
<div>Блок объекта 2</div>
<div>Блок объекта 3</div>
……………………………………………
<div>Блок объекта N</div>
</div>
</div>
<div>Блок со статьями
<div>Статья 1</div>
<div>Статья 2</div>
<div>Статья 3</div>
<div>Статья 4</div>
</div>
<div>Блок с баннерами
<div>Баннер 1</div>
<div> Баннер 2</div>
<div> Баннер 3</div>
<div> Баннер 4</div>
<div> Баннер 5</div>
</div>
</div>
//ПОДВАЛ САЙТА
<div>Блок с подвалом сайта
<div>Блок левой части подвала для текста</div>
<div>Блок правой части подвала для скрытых счетчиков</div>
</div>
</div>
Изучая новые теги HTML5 я запутался, куда и как правильно вставлять новые теги, вкладывать их в друг друга. И не понимаю, можно ли при этом оставлять теги div или желательно, чтобы не было их в новой версии HTML5. На разных сайтах по-разному описана разметка страниц. Возможно, можно как угодно вкладывать. Работать будет, как бы я ни сделал, но как правильно? Ведь новые теги HTML5 фактически имеют логический смысл, а на отображение не влияют никак. Я хочу правильно понять HTML5 на примере хотя бы для этого сайта. Возможно, я не совсем верно составил структуру сайта. Наделал много блоков и подблоков.
Я пришел к такому варианту: для шапки добавил блок еще один блок, в который включил несколько блоков.
//ТЕЛО САЙТА НА HTML5
<section>Все тело сайта
//ШАПКА САЙТА
<header>Шапка сайта
<section>Левая верхняя часть над фото-баннером</section>
<section>Правая верхняя часть над фото-баннером</section>
<section>Фото-баннер</section>
<section>Блок с логотипом, поиском и контактам
<section>Блок с логотипом</section>
<section>Бок с поиском</section>
<address>Блок с контактами< address>
</section>
</header>
//МЕНЮ САЙТА
<nav>Блок с меню</nav>
//КОНТЕНТ САЙТА
<section>Блок со всем контентом
<section >Левая колонка
<article>Блок с картой города</article>
<article>Блок с баннером</article >
<article>Блок с новостями</article >
</section >
<main>Центральная колонка (основной контент для)</main >
<section>Правая колонка
<article>Блок виджетом погоды города</article>
<article>Блок с web-камерой города</article>
</section>
<section >Блок с ссылкой на страницу каталога объектов города</section >
<section >Блок с горизонтальной прокруткой объектов города
<section>Внутренний блок для работы горизонтальной прокрутки
<article>Блок объекта 1</article>
<article>Блок объекта 2</article>
<article>Блок объекта 3</article>
……………………………………………
<article>Блок объекта N</article>
</section>
</section >
<section>Блок со статьями
<article>Статья 1</article>
<article>Статья 2</article>
<article>Статья 3</article>
<article>Статья 4</article>
</section>
<section>Блок с баннерами
<aside>Баннер 1</aside>
<aside>Баннер 2</aside>
<aside>Баннер 3</aside>
<aside>Баннер 4</aside>
<aside>Баннер 5</aside>
</section>
</ section>
//ПОДВАЛ САЙТА
<footer>Блок с подвалом сайта
<section>Блок левой части подвала для текста</section>
<section>Блок правой части подвала для скрытых счетчиков</section>
</footer>
</section>
Здравствуйте!
Не стал создавать новую тему так как заголовок вполне отражает суть моего вопроса.
Хотелось бы сделать структурирование данных chema.org для видео плеера uppod на сайте [url=kinopremiera.net]Кинопремьера[/url] но не очень хорошо понимаю как это сделать?
Вот небольшой пример: может кто подскажет как это сделать чтобы не менять каждый раз код видео вручную, буду очень признателен…
Добавляю описание свойств VideoObject в schema.org
Для [url=ссылка]Онлайн кинотеатра[/url]
Свойство Обязательное? Описание
name Да Название видео
description Да Описание видео
thumbnailUrl Да URL файла со значком видео. Размер изображений должен быть не менее 160 x 90 и не более 1920 x 1080 пикселей. Рекомендуемые форматы – JPG, PNG или GIF.
duration Рекомендуется Продолжительность видео в формате ISO 8601.
contentUrl Рекомендуется Фактический URL видеофайла. Этот файл должен быть в формате .mpg, .mpeg, .mp4, .m4v, .mov, .wmv, .asf, .avi, .ra, .ram, .rm, .flv или в другом видеоформате. Все файлы должны быть доступны по протоколу HTTP. Метафайлы, требующие загрузки источника через протоколы потоковой передачи (например, RTMP), не поддерживаются.
С помощью этого файла Google может создавать значки видео и снимки для предпросмотра. Кроме того, он может использоваться для проверки вашего видео.
Рекомендация. Воспользуйтесь обратным DNS-запросом, чтобы разрешить доступ к вашему содержанию только роботу Googlebot.
embedUrl Рекомендуется URL проигрывателя для конкретного видео. Обычно эта информация указывается в элементе src тега <embed> . Например:
Dailymotion: http://www.dailymotion.com/swf/x1o2g
Рекомендация. Воспользуйтесь обратным DNS-запросом, чтобы разрешить доступ к вашему содержанию только роботу Googlebot.
uploadDate Рекомендуется Дата публикации видео в формате ISO 8601.
expires Рекомендуется, если применимо Дата, после которой видео станет недоступным, в формате ISO 8601. Если видео не имеет срока действия, эту информацию указывать не требуется.
Не стал создавать новую тему так как заголовок вполне отражает суть моего вопроса.
Хотелось бы сделать структурирование данных chema.org для видео плеера uppod на сайте [url=kinopremiera.net]Кинопремьера[/url] но не очень хорошо понимаю как это сделать?
Вот небольшой пример: может кто подскажет как это сделать чтобы не менять каждый раз код видео вручную, буду очень признателен…
<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<h2>Video: <span itemprop="name">Title</span></h2>
<meta itemprop="duration" content="T1M33S" />
<meta itemprop="thumbnailUrl" content="thumbnail.jpg" />
<meta itemprop="contentUrl" content="/video123.flv" />
<meta itemprop="embedUrl" content="/videoplayer.swf?video=123" />
<meta itemprop="uploadDate" content="2011-07-05T08:00:00+08:00" />
<meta itemprop="expires" content="2012-01-30T19:00:00+08:00" />
<object ...>
<param ...>
<embed type="application/x-shockwave-flash" ...>
</object>
<span itemprop="description">Описание видео</span>
</div>
Для [url=
Свойство Обязательное? Описание
name Да Название видео
description Да Описание видео
thumbnailUrl Да URL файла со значком видео. Размер изображений должен быть не менее 160 x 90 и не более 1920 x 1080 пикселей. Рекомендуемые форматы – JPG, PNG или GIF.
duration Рекомендуется Продолжительность видео в формате ISO 8601.
contentUrl Рекомендуется Фактический URL видеофайла. Этот файл должен быть в формате .mpg, .mpeg, .mp4, .m4v, .mov, .wmv, .asf, .avi, .ra, .ram, .rm, .flv или в другом видеоформате. Все файлы должны быть доступны по протоколу HTTP. Метафайлы, требующие загрузки источника через протоколы потоковой передачи (например, RTMP), не поддерживаются.
С помощью этого файла Google может создавать значки видео и снимки для предпросмотра. Кроме того, он может использоваться для проверки вашего видео.
Рекомендация. Воспользуйтесь обратным DNS-запросом, чтобы разрешить доступ к вашему содержанию только роботу Googlebot.
embedUrl Рекомендуется URL проигрывателя для конкретного видео. Обычно эта информация указывается в элементе src тега <embed> . Например:
Dailymotion: http://www.dailymotion.com/swf/x1o2g
Рекомендация. Воспользуйтесь обратным DNS-запросом, чтобы разрешить доступ к вашему содержанию только роботу Googlebot.
uploadDate Рекомендуется Дата публикации видео в формате ISO 8601.
expires Рекомендуется, если применимо Дата, после которой видео станет недоступным, в формате ISO 8601. Если видео не имеет срока действия, эту информацию указывать не требуется.