Ошибка font элемент устарел вместо этого используйте css

HTML Checking for Large Sites

Rocket Validator integrates the W3C Validator HTML checker
into an automated web crawler.

• font

• obsolete

• css

The <font> element, used to define the font face, size and color in previous versions of HTML, is no longer valid in HTML5. Instead, you should rely on CSS styles.

For example, you can define a font size of 12px, bold text with inline styles like this:

<p style="font-size: 12px; font-weight: bold;">some text</p>

Learn more:

• MDN: CSS font

Related W3C validator issues

I am just curious really and hope that someone can reveal the method in the madness of the W3C.
What is the reason for not supporting this element in the latest HTML5 standard?
I know the element was deprecated in HTML 4.01, but I don’t understand why.

It seemed perfectly logical to me, you have a a paragraph of text and just wish to change the font, or to identify, lines or words from it using the font element, now the only way to do the job is with the span element.
It seems strange to me that there are so many ways to create a block of text, using div, section, or just paragraph, but to wrap a few keywords or any inline content, there is only the span element.

And really, one little element can’t do any harm, so why not still support it?

Thank you,

Luke

John

12.3k12 gold badges93 silver badges161 bronze badges

asked Sep 25, 2013 at 9:17

Luke T O’BrienLuke T O’Brien

2,4753 gold badges25 silver badges36 bronze badges

5

In short:

HTML is a markup language. Use it to mark up the different sections of your content using the most semantically accurate element.

CSS is used for styling purposes, such as changing colors, sizes, fonts, etc.

The <font> element was used for styling, not marking up a section of your content. That’s why it’s deprecated, along with other out-of-place elements such as <center>.

John

12.3k12 gold badges93 silver badges161 bronze badges

answered Sep 25, 2013 at 9:34

Nils KasperssonNils Kaspersson

8,3963 gold badges26 silver badges29 bronze badges

14

HTML tags describe their contents. To mark up your HTML you should use CSS. In such way you can create different skins for the same information. Since the font tag serves purely visual purpose, it has no place in HTML; it does not describe the contents.

With describing contents I mean: «This is paragraph of text / this is a time / this is a link to another page / this is the title of this article / this is a list of related terms / this is a table containing test results» etc.

Read up on semantic HTML, it will hopefully make things more clear for you.

answered Sep 25, 2013 at 9:22

Marijke LuttekesMarijke Luttekes

1,2341 gold badge12 silver badges27 bronze badges

2

There are lots of ways to wrap inline content, but only one of them has no semantics associated with it (span). Of the list of block wrappers you gave, only div has no semantics associated with it.

The old font element has no semantics associated with it, so it contributes as much as span and can be replaced by span.

The idea is that you pick the element that describes why the text looks different (<em>, <cite>, <dfn>, etc) and then apply CSS to make it look the way you want.

And really, one little tag can’t do any harm, so why not still support it?

It is supported, the rendering rules describe how browsers should handle the font element. This is for backwards compatibility. Authors are just forbidden from using it (since it does no good).

answered Sep 25, 2013 at 9:28

QuentinQuentin

891k122 gold badges1190 silver badges1309 bronze badges

I am just curious really and hope that someone can reveal the method in the madness of the W3C.
What is the reason for not supporting this element in the latest HTML5 standard?
I know the element was deprecated in HTML 4.01, but I don’t understand why.

It seemed perfectly logical to me, you have a a paragraph of text and just wish to change the font, or to identify, lines or words from it using the font element, now the only way to do the job is with the span element.
It seems strange to me that there are so many ways to create a block of text, using div, section, or just paragraph, but to wrap a few keywords or any inline content, there is only the span element.

And really, one little element can’t do any harm, so why not still support it?

Thank you,

Luke

John

12.3k12 gold badges93 silver badges161 bronze badges

asked Sep 25, 2013 at 9:17

Luke T O’BrienLuke T O’Brien

2,4753 gold badges25 silver badges36 bronze badges

5

In short:

HTML is a markup language. Use it to mark up the different sections of your content using the most semantically accurate element.

