Ошибка a href

Today being March of 2022, I had a specific occurrence of this problem that illustrates how the whole web environment is an «issue» today.

Same requirement: links that go to a section of the page.
It worked on my desktop’s Chrome and Firefox, but not on my client’s and neither on my Android’s Chrome.

After reading multiple threads several times for a few hours, I found out that, in order for this behavior to be the most consistent across browsers and browser versions, you have to implement both things:

• a container with an id, and

• an anchor with a name property,

The most important part is that the anchor tag with a name, must have content inside of it.

So, you have your links

<a href="#page-section">Go to section</a>
<!-- more links -->

And you have the sections you want your links to go to

<div id="page-section">
    <a name="page-section" class="collapse"> placeholder-content (important) </a>
    <!-- your section content -->
</div>

Since you MUST have content inside the anchor with the name, you can then hide it in several ways.
My approach was to just set it’s height to 0.
In order for the height to be effective, the anchor tag’s display property should be set to block or inline-block for example.

.collapse {
    height: 0px;
    overflow: hidden;
    display: block;
}

Finally it all worked, and I have to thank the many developers who struggle with this sort of thing (which should be much easier to do, but, the web…), and all the people who answer questions like this and share their knowledge.

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

Что нужно, чтобы писать код правильно и не допускать ошибок? Знать самые распространённые ошибки и не совершать их.

Вложенный тег закрывается позже родительского

<section> 
  <p>Пример текста на сайте.</section>
</p>

В этом примере элемент <p> закрывается после <section>, хотя является вложенным. Это может привести к проблемам в отображении элементов. Такая ошибка повторяется из-за невнимательности и некорректной структуры HTML-документа. Если вы будете следить за вложенностью, то не ошибётесь, где должен закрываться вложенный тег, а где — его родитель.

Правильный способ вложения этих элементов:

<section>
  <p>Пример текста на сайте.</p>
</section>

Пример корректного написания кода, где видна вложенность и шансов совершить ошибку меньше:

<ul class="user-menu">
  <li>
    <a href="#">Закладки</a>
  </li>
  <li>
    <a href="#">Корзина</a>
  </li>
  <li>
    <a href="#">Оформить заказ</a>
  </li>
</ul>

Нет закрывающего тега

<section class="advantages">
  <h2>Что выделяет нас среди конкурентов?</h2>
  <ul class="advantages-list">
    <li>Используем только природные материалы</li>
    <li>Ежедневные отчёты о ходе работ</li>
    <li>Сами соберём мебель для вас</li>
    <li>Бесплатное гарантийное обслуживание в течение 10 лет</li>
</section>

В примере у списка отсутствует закрывающий тег — </ul>. В этом случае список и все его элементы отразятся некорректно. Будьте внимательны, такие мелкие ошибки могут принести много неприятностей.

Правильный вариант:

<section class="advantages">
  <h2>Что выделяет нас среди конкурентов?</h2>
  <ul class="advantages-list">
    <li>Используем только природные материалы</li>
    <li>Ежедневные отчёты о ходе работ</li>
    <li>Сами соберём мебель для вас</li>
    <li>Бесплатное гарантийное обслуживание в течение 10 лет</li>
  </ul>
</section>

Повторяются идентификаторы

<form action="https://echo.htmlacademy.ru" method="post">
  <table>
    <tr>
      <td>
        <label for="login-field">Ваш логин</label>
      </td>
      <td>
        <input type="text" id="login-field" name="login">
      </td>
    </tr>
  ...

<form action="https://echo.htmlacademy.ru" method="post">
  <table>
    <tr>
      <td>
        <label for="login-field">Ваш пароль</label>
      </td>
      <td>
        <input type="text" id="login-field" name="password">
      </td>
    </tr>

Тег id — это идентификатор, который связывает определённое поле ввода input с текстом подписи. В каждой форме должен быть свой уникальный id, чтобы формой можно было пользоваться и отправлять данные на сервер.

У пароля из примера выше должен быть свой уникальный id:

<form action="https://echo.htmlacademy.ru" method="post">
  <table>
    <tr>
      <td>
        <label for="password-field">Ваш пароль</label>
      </td>
      <td>
        <input type="text" id="password-field" name="password">
      </td>
    </tr>

Неправильное использование семантических тегов

