HTML-код обзор шаблона для сайта - это нормально для HTML5?


Пишу новый сайт, у кого-нибудь есть какие-либо комментарии на HTML здесь? Это все семантически верно? Спасибо! Это будет в основном шаблоне, поэтому я хочу убедиться, что это идеально.

<!DOCTYPE html>
<html>
<head>
    <title>Welcome to Scirra.com</title>
    <meta name="description" content="Construct 2 is a free open source HTML5 games creator." />
    <meta charset="UTF-8" />

    <link rel="stylesheet" href="css/default.css" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>

    <script type="text/javascript" src="plugins/coin-slider/coin-slider.min.js"></script>
    <link rel="stylesheet" href="plugins/coin-slider/coin-slider-styles.css" type="text/css" />

    <link href="plugins/jquery.twit.0.2.0/twit.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="plugins/jquery.twit.0.2.0/twit.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#coin-slider').coinslider({ width: 470, height: 261, spw: 8, sph: 4, delay: 7000, effect: 'straight', hoverPause: true });

            $('#twitterFeed').twit('Scirra', {
              limit: 5,
              label: '',
              icon: false,
              count: 20
            });
        });
    </script>

    </head>

<body>

<div class="topBar"></div>
<div class="mainBox">
    <div class="headWrapper">
        <div class="searchBox">
            <div class="searchContent">
                <input type="text" id="SearchBox" />
                <div class="s searchIco"></div>
            </div>
        </div>
    </div>
    <div class="topMenu">
        <a href="#" class="topNormal">Main Link</a>
        <a href="#" class="topNormal">Mainy Link</a>
        <a href="#" class="topSelWrapper">Main Link</a>
        <a href="#" class="topNormal">Main Link</a>
    </div>
    <div class="subMenu">
        <a href="#" class="subSelWrapper">Another Sub Link</a>
        <a href="#" class="subNormal">Sub Link</a>
        <a href="#" class="subNormal">Sub Link</a>
        <a href="#" class="subNormal">Sub Link</a>
        <a href="#" class="subNormal">Sub Link</a>
    </div>
    <div class="contentWrapper">
        <div class="wideCol">
            <div class="s slideShowWrapper">
                <div id='coin-slider'>
                    <a href="#" target="_blank">
                        <img src='images/screenshot1.jpg' >
                        <span>
                            Scirra software allows you to bring your imagination to life
                        </span>
                    </a>
                    <a href="#">
                        <img src='images/screenshot2.jpg' >
                        <span>
                            Export your creations to HTML5 pages
                        </span>
                    </a>
                    <a href="#">
                        <img src='images/screenshot3.jpg' >
                        <span>
                            Another description of some image
                        </span>
                    </a>
                    <a href="#">
                        <img src='images/screenshot4.jpg' >
                        <span>
                            Something motivational to tell people
                        </span>
                    </a>
                </div>
            </div>
            <div class="newsWrapper">
                <h1>Latest from Twitter</h1>
                <div id="twitterFeed"></div>
            </div>
        </div>
        <div class="thinCol">
            <h1>Main Heading</h1>
            <p>Some paragraph goes here.  It tells you about the picture.  Cool!  Have you thought about downloading Construct 2?  Well you can download it with the link below.  This column will expand vertically.</p>
            <a class="blueLinkBox" href="#">Learn More</a><div class="clear"></div>
            <h2>Help Me!</h2>
            <p>This column will keep expanging and expanging.  It pads stuff out to make other things look good imo.</p>
            <a class="blueLinkBox" href="#">Learn More</a><div class="clear"></div>
            <h2>Why Download?</h2>
            <p>As well as other features, we also have some other features.  Check out our <a href="#">other features</a>.  Each of our other features is really cool and there to help everyone suceed.</p>
            <a href="#" class="s downloadBox">
                <div class="downloadHead">Download</div>
                <div class="downloadSize">24.5 MB</div>
            </a>

        </div>
        <div class="clear"></div>

        <h1>This Weeks Spotlight</h1>
        <div class="halfColWrapper">
            <img src="images/spotlight1.png" class="spotLightImg" />
            <p>Our spotlight member this week is Pooh-Bah.  He writes good stuff.  Read it.</p>
            <a class="blueLinkBox" href="#">Learn More</a>
        </div>
        <div class="halfColSpacer">&nbsp;</div>
        <div class="halfColWrapper">
            <img src="images/spotlight2.png" class="spotLightImg" />
            <p>Killer Bears is a scary ass game from JimmyJones.  How many bears can you escape from?</p>
            <a class="blueLinkBox" href="#">Learn More</a>
        </div>
        <div class="clear"></div>
    </div>