CSS is used for styling purposes, such as changing colors, sizes, fonts, etc.

The <font> element was used for styling, not marking up a section of your content. That’s why it’s deprecated, along with other out-of-place elements such as <center>.

John

12.3k12 gold badges93 silver badges161 bronze badges

answered Sep 25, 2013 at 9:34

Nils KasperssonNils Kaspersson

8,3963 gold badges26 silver badges29 bronze badges

14

HTML tags describe their contents. To mark up your HTML you should use CSS. In such way you can create different skins for the same information. Since the font tag serves purely visual purpose, it has no place in HTML; it does not describe the contents.

With describing contents I mean: «This is paragraph of text / this is a time / this is a link to another page / this is the title of this article / this is a list of related terms / this is a table containing test results» etc.

Read up on semantic HTML, it will hopefully make things more clear for you.

answered Sep 25, 2013 at 9:22

Marijke LuttekesMarijke Luttekes

1,2341 gold badge12 silver badges27 bronze badges

2

There are lots of ways to wrap inline content, but only one of them has no semantics associated with it (span). Of the list of block wrappers you gave, only div has no semantics associated with it.

The old font element has no semantics associated with it, so it contributes as much as span and can be replaced by span.

The idea is that you pick the element that describes why the text looks different (<em>, <cite>, <dfn>, etc) and then apply CSS to make it look the way you want.

And really, one little tag can’t do any harm, so why not still support it?

It is supported, the rendering rules describe how browsers should handle the font element. This is for backwards compatibility. Authors are just forbidden from using it (since it does no good).

answered Sep 25, 2013 at 9:28

QuentinQuentin

891k122 gold badges1190 silver badges1309 bronze badges

0 / 0 / 0 Регистрация: 22.03.2016 Сообщений: 3
	1
22.03.2016, 12:22. Показов 2803. Ответов 4 Добрый день,не могли бы подсказать как исправить ошибку в коде.уже много всего прочитал но так и не получается. Валидатор ругается Error: The font element is obsolete. Use CSS instead. From line 153, column 10; to line 153, column 29 ↩ <h3><font color=#ff7700>Обраще выделяя font color __________________ Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь 0

413 / 378 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
22.03.2016, 13:22	2
rybkid, не нужно много всего читать, нужно прочитать на что ругается валидатор он вам пишет что тэг font устаревший не используйте его есть тэг span цвет текста нужно задавать через css 0

0 / 0 / 0 Регистрация: 22.03.2016 Сообщений: 3
25.03.2016, 10:52  [ТС]	3
просто не могу понять где то менять,сайт построен на какой то странной cms и в админке написано: ВНИМАНИЕ! ТЕХНИЧЕСКИМ СПЕЦИАЛИСТАМ: НЕ ВНОСИТЕ ИЗМЕНЕНИЯ НАПРЯМУЮ В HTML-ФАЙЛЫ. Изменения будут перезаписаны административной системой при правках вносимых из административной системы. Для внесения изменений пользуйтесь данной системой администрирования. При необходимости внесения изменений непосредственно в коды сайта, вносите их в файлы шаблонов, называющиеся как template_*.html, либо в файлы *.incl находящиеся внутри папки /blocks/. 0

413 / 378 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
28.03.2016, 11:59	4
rybkid, попытайтесь выяснить, на какой именно цмс написан сайт покажите скрин админки можете выложить ссылку на него 0

0 / 0 / 0 Регистрация: 22.03.2016 Сообщений: 3
22.04.2016, 11:21  [ТС]	5
Добрый день,вот скрин админки. Миниатюры   0

I have this html:

 <div class="a"><font size="40"><font 
color="black">A</font></font></div>

The thing is, I can’t make the font-size bigger. No matter what I do, it just stays at a certain size. If I increase 40 to 50, for example, it makes no difference.

I then tried:

.a {font-size: 50px;}

Nothing.

Page ref: https://adsler.co.uk/about-adsler/

asked May 7, 2019 at 13:36

7

The <font> tag is no longer supported and does not work in HTML5.
Remove it and set the style in the <style> tag in the <head> or in the linked stylesheet:

<style>
 .a {
    font-size: 40px;
    color: black;
 }
</style>

Alternatively, set the style directly on the element inline:

<div style="font-size: 40px; color: black">A</div>

answered May 7, 2019 at 13:46

4

As of HTML5, the Font-tag is deprecated. Instead you should style all of your elements with css:

<div class="a"> A </div>

<style>
.a {
  font-size: 40px;
  color: black;
}
</style>

answered May 7, 2019 at 13:43

1

You should use CSS style for div tag :-

    <div style="font-size:50px; color: black;">A</div>

answered May 7, 2019 at 13:44

91StarSky91StarSky

4823 silver badges10 bronze badges

font tag supports «size» attribute to be a number between 1 to 7
you could use the custom css on font tag with «style» attribute like

<font style="font-size:40px;">A</font>

or you could remove the font tag and apply the style attribute to div tag

<div style="font-size:40px;">A</div>

answered May 7, 2019 at 13:51

Yatin GaikwadYatin Gaikwad

1,1101 gold badge12 silver badges22 bronze badges

I have this html:

 <div class="a"><font size="40"><font 
color="black">A</font></font></div>

The thing is, I can’t make the font-size bigger. No matter what I do, it just stays at a certain size. If I increase 40 to 50, for example, it makes no difference.

I then tried:

.a {font-size: 50px;}

Nothing.

Page ref: https://adsler.co.uk/about-adsler/

asked May 7, 2019 at 13:36

7

The <font> tag is no longer supported and does not work in HTML5.
Remove it and set the style in the <style> tag in the <head> or in the linked stylesheet:

<style>
 .a {
    font-size: 40px;
    color: black;
 }
</style>

Alternatively, set the style directly on the element inline:

<div style="font-size: 40px; color: black">A</div>

answered May 7, 2019 at 13:46

4

As of HTML5, the Font-tag is deprecated. Instead you should style all of your elements with css:

<div class="a"> A </div>

<style>
.a {
  font-size: 40px;
  color: black;
}
</style>

answered May 7, 2019 at 13:43

1

You should use CSS style for div tag :-

    <div style="font-size:50px; color: black;">A</div>

answered May 7, 2019 at 13:44

91StarSky91StarSky

4823 silver badges10 bronze badges

font tag supports «size» attribute to be a number between 1 to 7
you could use the custom css on font tag with «style» attribute like

<font style="font-size:40px;">A</font>

or you could remove the font tag and apply the style attribute to div tag

<div style="font-size:40px;">A</div>

answered May 7, 2019 at 13:51

Yatin GaikwadYatin Gaikwad

1,1101 gold badge12 silver badges22 bronze badges

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