<section class="products">
    <h2>Курс для фронтендеров</h2>
    …
    <div>Купить курс</div>
  </section>

Здесь <div> ошибочно используется вместо кнопки <button>.

Тег <div> — это универсальный контейнер без собственного значения. Он используется, когда нужно разметить некрупный элемент вёрстки или отдельный фрагмент с текстом. Его использование не создаст кнопку, которая может открыть другую страницу или форму для записи.

Кнопка <button> отвечает за выполнение определённой функции: добавить в корзину, купить, отправить, проголосовать и другие.

<section class="products">
  <h2>Курс для фронтендеров</h2>
    …
  <button class="button">
    Купить курс
  </button>
</section>

Семантические теги <header>, <main>, <footer> предназначены для выделения основных структурных блоков на странице сайта, а теги <nav>, <section>, <article>, <aside> — для разметки крупных смысловых разделов. Все теги должны быть использованы в соответствии со своим назначением.

• Что такое семантическая вёрстка и зачем она нужна
• Как сделать кнопку в HTML

Отсутствие атрибута alt для изображений img

<img src="image/logo.png" width="200" height="100">

Атрибут alt задаёт альтернативный текст, описывающий картинку для пользователей, у которых изображение очень долго загружается или вообще недоступно. Также alt помогает сайтам оставаться доступными, например, для категории пользователей, которая не имеет возможности видеть картинки.

<img src="image/logo.png" alt="Логотип" width="200" height="100">

6 простых правил хорошего alt-текста

Определение уровня заголовка по размеру текста на макете

<main>
  <h1>Мы — молодая креативная компания</h1>
  <section class="products">
    <h2>Обувь и аксессуары</h2>
    …
  </section>
  <section class="about">
    <h2>Мы надёжные партнёры и поставщики</h2>
    … 
  </section>
  <section class="companies">
    <h2>Уже много лет мы сотрудничаем с самыми крупными производителями</h2>
    …
  </section>
</main>

Не весь крупный текст — заголовки. Основная роль заголовка — резюмирующая, он сжато передаёт содержание последующего текста. Прочитав заголовок, пользователь должен легко понять, чему посвящён раздел. Также не все заголовки видимые на странице сайта, они могут быть прописаны в разметке и скрыты, так как их задача — помогать структурировать страницу.

<main>
  <h1>Интернет магазин «Фактура»</h1>
  <section class="products">
    <h2>Товары</h2>
    …
  </section>
  <section class="about">
    <h2>О нас</h2>
    …
  </section>
  <section class="companies">
    <h2>Производители</h2>
    …
  </section>
</main>

Также неверно обозначать заголовок не специальными тегами h1-h6, а использовать выделение текста тегами <b> или <strong>.

Включать в main то, что повторяется на других страницах

Это может быть навигация, копирайты и так далее.

<body>
    <h1>Интернет магазин «Фактура»</h1>
  <main>
    <nav class="user-nav">
      <ul class="user-menu">
        <li>
          <a href="https://htmlacademy.ru/blog">Меню</a>
        </li>
        <li>
          <a href="https://htmlacademy.ru/blog">Корзина</a>
        </li>
        <li>
          <a href="https://htmlacademy.ru/blog">Оформить заказ</a>
        </li>
      </ul>
    </nav>  
    <section class="about">
      <h2>О нас</h2>
      …
    </section>
  </main>
  <footer class="main-footer">
      <!-- Подвал сайта -->
  </footer>
</body>

Тег <main> выделяет основное содержание страницы, которое не повторяется на других страницах. И на странице используется один тег <main>. Если навигация одинаковая на всех страницах сайта, то лучше размещать её в <header>.

Неверное обозначение комментариев

Если комментарий неправильно разметить, то он будет виден на странице.

<-- Это комментарий -->

Комментарии начинаются последовательностью <!--, например:

<!-- Это комментарий -->

Не использовать <li> для элементов списка

<ul class="user-menu">
  <div>
    <a href="https://htmlacademy.ru">Закладки</a>
  </div>
  <div>
    <a href="https://htmlacademy.ru">Корзина</a>
  </div>
  <div>
    <a href="https://htmlacademy.ru">Оформить заказ</a>
  </div>
</ul>

Непосредственно в теге <ul> могут находиться только теги <li>, которые обозначают элементы или пункты списка. Пунктов может быть неограниченное количество, но не менее одного.