</div>

<div class="footer">
    <div class="footerContent">
        <div class="footerItem">
            <h3>Community</h3>
            <a href="#">The Blog</a><br />
            <a href="#">Community Forum</a><br />
            <a href="#">RSS Feed</a><br />
            <a class="s footIco facebook" href="http://www.facebook.com/ScirraOfficial" target="_blank"></a>
            <a class="s footIco twitter" href="http://twitter.com/Scirra" target="_blank"></a>
            <a class="s footIco youtube" href="http://www.youtube.com/user/ScirraVideos" target="_blank"></a>
        </div>
        <div class="footerItem">
            <h3>About Us</h3>
            <a href="#">Contact Information</a><br />
            <a href="#">Advertising</a><br />
            <a href="#">History</a><br />
            <a href="#">Privacy Policy</a><br />
            <a href="#">Terms and Conditions</a>
        </div>
        <div class="footerItem">
            <h3>Want to Help?</h3>
            You can contribute to Scirra software as it is <a href="#">Open Source</a>.  We welcome all contributions, and there are lots of ways to join in!<br />
            <div class="ralign">
            <a href="#"><strong>Learn More</strong></a>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>
<div class="copyright">
    Copyright &copy; 2011 Scirra.com.  All rights reserved.
</div>
</body>
</html>

Отлично смотрится во всех браузерах, но хотите проверить его действительный разметки и как это может быть.



1236
12
задан 20 февраля 2011 в 08:02 Источник Поделиться
Комментарии
4 ответа

Если вы собираетесь с HTML5, я хотел бы предложить несколько вещей:


  1. Потерять тип="текст/JavaScript" из тегов script - вы не нуждаетесь в них в HTML5

  2. То же самое с Тип="текст/CSS в" по тегам ссылке

  3. Держать себя-закрытие синтаксис XML последовательной на некоторые теги у вас есть закрытие />, на кое-что нет (неважно в какую сторону, просто сделать его совместимым)

  4. Рассмотреть вопрос о размещении .JS файлы в нижней части документа - таким образом, страницы могут начать рендеринг, прежде чем он скачал их все. Часто они необходимы для пост-рендеринг все равно функции - так что пользователи одолжение и положить их в нижней части документа.

17
ответ дан 20 февраля 2011 в 11:02 Источник Поделиться

Некоторые вещи, которые приходят на ум:


  • Нагрузки .ресурсов CSS до .Яш ресурса для более быстрой загрузки

  • Не использовать встроенный JavaScript

  • Использовать
      с
    • элементы для меню, это семантически более правильно

    • Всегда используйте тег alt на

    • Не использовать теги, использовать если мы говорим о тексте. Использовать CSS (дисплей:блок) если вы хотите, чтобы заставить элемент на следующей строке.

    • Использовать идентификаторы, когда есть только одно вхождение на странице, например

10
ответ дан 20 февраля 2011 в 09:02 Источник Поделиться

Похоже, много лишних

ы, насколько я могу видеть. Почему у вас есть .футер и .footerContent? Вообще
без братьев и сестер может быть убит.

И что заголовок выглядит действительно вышла из-под контроля. Никаких оснований для упаковки значка ввода и поиска в 4 одиноко

ы?

Вы также должны избегать этого: класс="blueLinkBox". Ведь что происходит, когда вы изменить свой дизайн, чтобы быть оранжевым? Вы бы тогда переименовать все ваши ссылке коробок, или просто попробуйте вспомнить, что blueLinkBox эти оранжевые ящики? Название классы по их содержанию. .importantLink или .readMoreLink может быть лучше имена.

У вас также есть какие-то ссылки без какой-либо контент или название атрибута, а это плохо для читателей, SEO и другие вещи, которые не могут "видеть" ваш сайт.

Это не хорошая идея, чтобы иметь несколько

s на одной странице. Есть, конечно, исключения (например: прокрутка для навигации), но на этой странице не подходит... потому что то, что вы утверждаете теперь, что "на этой неделе в центре внимания" так же важен, как основные черты вашего продукта, который, как я предполагаю (надеюсь) дело не в этом.

6
ответ дан 20 февраля 2011 в 09:02 Источник Поделиться

Валидатор говорит, что есть много значений метатегов пропавших без вести (около 10) и что там 2 начиная теги.

0
ответ дан 26 февраля 2011 в 09:02 Источник Поделиться