Я работаю над проектом по преобразованию HTML-кода в HTML5, и мне хотелось бы получить отзыв о том, правильно я пишу или нет.
Вот мой урезанный код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title Goes Here</title>
<!--[if IE 9]>
<script src="/jsp/fileFolderPath/js/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" href="/jsp/fileFolderPath/css/global.css">
<!--[if IE 7]> <body class="ie7"> <![endif]-->
<!--[if IE 8]> <body class="ie8"> <![endif]-->
<script src="/jsp/fileFolderPath/js/jquery-1.4.2.min.js"></script>
<script src="/jsp/fileFolderPath/js/jquery.colorbox-min.js"></script>
<script src="/jsp/fileFolderPath/js/tip.js"></script>
<script src="/jsp/fileFolderPath/js/jquery.calendar.js"></script>
<script src="/jsp/fileFolderPath/js/modernizer-2.0.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#whatsthis').mouseover(function(){
tooltip.show('Tooltip text goes here');
}).mouseout(function(){
tooltip.hide();
});
$('#printthis').mouseover(function(){
tooltip.show('<strong>Print</strong>');
}).mouseout(function(){
tooltip.hide();
}).click(function(){
printCalendar();
});
});
</script>
</head>
<body>
<!-- container start -->
<div id="container">
<!-- header start -->
<header>
<figure>
<img src="headerImg.png" width="600" height="100" alt="header image">
</figure>
<div class="clear"> </div>
<nav>
<!-- header code goes here - this is actually an include file -->
</nav>
</header>
<!-- header end -->
<nav>
<!-- primary navigation start -->
<div class="clear"> </div>
test
<!-- primary navigation end -->
</nav>
<!-- Application Name start -->
<div id="applicationName">mySchedule <a href="#" id="whatsthis"><img src="images/what-this.png" width="21" height="21" alt=""></a>
<!-- breadcrumbs start -->
<nav>
<div id="breadcrumbs">
<ul>
<li><a href="#MyConnections">Home</a></li>
<li>→</li>
<li><a href="#Exhibitors">mySchedule</a></li>
</ul>
</div>
</nav>
<!-- breadcrumbs end -->
</div>
<!-- Application Name end -->
<!-- Features Toolbar start -->
<div id="features" class="right">
<div class="featuresAddOn"> <a href="#" id="printthis">Print mySchedule</a></div>
</div>
<!-- Features Toolbar end -->
<div class="clear"> </div>
<!-- Left Side Bar start -->
<div class="left">
<nav>
<!-- Application Navigation start -->
<div id="appMenuContainer">
<div class="appMenu">
<h4 class="firstitem"><a href="/jsp/Myclients/Myclients.jsp?action=ClientMyMatchTab">Client Matching</a></h4>
</div>
<div class="appMenu">
<h4 id="MyClient" class="menuitem header"><span><a href="/jsp/Myclients/Myclients.jsp">MyClients</a></span></h4>
</div>
<div class="appMenu">
<h4 id="MySched" class="menuitem header"> <span><a style ="cursor:default">MySchedule</a></span></h4>
</div>
<div class="appMenu">
<h4 id="MyHel" class="menuitem lastitem"> <span><a href="/jsp/Myclients/help.jsp">Help</a></span></h4>
</div>
</div>
<!-- Application Navigation end -->
<nav>
<!-- Alert Box start -->
<aside>
<div id="AlertBox" class="margin-bottom margin-top">
<div class="title">Alert</div>
<div class="contentAlert lastItem"> You have <span class="count New_Time">0</span> New Time Proposed Notifications. </div>
</div>
</aside>
<!-- Alert Box ends -->
</div>
<!-- Left Side Bar end -->
<section>
<!-- Content -->
<div id="calendar"></div>
</section>
<div class="clear"> </div>
</div>
<!-- container end -->
<footer>
© MyCompany, Inc. 2011
</footer>
</body>
</html>
Среди требований проекта: использование веб-сайта HTML5 и поддержка IE7, IE8 и IE9.Вот почему я использую условные обозначения для таблиц стилей. С указанными требованиями, это правильный подход?
HTML находится на странице JSP, которая содержит много динамического кода.Я не включил это в пример.
У меня есть 3 области навигации - одна в заголовке, панель инструментов (под верхним заголовком) и боковая навигация. Нужны ли каждому из них идентификаторы?
Боковая навигация такая же, как у хлебных крошек - , поэтому следует ли включать хлебные крошки в теги nav?
Это одна страница из нескольких.Содержимое всех страниц отображается в теге div id = "calendar".Это динамически заменяется в зависимости от клиента.Эта страница выглядит как календарь / расписание, для которого клиенты могут назначать встречи.Другие страницы выглядят как списки таблиц / корзины покупок или формы.Помимо обновления тегов до HTML5, почти весь контент создается с использованием div, поэтому я намерен оставить их как таковые.Я думаю, что все они должны быть заключены в теги раздела, хотя. С этим описанием, уместно ли здесь использовать тег раздела?
Я включил окно предупреждения под левой боковой навигацией в сторонние теги.Содержимое окна оповещения связано с содержимым календаря - оно предупреждает клиента, если в календаре была назначена встреча, - но не имеет смысла, если оно стоит само по себе. Это правильно?
Кстати, я подрядчик по веб-разработке, привлеченный к этому проекту.Поэтому я в основном обновляю существующий код.
Я просмотрел другие посты, другие онлайн-ссылки и пару книг.Я думаю, что я на правильном пути.Я просто хотел бы получить подтверждение, прежде чем двигаться вперед.
Спасибо.
Стивен
ОБНОВЛЕНИЕ: ОК.Я сделал обновления моего кода выше на основе всех рекомендаций, и я провел его через валидатор (успешно).
Я все еще немного не уверен насчет трех вещей:
Если я правильно понимаю, HTML5Shiv - это обходной путь, который включает элементы HTML5 в более старых версиях IE.Modernizr делает нечто подобное и обрабатывает элементы HTML5 и CSS3.Я не уверен, поможет ли это с альтернативными таблицами стилей, которые у меня есть для IE7 и IE8.Они существуют для проблем отображения / проектирования, поэтому я считаю, что мне нужно продолжать ссылаться на них, пока код, использующий эти классы, не будет обновлен.Они не имеют ничего общего со спецификациями CSS3.
Саид упоминал с помощью тега figure.Пришлось искать это.Первое изображение, которое я использую, это логотип заголовка, который находится на всех страницах.Похоже, этот тег будет работать для логотипа заголовка.С другой стороны, я бы не использовал его, скажем, для справочной ссылки (what-this.png), которая представляет собой просто значок вопросительного знака. Правильно?
Что касается верхнего и нижнего колонтитула, я поместил элементы div внутри тегов, потому что к ним прикреплены стили.Поскольку я удалил их, я теперь добавлю стили в теги верхнего и нижнего колонтитула. Это правильный способ сделать это?Если нет, то куда деваются стили?
Спасибо.