<ul class="user-menu">
  <li>
    <a href="https://htmlacademy.ru">Закладки</a>
  </li>
  <li>
    <a href="https://htmlacademy.ru">Корзина</a>
  </li>
  <li>
    <a href="https://htmlacademy.ru">Оформить заказ</a>
  </li>
</ul>

Материалы по теме

• Как проверить валидность HTML-разметки
• Как сделать картинку ссылкой
• Флексы для начинающих
• Шаблон HTML-формы

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Большинство ошибок, возникающих при валидации кода можно свести к набору типовых вариантов, зная которые легко понять, на что «намекает» валидатор. В качестве образца возьмем расширение HTML Validator для браузера Firefox, предназначенное для проверки кода и рассмотрим список ошибок и замечаний по коду.

Посмотреть все возможные сообщения валидатора можно по адресу http://www.htmlpedia.org/wiki/HTML_Tidy, далее приведены основные ошибки с их описанием и решением. Зеленым цветом выделен корректный вариант, другой цвет используется для обозначения ошибки.

Notice: entity «…» doesn’t end in «;»

Это замечание возникает при использовании спецсимволов вроде &lt; при отсутствии на конце точки с запятой.

&nbsp;

&nbsp

Решение

Добавьте в конце спецсимвола точку с запятой.

Notice: numeric character reference «…» doesn’t end in ‘;’

Возникает при использовании числовых спецсимволов вроде — когда в конце забыли добавить точку с запятой.

™

&#8482

Решение

Добавьте в конце спецсимвола точку с запятой.

unescaped & or unknown entity «&…»

Символ амперсанда (&) часто применяется в адресах ссылок (атрибут href тега <a>), поскольку он разделяет несколько параметров. Однако амперсанд зарезервирован для спецсимволов вроде &nbsp; поэтому в ссылках необходимо указывать &amp; вместо &.

<a href=»http://www.htmlbook.ru/content/?id=30&amp;text=1″>Ссылка</a>

<a href=»http://www.htmlbook.ru/content/?id=30&text=1″>Ссылка</a>

Решение

Замените & на &amp;.

missing </…>

Отсутствует обязательный закрывающий тег.

<head><title>Заголовок</title></head>

<head><title>Заголовок</head>

Решение

Добавьте закрывающий тег.

missing </aaa> before <bbb>

Ошибка возникает при нарушении порядка тегов, когда блочный тег располагается внутри встроенного. В данном случае блочный тег <bbb> находится внутри встроенного тега <aaa>.

<p><span>Текст</span></p>

<span><p>Текст</p></span>

Решение

Поменяйте расположение тегов — перенесите встроенный тег внутрь блочного.

discarding unexpected <…>

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

<div><div>Текст</div></div>

<div>Текст</div></div>

<div><div>Текст</div>

Решение

В зависимости от ситуации добавьте или удалите открывающий или закрывающий тег.

Notice: nested emphasis …

Контейнер содержит аналогичный тег физического форматирования, который не должен повторяться.

<p><b>Текст</b></p>

<p><b><b>Текст</b></b></p>

Решение

Удалите один из тегов.

replacing unexpected … by </…>

Закрывающий тег не соответствует открывающему тегу.

<p><b>Текст</b></p>

<p><b>Текст</span></p>

Решение

Замените открывающий или закрывающий тег на парный.

… isn’t allowed in <…> elements

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

<head><title>Заголовок</title></head>

<head><body>Текст</body></head>

Решение

Переместите HTML-элемент в правильный раздел.

missing <…>

Нет обязательного тега в структуре элементов. Ошибка, к примеру, может возникнуть при формировании таблицы, когда пропущен тег <tr> и сразу же после <table> следует <td>.

<ol><li>Список</li></ol>

<ol>Список</ol>

Решение

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

Notice: inserting implicit <…>

Сообщение возникает из-за предыдущей ошибки на странице.

Решение

Исправьте предыдущие ошибки.

Insert missing <title> element

В коде не вставлен тег <title>.

<head><title>Заголовок</title></head>

<head></head>

Решение

Добавьте контейнер <title>.

Multiple <frameset> elements

Тег <frameset> используется в документе более одного раза без вложения. Допускается вставлять несколько элементов <frameset>, но вложенных один в другой.