<font> Элемент <font> использовался для указания типографских стилей отображения. Он устарел, и шрифты должны быть стилизованы с помощью CSS. <center> Элемент <center> использовался для идентификации текста, который должен быть центрирован при визуализации браузером. Однако элемент устарел, и правильный и современный способ выравнивания текста по центру-это CSS. <font> weight Использовался для обозначения веса (жирного шрифта) текста. Устарел. Вместо этого используйте CSS.  img Border Ранее использовался для определения границы элемента изображения. Он устарел и больше не должен использоваться. Уступил место CSS: style=»border:…» <font> Color Использовался для указания цвета шрифта. Устарел. Вместо этого используйте CSS. <marquee> Элемент <marquee> использовался для идентификации текста, который должен перемещаться по определенному разделу веб-страницы в горизонтальном или вертикальном направлении. Элемент устарел и больше не должен использоваться. CSS или JavaScript можно использовать для создания подобных эффектов. <font> Size Использовался для указания размера текста. Устарел. Вместо этого используйте CSS. <app> Элемент <app> был предшественником элемента <app><applet>, который был устаревшим в HTML 4.01 и полностью удален из спецификации в HTML5. Современные эквиваленты включают <object> и <object><embed>. <img loop=””>  Ранее использовался для указания количества воспроизведения видео при использовании совместно с атрибутом dynsource. Оба атрибута устарели. <frame> Элемент <frame> использовался для разбиения одного окна браузера на несколько независимых контекстов просмотра. Фреймы устарели и не должны использоваться современными веб-сайтами. <a name=””> Амортизированный — не использовать. <applet> Элемент <applet> использовался для добавления Java-апплетов в HTML-документ. Этот элемент был устаревшим в HTML 4.01 и полностью удален из спецификации HTML с выпуском HTML5. Современные эквиваленты включают <object> и <object><embed>. <applet code=””> Указывает URL-адрес файла кода приложения, который будет использоваться в апплете. Элемент апплета устарел. <applet codebase=”””> Указано расположение каталога, содержащего код приложения, который будет использоваться в элементе апплета. Элемент апплета устарел. <applet width=””> Задана ширина отображения панели апплета. Апплет устарел. <applet height=”” Задает высоту отображения панели апплета. Элемент апплета устарел. <applet align=””> Использовался для указания выравнивания апплета относительно окружающего содержимого. Элемент апплета устарел. <applet vspace=””> Использовался для указания количества пробелов, которые должны появляться над и под встроенным элементом <applet>. Апплеты и атрибут vspace устарели. <applet hspace=””> Задает размер горизонтального пространства (поля) с обеих сторон элемента апплета. Элемент апплета устарел. <applet border=””> Задана граница вокруг панели апплета. Элемент апплета устарел. <applet name=””> Определяет имя апплета. Элемент апплета устарел. <applet archive=””> Указан URL-адрес файла JAR (Java Archive), содержащего код приложения для апплета. Элемент апплета устарел. <applet mayscript=””> Указывает, может ли апплет обращаться к объектам JavaScript на странице. Элемент апплета устарел. <basefont> Элемент <basefont> использовался для установки размера шрифта по умолчанию для HTML-документа. Устаревший в HTML 4.01 и полностью удаленный из HTML5, <basefont> не поддерживается современными браузерами, и стиль шрифтов должен контролироваться с помощью CSS. <basefont size=””> Использовался для установки базового размера шрифта для всего документа. Устарел. Вместо этого используйте CSS. <basefont color=””> Используется для установки цвета текста для всего документа. Устарел. Вместо этого используйте CSS. <basefont face=””> Использовался для установки базовой грани шрифта для документа. Устарел. Вместо этого используйте CSS. <bgsound> Элемент <bgsound> использовался для встраивания фоновой звуковой дорожки в HTML-документ. Он был правильно реализован только в Internet Explorer и больше не поддерживается. Элемент <audio> теперь можно использовать для добавления фоновых звуков, но звуковые дорожки, которые автоматически воспроизводятся и не могут быть отключены пользователем, настоятельно не рекомендуются в современном веб-дизайне. <big> Элемент <big> использовался для того, чтобы выделенный текст казался на один размер больше окружающего текста. Этот чисто презентационный тег был удален из HTML5 и не должен использоваться. Вместо этого используйте CSS для управления размером шрифта. <body text=””> Использовался для стилизации текста внутри тела документа. Устарел. Используйте CSS. <body topmargin=””> Использовался для установки поля над телом документа. Устарел. Используйте CSS. <body stylesrc=””> Был проприетарным атрибутом для системы Frontpage. Не использовать. <body scroll=””> Использовался для переключения отображения полос прокрутки на странице, отключая возможность прокрутки пользователя. Устарел. Вы можете использовать CSS для этого, но вы не должны, потому что это плохая идея. <caption align=””> Использовался для управления горизонтальным выравниванием заголовка таблицы. Устарел. Вместо этого используйте CSS. <font face=””> Использовался для указания шрифта. Устарел. Вместо этого используйте CSS. <font point-size=””> Использовался для указания размера текста. Устарел. Вместо этого используйте CSS. <form name=””> Атрибут `name` является устаревшим при использовании с элементом `form`. Вместо этого используйте «id». <frameset> Элемент <frameset> использовался для создания группы кадров, которые можно было стилизовать и управлять как единое целое. Фреймы устарели и больше не должны использоваться. <hype> Элемент <hype> использовался для создания специфичного для браузера эффекта «Пасхального яйца». Он никогда не был добавлен в официальную спецификацию HTML и больше не поддерживается никаким браузером. Не используйте его. <img name=””> Идентифицировал изображение или предоставил дополнительную информацию о нем. Устарел в HTML 4.0 в пользу других атрибутов. <img align=””> Ранее использовался для задания выравнивания и размещения изображения относительно окружающего текста. Он устарел и не должен использоваться. <img hspace=””> Ранее использовался для добавления горизонтального пространства с обеих сторон изображения. Теперь он устарел. <img lowsrc=””> Указывает уменьшенную или более низкую версию изображения. <img naturalsizeflag=””> Этот атрибут ничего не делает. Когда-то он использовался проприетарной программной системой. <img nosave> Был предназначен для предотвращения загрузки пользователями изображения. Никогда не был частью спецификации HTML и не был широко реализован. <img dynsrc=””> Ранняя неудачная попытка включить собственное воспроизведение видео в HTML. <img controls> Переключаемые элементы управления медиаплеера при использовании в сочетании с dynsrcатрибутом. Оба атрибута теперь устарели. <img start=””> Использовался в сочетании с атрибутом dynsrc для добавления видео, которое загружалось бы в поддерживаемых браузерах вместо изображения, которое в противном случае отображалось бы. <img suppress=””> Используется ныне несуществующим браузером Netscape для подавления отображения изображения до завершения загрузки изображения. <input language=””> Использовался для указания языка сценариев, используемого для событий, инициируемых вводом. <listing> Элемент <listing> был задуман как способ визуализации HTML — кода на странице. Он никогда не поддерживался должным образом и теперь устарел. Использование <listing> почти наверняка приведет к неожиданным результатам. Вместо этого используйте <code> или поместите содержимое в <code><div> с соответствующим стилем CSS. <multicol> Элемент <multicol> был экспериментальной функцией, теперь устаревшей, которая использовалась для создания макета в стиле газеты для текстового контента. Для создания того же эффекта можно использовать свойство modern CSS columns. <multicol cols=””> OIOpublisher Элемент <multicol> является устаревшим и не должен использоваться. Клэр Бродли Клэр-опытный технический писатель, редактор и… Читать далее… <multicol gutter=””> Элемент <multicol> является устаревшим и не должен использоваться. Клэр Бродли Клэр-опытный технический писатель, редактор и HTML… Подробнее.. <multicol width=””> Элемент <multicol> является устаревшим и не должен использоваться. Клэр Бродли Клэр-опытный технический писатель, редактор и HTML… Подробнее.. <noembed> Элемент <noembed> был задуман как способ предоставления резервного контента пользователям, чьи браузеры не поддерживают элемент <noembed><embed>. В HTML 4.02 <noembed> устарел в пользу <noembed><object> для предоставления резервного контента. <ol start=””> Определяет начальный номер в упорядоченном списке. <plaintext> Элемент <plaintext> использовался для рендеринга HTML-кода в виде обычного текста. Поскольку все после открывающего тега отображалось как обычный текст, закрывающего тега <plainttext> не было. Этот элемент устарел и не должен использоваться. Вместо этого используйте элементы <code> или <code><pre>. <select readonly> <readonly> недопустимо в HTML. Используйте атрибут disabled. Клэр Бродли Клэр-опытный технический писатель, редактор и HTML… Подробнее.. <sound> Элемент <sound> использовался в браузере Mosaic для добавления звуковых файлов в HTML-документы. Он никогда не был официально принят в стандарте HTML и не имеет поддержки среди современных браузеров. Вместо этого используйте современный элемент HTML5 <audio>. <table width=””> Атрибут width <table> не поддерживается в HTML. Используйте CSS для управления внешним видом таблиц. Клэр Бродли… Читать далее… <table hspace=””> hspace не является допустимым атрибутом <table>. Вместо этого используйте CSS. Клэр Бродли Клэр-опытный технический писатель, редактор и… Читать далее… <table height=””> Атрибут height <table> недопустим ни в одной версии HTML. Вместо этого используйте CSS. Клэр Бродли Клэр… Читать далее… <table rules=””> Использовался для указания отображения внутренних границ между строками и столбцами. Этот атрибут устарел. Вместо этого используйте CSS для стилизации границ таблицы. <table summary=””> Атрибут summary <table> был разработан для поддержки невизуальных читателей HTML, таких как программы чтения с экрана. Он устарел в… Подробнее… <xmp> Элемент <xmp> использовался для окружения текста примера HTML, который должен быть визуализирован без интерпретации каких-либо элементов HTML между открывающими и закрывающими тегами <xmp><xmp>. Элемент был устаревшим в HTML 3.2 и теперь устарел.

