Это в HTML5 правильный код?


Я на проект, предусматривающий преобразование 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]> <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="ie8" lang="en"> <![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('&lt;strong&gt;Print&lt;/strong&gt;');
    }).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">&nbsp;</div>
            <nav>
                <!-- header code goes here - this is actually an include file -->
            </nav>
        </header>       
        <!-- header end -->

        <nav>
            <!-- primary navigation start -->
            <div class="clear">&nbsp;</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>&rarr;</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">&nbsp;</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">&nbsp;</div>

    </div>
    <!-- container end --> 

    <footer>
        © MyCompany, Inc. 2011
    </footer>

</body>
</html>
  • Среди требований проекта, что использование сайтов HTML5, а также поддержка для IE7, IE8 и IE9.
  • У меня есть больше, чем одна книжка. У каждого из них требуют удостоверение личности?
  • Это одна страница из нескольких. Контент на всех страницах отображается внутри элемента div с ID="календарь" тега. Это динамически меняются в зависимости от клиента. Эта страница выглядит как календарь/расписание, на котором клиенты могут назначать встречи.
  • Я упаковала под твержд ения под левой боковой панели в сторону тегов. В окне предупреждение содержание связано с содержанием календарь - он предупреждает клиента, если назначение было в календаре - но не имеет смысла, если он стоял на своем собственном. Это использование в сторону тег правильное в данном случае?
  • Что касается колонтитулов, раньше у меня было ДИВС, которые были стили прикрепленные к ним. Так как я удалил их, теперь я буду добавлять стили верхний и Нижний колонтитулы теги. Это правильный способ сделать это? Если нет, то где стили идут?

Кстати, я исполнитель веб-разработки в этом проекте. Так что я в основном обновлении существующего кода.

Спасибо.

Стивен



403
5
задан 10 июля 2011 в 10:07 Источник Поделиться
Комментарии
1 ответ


  • дайте сайт заголовок в Н1 (наверное, в заголовок); если "headerImg.ПНГ" ваше имя сайта/логотип, заключите его в Н1 , а (и дать название сайта в АЛТ)

  • если ваш "headerImg.ПНГ" является типичным сайта заголовка изображения, вы не должны использовать рис.

  •  
    это не хороший стиль. Можно, наверное, вместо того, чтобы использовать CSS.

  • это не понятно мне, почему у вас одна книжка внутри заголовка и один после. В заголовке не для основной навигации сайта? Тогда вы не должны использовать сча за это

  • : не добавить это на собственном ли (лучше использовать CSS для этого)
  • Предупреждение
    используйте заголовок вместо (можно использовать Н1 здесь)

  • можно заключить "© Название_компании, Инк. 2011" в малый элемент (внутри футер)

Это "имя_приложения" какой-то (основной) контент на странице? В этом случае вы должны дать заголовок здесь и/или заключите его в разрез элемента (секции респ. статьи). В противном случае левую боковую панель сча бы в объеме целой страницы.

Ведь вашу сторону имеет отношение к основному содержанию в секции, в сторону должно быть внутри этого раздела. На данный момент он имеет отношение ко всей странице.



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

Вы не должны использовать идентификатор для сча. Используйте его, если вам нужно/хочу якорей страницы (так что пользователи могут перейти к определенному месту).


Что касается колонтитулов, раньше у меня было ДИВС, которые были стили, присоединенные к ним. Так как я снял их, я теперь добавим стили для заголовка и нижнего колонтитула теги. Это правильный способ сделать это? Если нет, то где стили идут?

Да, вы можете (и вероятно должны) стиль элементы напрямую. Только использовать элемент div для укладки, если необходимо сгруппировать несколько элементов.

2
ответ дан 28 октября 2012 в 09:10 Источник Поделиться