<frameset …><frame …>
<frameset …><frame …></frameset>
</frameset>

<frameset …><frame …></frameset>
<frameset …><frame …></frameset>

Решение

Используйте вложенные теги <frameset>.

<…> is not approved by W3C

Указанный тег не входит в спецификацию HTML.

<span style=»white-space: nowrap;»>текст без переносов</span>

<nobr>текст без переносов</nobr>

Решение

Удалите тег или замените его подходящим эквивалентом.

Error: <…> is not recognized!

Тег не распознан и не входит в спецификацию HTML.

Правильно: <p>Текст</p>

Неверно: <p><adres>Текст</adres></p>

Решение

Удалите неизвестный тег.

Trimming Empty Tag

Контейнер пустой или содержит только пробел.

<p>Текст</p>

<p>&nbsp;</p>

<p></p>

Решение

Удалите тег или добавьте внутрь контейнера текст.

<a> is probably intended as </a>

В закрывающем теге <a> отсутствует слэш.

<a href=»http://htmlbook.ru»>Ссылка на сайт</a>

<a href=»http://htmlbook.ru»>Ссылка на сайт<a>

Решение

Добавьте слэш к закрывающему тегу.

… shouldn’t be nested

Некоторые теги вроде <form> не могут содержать сами себя. Это сообщение также возникает из-за предыдущей ошибки.

<form action=»gb.php» name=»guestbook»></form>
<form action=»gb2.php» name=»guestbook2″></form>

<form action=»gb.php» name=»guestbook»>
<form action=»gb2.php» name=»guestbook2″></form>
</form>

Решение

Удалите вложенные теги или исправьте предыдущую ошибку.

Text found after closing </body>-tag

Теги или текст добавляется после закрывающего тега </body>.

<html>
 <head><title>Заголовок</title></head>
 <body><p>Основной текст</p></body>
</html>

<html>
 <head><title>Заголовок</title></head>
 <body><p>Основной текст</p></body>
 <b>Привет!</b>
</html>

Решение

Удалите текст после тега </body> или перенесите этот тег в конец текста.

Adjacent hyphens within comment

Комментарии в коде HTML определяются конструкцией вида <!— комментарий —>. Если в тексте комментария подряд идет два и более дефиса, возникает ошибка.

<!— Комментарий — заголовок —>

<!— комментарий —>

<!— Комментарий — тело документа —>

Решение

Удалите лишние дефисы.

SYSTEM, PUBLIC, W3C, DTD, EN must be upper case

Элемент <!DOCTYPE> указан неверно, в частности следующие атрибуты необходимо писать в верхнем регистре: SYSTEM, PUBLIC, W3C, DTD, EN.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<!doctype html public «-//w3c//dtd html 4.01 Transitional//en» «http://www.w3.org/TR/html4/loose.dtd»>

Решение

Пишите <!DOCTYPE> корректно.

Warning: missing <!DOCTYPE> declaration

Не указан элемент <!DOCTYPE>.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<title>Заголовок</title>
</head>
<body>
<p>Основной текст</p>
</body>
</html>

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

Решение

Поместите элемент <!DOCTYPE> в самую первую строку кода документа.

Too much <…>-elements

Повторяется тег, который в коде должен быть только один. К таким тегам относится <html>, <head>, <title> и <body>.

<head>
<title>Заголовок</title>
</head>

<head>
<title>Заголовок</title>
<title>Название статьи</title>
</head>

Решение

Удалите повторяющийся тег.

<…> inserting «…» attribute

Не указан обязательный атрибут для данного тега.

<style type=»text/css»>

<style>

Решение

Проверьте тег и добавьте недостающие атрибуты.

… attribute … lacks value

Атрибут тега не содержит обязательное значение или оно написано с синтаксической ошибкой.

<a href=»link.html»>Ссылка</a>

<a href>Ссылка</a>

Решение

Проверьте атрибуты тега и добавьте недостающие значения.

… attribute «…» has invalid value «…»

Атрибут содержит некорректное значение. Ошибка проявляется в тех случаях, когда в значении вместо текста пишется число и наоборот. Так, атрибуты id и name должны начинаться с символа ([A-Za-z]) и могут содержать цифры ([0-9]), дефис (-), подчеркивание (_), двоеточие (:) и точку (.). Значение ширины и высоты в атрибутах тегов не должно содержать ничего, кроме цифр ([0-9]) и процентов (%).

