Пожалуйста, помогите исправить HTML

Поэтому мне сказали, что следующий код не очень хорошо написан на HTML. Может кто-нибудь сказать мне, что с ним не так и исправить? Он отлично работает в моем браузере, и Visual Studio не выдает ошибку. Пожалуйста, сообщите мне, если у меня есть неправильный способ написания этого шаблона или если это подходит.

    <style type="text/css">
#home { z-index: 100; position: absolute; color: #003366; font-size: 24px; margin-left: 25px; top: 18px; margin-right: 25px; visibility: hidden; }
#aboutUs { z-index: 100; position: absolute; color: #003366; font-size: 24px; margin-left: 25px; top: 18px; margin-right: 25px; visibility: visible; }
#services { z-index: 100; position: absolute; color: #003366; font-size: 24px; margin-left: 180px; top: 18px; margin-right: 25px; visibility: visible; }
#support { z-index: 100; position: absolute; color: #003366; font-size: 24px; margin-left: 325px; top: 18px; margin-right: 25px; visibility: visible; }
#contactUs { z-index: 100; position: absolute; color: #003366; font-size: 24px; margin-left: 460px; top: 18px; margin-right: 25px; visibility: visible; }
#information { z-index: 100; position: absolute; color: #003366; font-size: 24px; margin-left: 600px;  top: 18px; margin-right: 25px; visibility: visible; }
#sponsored { z-index: 100; position: absolute; color: #003366; font-size: 24px; margin-left: 755px; top: 18px; margin-right: 25px; visibility: visible; }
#reviews { z-index: 100;  position: absolute; color: #003366; font-size: 24px;  margin-    left: 910px; top: 18px;  margin-right: 25px; visibility: visible; }
</style>

<!DOCTYPE html>
<html> 
    <head>
        <!-- Cheange Title of Webpage below -->
        <title>DTSU - Home</title>
        <link type="text/css" rel="stylesheet" href="stylesheet.css" />
    </head>
    <body>
        <!-- Div Buttons for Pages -->
        <p>
            <div id="mainNavD">
                <a href="home.html" id="home">Home</a>
                <a href="aboutUs.html" id="aboutUs">About Us</a>
                <a href="services.html" id="services">Services</a>
                <a href="support.html" id="support">Support</a>
                <a href="contactUs.html" id="contactUs">Contact Us</a>
                <a href="information.html" id="information">Information</a>
                <a href="sponsored.html" id="sponsored">Sponsored</a>
                <a href="reviews.html" id="reviews">Reviews</a>
                <img src="pictures/mainNavBar.jpg"/>
            </div>
        </p>
        <!-- Header and Logo Combo -->
        <div id="headerD">
            <img src="pictures/header.jpg" />
            <div id="logoD"></div>
        </div>

        <!-- Home Page Content -->
    </body>
</html>

Я действительно ценю любую помощь. благодарю вас!

Источник

6 ответов

Решение

Проверьте это с помощью валидатора w3c

Перейти к следующему

http://validator.w3.org/

Скопируйте и вставьте свой HTML и просмотрите ошибки. В вашем коде 3 ошибки и 7 предупреждений.

Источник

Попробуйте использовать alt в своем изображении, это может помочь с SEO, а также с некоторыми браузерами.

Пример:

<img src="smiley.gif" alt="Smiley face" height="42" width="42">
Источник

Не совсем HTML, но с точки зрения CSS было бы неплохо, если бы все общие свойства были в одном общем классе, а не повторялись снова и снова для каждого идентификатора.

Например, CSS:

.common { z-index: 100;  position: absolute; color: #003366; font-size: 24px; top: 18px;  margin-right: 25px; visibility: visible; }
#reviews { margin-left: 910px; }

И HTML:

<a href="reviews.html" id="reviews" class="common">Reviews</a>

Может быть, эта ссылка может помочь; http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/

Источник

Чтобы быть правильно сформированным HTML, все должно быть в пределах html теги, кроме DOCTYPE,

Источник

Всегда лучше, чтобы все было отделено, ваша таблица стилей в другом файле, javascript или Jquery в другом файле, включая все inline-style теги в вашем HTML только тогда, когда вам нужно переопределить некоторые стили на вашей странице. Он сохраняет чистоту и поможет вам добавить дальнейшие функции в будущем.

Я бы предложил иметь отдельные файлы вашего Style а также Script если таковые имеются и включить в ваш <head></head> пометить вместо

А для правильного, правильно оформленного документа используйте ссылку, предоставленную Atul.

Источник

Не position: absolute элементы, если это не последнее средство. Вам не нужно visibility: visible; на элементы, которые не будут скрыты или не переопределяют групповой класс hidden, Кроме того, если вы собираетесь использовать одни и те же атрибуты для большинства из них, лучше назначить им имя класса и добавить туда эти атрибуты один раз.

Затем вы можете добавить другой класс для изменения значений или настроить таргетинг на id у них есть. Положить ваши <style></style> внутри <head> тег, и если вы уже связываете внешнюю таблицу стилей, вы можете также поместить эти стили в эту таблицу стилей вместо применения их непосредственно к HTML.

Также не оборачивайте <div id="mainNavD"> и это содержимое в <p> тег. Тебе это не нужно p совсем.

Источник
Другие вопросы по тегам