← Форум / HTML5 / Разметка HTML5 и структура сайта
Я недавно начал изучать HTML5. Также изучил блочную верстку. Я сделал сайт с помощью div, но без использования тегов HTML5, а теперь хочу конвертировать в HTML5. Сайт [URL="]]. На нем несколько шаблонов страниц. Разметка главной страницы и некоторых других такая:
Изучая новые теги HTML5 я запутался, куда и как правильно вставлять новые теги, вкладывать их в друг друга. И не понимаю, можно ли при этом оставлять теги div или желательно, чтобы не было их в новой версии HTML5. На разных сайтах по-разному описана разметка страниц. Возможно, можно как угодно вкладывать. Работать будет, как бы я ни сделал, но как правильно? Ведь новые теги HTML5 фактически имеют логический смысл, а на отображение не влияют никак. Я хочу правильно понять HTML5 на примере хотя бы для этого сайта. Возможно, я не совсем верно составил структуру сайта. Наделал много блоков и подблоков.
Я пришел к такому варианту: для шапки добавил блок еще один блок, в который включил несколько блоков.
//ТЕЛО САЙТА
<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>
<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>
<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>
| Vladislav1983 | Ссылка на пост (Смотрели 2428) | 20.08.14 14:20 Ответить |
Не стал создавать новую тему так как заголовок вполне отражает суть моего вопроса.
Хотелось бы сделать структурирование данных 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=]Онлайн кинотеатра[/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. Если видео не имеет срока действия, эту информацию указывать не требуется.