<div id=»layer1″>Слой 1</div>

<img src=»images/pic.gif» width=»200″ height=»120″>

<div id=»2layer»>Слой 2</div>

<img src=»images/pic.gif» width=»200px» height=»120px»>

Решение

Проверьте атрибут тега и измените его значение.

<…> missing > for end of tag

Ошибка может возникать в двух случаях: некорректно написан тег, что происходит, когда забыли добавить закрывающую скобку и применение > вместо использования спецсимвола.

<p>Пример текста</p>

<p>Для случая 0&lt;p рассмотрим следующий пример.</p>

<p Пример текста</p>

<p>Для случая 0<p рассмотрим следующий пример.</p>

Решение

Вставьте отсутствующую закрывающую скобку.
Замените < на &lt;.

<…> proprietary attribute «…»

Тег содержит атрибут, специфичный только для браузера Internet Explorer или другого и не входящий в спецификацию. Примером является атрибут height тега <table>.

Список всех атрибутов, входящих в спецификацию HTML приведен по адресу http://www.w3.org/TR/html4/index/attributes.html

<table style=»height: 100%»>

<table height=»100%»>

Решение

Список наиболее характерных атрибутов тегов приведен в табл. 14.1.

… proprietary attribute value «…»

Значение атрибута не входит в спецификацию HTML и является специфичным для браузера Internet Explorer или другого. Например, значение align=»absmiddle» тега <img> недопустимо.

<p><img src=»hello.gif» alt=»Привет» align=»middle»></p>

<p><img src=»hello.gif» alt=»Привет» style=»vertical-align: middle»></p>

<p><img src=»hello.gif» alt=»Привет» align=»absmiddle»></p>

Решение

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

… dropping value «…» for repeated attribute «…»

Атрибут применяется в теге больше одного раза.

<img src=»image.jpg»>

<img src=»image.jpg» src=»image.jpg»>

Решение

Удалите повторяющийся атрибут.

… unexpected or duplicate quote mark

Отсутствует открывающая или закрывающая кавычка в атрибуте тега.

<img src=»image.jpg»>

<img src=image.jpg»>

Решение

Добавьте парную кавычку к значению атрибута.

… attribute with missing trailing quote mark

Тег содержит атрибут, в котором задано неверное количество кавычек.

<p id=»my_id»>

<p id=»my_id»»>

Решение

Добавьте или удалите одну из кавычек.

… id and name attribute value mismatch

Ошибка возникает, когда значения атрибутов id и name не совпадают между собой, что приводит к конфликту при обращении к свойствам элемента через скрипты.

<a name=»elm» id=»elm»>

<a id=»elm»>

<a name=»abcdef» id=»db1″>

Решение

Удалите один из атрибутов или сделайте значения атрибутов name и id одинаковыми.

Notice: replacing <…> by <…>

Ошибка возникает в следующих случаях:

• неверный порядок тегов;
• добавлен лишний закрывающий тег;
• имеется открывающий тег без наличия обязательного закрывающего.

<p>Текст</p><br>

<p>Текст</p></p>

<p>abc<br><table>…</table></p>

Решение

Измените порядок тегов или удалите один из открывающих или закрывающих тегов.

… anchor «…» already defined

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

<form name=»my_form1″ action=»test1.php»></form>
<form name=»my_form2″ action=»test2.php»></form>

<form name=»my_form» action=»test1.php»></form>
<form name=»my_form» action=»test2.php»></form>

Решение

Выберите другое имя или измените предыдущие имена таким образом, чтобы они не совпадали.

<…> is probably intended as </…>

Тег повторяется дважды в коде HTML, тогда как подобный тег не должен содержать сам себя.

<em>Привет, мир!</em>

<em>Привет<em>, мир!</em></em>

Решение

Удалите один из тегов.

<…> lacks «…» attribute

Требуется обязательный атрибут тега, который, тем не менее, отсутствует.

<form action=»my_action.php»>

<form>

Решение

Добавьте недостающий атрибут к тегу.