Многие из HTML-тегов и атрибуты были заменены более эффективным стилем CSS. Браузеры ещё поддерживают устаревший код, но использовать его не советуем, т.к. в один прекрасный момент поддержка прекратится и вы получите проблему.

This guide will walk you through how to fix some of the most common problems discovered by UNL WebAudit

A PDF link was found

This notice means that WebAudit found a link to a PDF document on your site. The use of PDF documents are discouraged because they do not work well on mobile and are often not built with accessibility in mind. The majority of the time, these PDF documents contain information that would be perfectly suited (and work better) as a web page on your site. Converting PDF content to webpages has the benefits of making the content more accessible, mobile-friendly, and UNL branded. Tools like UNLcms make creating web content a breeze, and even offer tools to create web forms which can easily replace PDF forms.

Ampersands (&) did not start a character reference

This HTML error means that an & character was found on your page that was not escaped. The ampersand should always be escaped in HTML documents to prevent browsers from trying to interpret them as the beginning of a character reference such as &

Ampersands (&) in URLs

When writing a URL as text in HTML & needs to be written as &

Anchor element found with a valid href attribute, but no link content has been supplied.

An anchor tag must be around text or an image, the contents can not be blank.

<a href="">something must go in here</a>

Bad value «» for attribute «href» on element «a»: Illegal character in path segment: not a URL code point.