Все, кто каждый день работает с HTML должны быть очень внимательны, так как соблюдать все правила HTML не так просто. Это очень важно, так как валидатор HTML находит все, даже незначительные, огрехи, и вы получаете код страницы с ошибками. Сегодня мы постараемся обратить внимание на наиболее распространенные из них. Уверен, что предложенные рекомендации будут очень полезны многим, а в особенности начинающим, разработчикам. Итак, добро пожаловать под

Неправильная вложенность HTML тегов

Очень важно правильно закрывать все HTML теги. Они должны закрываться в обратном порядке по сравнению с тем, как были открыты. Большинство новичков не уделяет этому должного внимания. Если теги закрыты в неправильном порядке, то вы получите ошибки при валидации, а некоторые стили могут быть не использованы. Будьте внимательны!

Ошибка
	<p><a>Ваш текст</p></a>
Привильно
	<p><a>Ваш текст</a></p>

Использование блочных элементов внутри строчных

Все, кто хоть немного использовал HTML на практике знаю, что элемент может отображаться или в качестве блока или же как строка. Блочные элементы включая абзацы и разделы должны содержать строчные. Это логичная струтура документа, так что убедитесь, что ваш код соответствует ей.

Популярные строчные элементы: <span>, <aм, <img />, <strong>, <em>
Популярные блочные элементы: <div>, <h1>…<h6>, <p>, <ul>, <ol>, <table>, <form>

Ошибка
	<a href="#"><h1>Ошибка</h1></a>
Привильно
	<h1><a href="#">По стандарту</a></h1>

Неправильное использование списков

Тэги OL и UL могут быть использованы для отображения элементов списка множеством способов. Так же вы получите массу дополнительных преимуществ. Теги списков очень помагают форматировать информацию для ее корректного отображения. Я рекомендую вам отказаться от использования кавычек при создании списков. Поисковые системы так же хорошо относятся к использованию списков, так как это помогает структурировать информацию на странице. Пользуйтесь стандартными тегами вместо хаков.

Использование стилей в коде

Вы наверняка уже слышали, что использование стилей в коде это плохо. Вы не задумывались, почему это так? Причина в том, что CSS и семантический HTML задуманы именно для отделения контента от его оформления. Такая модель обеспечивает гораздо большую гибкость и удобство работы с документами.

Ошибка
	<p style="font-weight: 300; font-size: 16px;">Ваш замечательный текст</p>

Игнорирование тегов заголовков

Теги заголовков предназначены для того, что бы выделить заголовки в отдельный раздел на странице. Стандарт предполагает использовать для этого теги от <h1> до <h6>. Оформление и расположение текста в них может быть любым, но пусть документ будет структурирован верно!

Ошибка
	<strong>Ваш замечательный заголовок</strong><p>Текст вашей статьи.</p>
Привильно
	<h1>Ваш замечательный заголовок</h1><p>Текст вашей статьи.</p>

Неправильное использование тега FORM

Мы все часто ошибаемся создавая формы и таблицы в HTML. Помните, что таблицу нужно создавать уже внутри формы!

Ошибка
	<table><form><tr><td>...</td></tr></form></table>
Привильно
	<form><table><tr>...</tr></table></form>

Неиспользование аттрибута ALT

При работе с изображениями вы должны использовать аттрибут ALT. Это необходимо, так как пользователи смогут определить, что же должно быть на месте изображения, даже если используют очень медленное подключение. Это значение должно описывать суть используемого изображения. Никогда не используйте alt=«картинка». Если же изображение выполняет чисто декоративные функции, то используйте alt=»*».

Ошибка
	<img src="tree.gif" alt="" />
Привильно
	<img src="tree.gif" alt="Столетный баобаб" width="78" height="102" />

Неправильные теги для выделения жирным или курсивом

Не смотря на то, что <b> и <i> в большинстве случаев отлично справляются со своими задачами, использование стилей для оформления текста позволяет получить гораздо большую гибкость оформления. Если же тег должен просто подчеркивать значение определенной части текста, то используйте тэги <strong> и <em>.

Бесполезное использование переноса строки

Тег <br /> может использоваться один раз в строке для того, что бы следующее предложение началось на следующей строчке. Многие используют этот тэг для того, что бы создать расстояние между элементами. Это использование не соответствует стандартам.

Ошибка
	Первый абзац.
	<br/>
	<br/>
	<br/>
	Продолжение текста.
Привильно
	<p>Первый абзац.</p>
	<p>Продолжение текста.</p>