URLs can not have spaces, replace spaces with %20

Bad value _ for attribute _ on element _: Expected a digit but saw _ instead

This error usually means that a percent value was given for an attribute that requires a pixel value. Most HTML height and width attributes require pixel values. Furthermore, the height and width attributes, as well as inline CSS should be avoided in favor of styles in the HTML <head> or in CSS style sheets. Removing presentation from HTML markup will help improve code maintainability. Example: remove width="100%"

Consecutive hyphens did not terminate a comment

HTML5 does not allow for consecutive hyphens such as -- to be used inside of a comment. You can fix this by adding a space between hyphens such as - -

Duplicate ID _

The id="" must be unique. Rename the id="" for one of the elements.

Element “link” is missing required attribute “property”

Place <link> in the <head> instead of the <body>

Element «style» is missing required attribute «scoped»

When using <style> in the body, add scoped to the style tag <style scoped>. It is preferred to place <style> in the <head> instead of the <body> when possible.

Element «thead» not allowed as child of element «table» in this context.

The element <thead>...</thead> must open and close before the <tbody>...</tbody>. For example:

<table>
  <thead>
  ...
  </thead>
  <tbody>
  ...
  </tbody>
</table>

End tag for «body» seen, but there were unclosed elements

Most likely missing a closing div tag.

Fieldset does not contain a legend element.

This means that a form on the page uses a <fieldset> to group form controls, but does not have an associated <legend> element. The <legend> element is used to describe the group of form controls, and is required to help users identify the purpose of the grouped content.

The following example is not valid because it does not have a <legend> element:

<form>
   <fieldset>
       <input type="radio" name="accept_agreement" id="yes"> <label for="yes">yes</label>
       <input type="radio" name="accept_agreement" id="no"> <label for="no">no</label>
   </fieldset>

   <input type="submit">
</form>

The following is valid

<form>
   <fieldset>
       <legend>Do you agree to the terms?</legend>
       <input type="radio" name="accept_agreement" id="yes"> <label for="yes">yes</label>
       <input type="radio" name="accept_agreement" id="no"> <label for="no">no</label>
   </fieldset>

   <input type="submit">
</form>

In UNLcms, the WebForms module allows you create fieldsets to group related form controls. If you use fieldsets with webforms, be sure to give each fieldset a title, which will be used for the fieldset legend when rendered to the user. One thing to note here is that you should not check the box to ‘Hide Label’ under the fieldset options.

Legends are required so that screen readers and other assistive technology can properly interact with the fieldset element in a form.

Heading tag found with no content.

An <h1>…<h6> tag must be around text, the contents can not be blank or contain something that isn’t text, like an image.

<h2>text must go in here</h2>

Iframe element requires a non-empty title attribute that identifies the frame.

Add title="text describing iframe contents goes in here" inside the iframe tag

Image missing alternate text

When adding an image to a page, please be sure to fill out the ‘Image Description’ in the image uploader or include an alt attribute with HTML. Alts help with search engine optimization and are useful for people using assistance devices or opting not to load images.

Links must have discernable text

Links must have text. If the link is an image, the image must have alternate text to describe it.

The following examples are not valid

<a href="https://unl.edu"></a>
<a href="https://unl.edu"><img src="unl-logo.jpg" alt="" /></a>

The following examples are valid

<a href="https://unl.edu">University of Nebraska-Lincoln Website</a>
<a href="https://unl.edu"><img src="unl-logo.jpg" alt="N logo. Return to University of Nebraska-Lincoln Website" /></a>

Moved Permanently (301)

This notice means that a link was found on your page that is now permanently redirecting to a different web page. After time passes, permanent redirects often turn into broken links because the redirect is no longer maintained. It is a good idea to update these links to the new URL.

No «p» element in scope but a «p» end tag seen.

Either a closing </p> tag is missing or the <p> tag contains a block element

No space between attributes

For elements with multiple attributes, put a space between them.

The following example is not valid

<img src="unl-logo.jpg"alt="University of Nebraska-Lincoln logo" />

The following example is valid

<img src="unl-logo.jpg" alt="University of Nebraska-Lincoln logo" />

Not Found (404)

This error means that a link was found on your site which no longer works. Broken links can lead to bad user experience, and cause users to look elsewhere for information. It is often possible to tell which link on the page is broken by looking at its URL. If you still can not locate the link, it might be helpful to view the page source in your browser, and search for the last part of the link. In other words if the link is http://www.unl.edu/folder/test.html, search for test.html.

Saw «»» when expecting an attribute name.

An attribute has too many quotations.

The following example is not valid

<p class="dcf-txt-center"">...</p>

The following example is valid

<p class="dcf-txt-center">...</p>

The relationship between td elements and their associated th elements is not defined. Use either the scope attribute on th elements, or the headers attribute on td elements.

This error occurs when responsive table code is missing headers="", which contains corresponding row and column id attributes, in the td tags. Consider using the Responsive Table Generator.

The «type» attribute on the «ul» element is obsolete.

For lists, type="disc" is obsolete. Use CSS instead: <ul style=»type:disc;»>.
*Please note that the default setting for lists is ‘disc’. Removing the attribute type="disc" is also valid.

This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1

Text or background color is too light or dark. Use a color contrast tool to find values that pass WCAG 2 AA and AAA compliance.

The «frameborder» attribute on the «iframe» element is obsolete. Use CSS instead.

Remove frameborder=0 from the <iframe> tag and in the CSS add

iframe {
border: none;
}

In HTML5, the <font> element is now obsolete. To fix this error, remove the font element and use CSS to change the font instead. The reason for this is that HTML should only contain structural and semantic markup, while presentation should be separated into the CSS layer. This best practice will help ensure that your code is more inter-operable and easier to maintain. Take the following as an example.

<font size="3" color="red">This is some example text</font>

The above code could be replaced by:

<!-- Style should be in the head or in a separate style sheet --!>
<style>
.font-style-1 {
 font-size: 3em;
 color: red;
}
</style>

<!-- the span should be in the body --!>
<span class="font-style-1">This is some example text</span>

The UNLedu framework dependents are out of date

This error means that your website does not have the latest includes and assets for the UNLedu Web Framework. Please see our guide on Synchronizing the UNLedu Web Framework for details on how to fix this problem. Every month the UNLedu Web Framework is updated to improve security, accessibility, fix bugs, and/or improve design. It is important to stay up to date because only the latest version of the framework is supported and the use of the latest version is requires by the terms of use.

The UNLedu framework HTML is out of date

This error means that your website is not in the latest major version of the UNLedu Web Framework. As with the dependents error, it is required that your website stay up to date with the latest version. Please see our guide on Synchronizing the UNLedu Web Framework for details on how to fix this problem.

The width attribute on the TD element is obsolete. Use CSS instead

As with the font element is obsolete error, CSS should be used to apply a width rather than a width attribute.

Element ‘ul’ not allowed as child of ‘ul’ at this point.

Double check list nesting. Lists should follow this pattern:

					<ul>

    <li>Beef

        <ul>

            <li>ribs</li>

            <li>roast</li>

            <li>steak</li>

        </ul>

    </li>

    <li>Pork</li>

    <li>Lamb</li>

</ul>
				

Unclosed element ‘div’ / End tag ‘main’ seen, but there were open elements.

A <div> in the body is not properly closed.

(Статья написана в 2009 году — на данный момент, некоторые моменты  могли измениться, ищите более актуальные материалы)

Есть факт, на который мало обращают внимание — валидность кода сайта на соответствие стандартам.
Никого не собираюсь агитировать тут за советскую власть, сталкивался с разными мнениями, кто-то говорит, что все это чушь и ни на что не влияет, кто-то, как и я, старается придерживаться правил и стандартов. Можно писать слово «пошел» и «пошОл» и вас одинаково поймут, просто мнение о вас у грамотного человека начнет складываться особое, а можно представить другой вариант написания «пошел» и «пош» или «поше» и в первом случае вас поймут, а в двух других я сомневаюсь. Так что проверка вашего html кода на валидность полезна не только с точки зрения проверки на соответствия стандартам, но и с точки зрения поиска незакрытых тегов и пр.. Все это может повлиять на продвижение вашего сайта в Интернете.

Итак, есть ряд сервисов для проверки валидности кода, но я пользуюсь одним из них — _http://validator.w3.org/, а вы сами себе выберете, что удобно для вас.

Попробуйте в предложенном мною сайте ввести адрес своего и запустите проверку.
Не пугайтесь, результат у большинства страшный -) ошибок вал (у меня при первой проверке высыпало что-то около 500 ошибок на одной странице), я потратил часа 4-5 на свой сайт для исправления всех ошибок.

Результат проверки выдается на английском языке.

Чтобы вам было удобнее разбирать ошибки советую установить галочку на Group Error Messages by Type, в этом случае все ошибки сгруппируются по типу, поставьте галочку на Show Source и вам будет удобнее сразу просматривать исходный код в котором обнаружена ошибка, другие галочки я проставляю тоже, а вы смотрите как будет удобнее в вам.

Итак, получив результат ошибок не пугайтесь, большинство ошибок исправляется на раз-два. Вот пример некоторых ошибок, исправив которые, вы снимите скорее всего 70-90% от общего числа.

1.      теги html следует писать маленькими буквами, знаю, что некоторые редакторы по умолчанию вставляют теги большими буквами (Edit+ точно это делает);

2.      теги, которые не имеют закрывающего, например br, img, hr и т.д. следуют писать следующим образом <br />, <img />, <hr />;

3.      тег img обязательно должен содержать атрибут alt и даже если вы не знаете, что туда писать оставьте его пустым alt=””;

4.      все параметры тегов заключаются в двойные или одинарные кавычки, например width=”88” height=”31” border=”0”

Остальные ошибки думаю исправите сами, не получится пишите через форму обратной связи и я постараюсь помочь -)