Validation
Validation of one’s HTML documents is perhaps the most important, and the easiest, thing that an author can do to aid accessibility. A validator checks the document’s HTML against a document type definition to ensure that the syntax of the HTML is correct.
Forgetting a quotation mark or using the wrong attribute value is often very easy to do when writing HTML. While many browsers will recover from authoring errors, the way in which they recover tends to differ, and new versions of a browser may change the error recovery method. An excellent example is the change in behavior from Netscape 1.22 to Netscape 2.0; Netscape 1.22 did not care if the author forgot the closing quote in code such as <A HREF=»oops.html>Oops</A>, but Netscape 2.0 required the closing quotation mark. A document that had been validated would be fine under either browser, but a document which the author had just visually checked under Netscape 1.22 was often missing half its content in Netscape 2.0.
The WDG HTML Validator should be used to check Web pages. Be wary of programs that falsely claim to be validators; while document checkers or lints can be valuable tools, they are not substitutes for HTML validation.
Определение и применение
CSS правило @font-face позволяет веб-сайтам скачать и использовать шрифты, отличные от «безопасных веб-шрифтов». При работе с правилом @font-face важным моментом является размещение его в начале вашей таблицы стилей, это позволит вашему браузеру сразу преступить к обработке необходимого шрифта.
Обращаю Ваше внимание, что порядок, в котором вы указываете варианты шрифтов,
имеет важное значение, так как Ваш браузер выбирает первый поддерживаемый шрифт. К примеру, если Вы хотите использовать шрифты на сайте WOFF2, которые поддерживаются не всеми браузерами, то необходимо их указать до WOFF
Structural HTML
When writing HTML, authors should concentrate on the structure of the document rather than its presentation. A document marked up structurally can easily adapt to different browsing environments. When composing HTML, authors should think about what the content means instead of how it should look. If you want text to be bold, think about why you want this style; if what you really want is to express emphasis or strong emphasis, use HTML’s EM or STRONG elements.
The element is commonly misused when strong emphasis or a heading is the intended meaning. Rather than <FONT COLOR=red>Warning!</FONT>, use <STRONG CLASS=warning>Warning!</STRONG> with .warning { color: red; background: transparent } defined in a style sheet.
Some HTML presentation attributes, such as the ALIGN attribute, can safely be used as presentation suggestions. In general, style sheets provide a more flexible solution that favors both authors and users. To maintain accessibility, documents should never be dependent on a particular presentation, including one achieved through style sheets.
The FONT Element
HTML’s FONT element (and its cohort BASEFONT) should generally be avoided in creating accessible Web sites. While attribute specifications like SIZE=»+1″ or SIZE=»-1″ are relatively harmless, absolute sizes like SIZE=1 can result in text that is too small to read. Style sheets allow authors to suggest relative changes in font size with much greater flexibility than is allowed under FONT.
The FONT element’s COLOR attribute should always be avoided since many supporting browsers still honor the font color when the user tries to override author-specified colors. The result could be an unreadable document if the font color does not contrast well against the reader’s chosen background.
The FACE attribute of the FONT element can also not be overridden by the user in many supporting browsers. This may result in the browser choosing a font that is very difficult to read given the user’s platform and environment settings. Remember that the same font may look very different on platforms other than your own.
The FACE attribute should also not be used in an attempt to get Greek letters, mathematical symbols, or dingbats. The FONT element only suggests a presentation, so the content should still make sense in the absence of that presentation. Browsers should not render <FONT FACE=Symbol>a</FONT> as the Greek letter alpha; this bug may be corrected in the future.
For a more in-depth discussion of the FACE attribute, see <FONT FACE> considered harmful. Another excellent discussion on the FONT element is Warren Steel’s What’s Wrong With FONT?.
Поддержка браузерами
| Формат шрифта | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|
| TTF/OTF (True Type и Open Type Fonts) | 4.0 | 3.5 | 10.0 | 3.1 | 9.0* | 12.0 |
| WOFF (Web Open Font Format) | 5.0 | 3.6 | 11.1 | 5.1 | 9.0 | 12.0 |
| WOFF2 (Web Open Font Format 2) | 36.0 | 39.0* | 26.0 | Нет | Нет | Нет |
| SVG (Scalable Vector Graphic) | 4.0 | Нет | 9.0 | 3.2 | Нет | Нет |
| EOT (Embedded Open Type) | Нет | Нет | Нет | Нет | 6.0 | 12.0 |
- TTF/OTF (True Type и Open Type Fonts) — эти шрифты имеют широкую поддержку. Разработаны Microsoft совместно с Adobe, с целью применения в различных операционных системах.
- WOFF (Web Open Font Format) — сжатая версия шрифтов TTF/OTF. Формат включает в себя метаданные, в которые автор шрифта может добавить информацию об использовании шрифта. WOFF-формат имеет широкую поддержку со стороны браузеров.
- WOFF2 (Web Open Font Format 2) — спецификация была разработана, чтобы обеспечить улучшенное сжатие и тем самым снизить использование пропускной способности сети, в то же время, позволяя быстро производить декомпрессию даже на мобильных устройствах.
- SVG (Scalable Vector Graphic) – способ создания векторной графики. SVG-формат имеет очень ограниченную поддержку (IOS/Safari). Планируется, что он перестанет использоваться в Chrome.
- EOT (Embedded Open Type) – шрифты, которые поддерживаются только в Internet Explorer/Edge (разработаны компанией Microsoft для использования в качестве встроенных шрифтов на веб-страницах).
| Дескриптор | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|
| unicode-range (определяет диапазон символов Unicode) | 36.0 | 36.0 | 23.0 | Да | 9.0 | 12.0 |
CSS синтаксис:
@font-face{
font-properties: font-properties value;
}
@font-face{
font-family: name; /* Обязательное значение */
src: URL; /* Обязательное значение */
font-stretch: normal | condensed | ultra-condensed | extra-condensed | semi-condensed | expanded | semi-expanded | extra-expanded | ultra-expanded;
font-style: normal | italic | oblique;
font-weight: normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
unicode-range: unicode-range;
}
Значения правила
Значение
Описание
font-family
Определяет имя шрифта. Шрифты, которые содержат в названии более одного слова, либо цифры, необходимо обязательно помещать в кавычки. Обязательное значение.
src
Определяет URL-адрес(ы), откуда шрифт должен быть загружен. Обязательное значение. Допускается указывать шрифт на локальном компьютере пользователя по имени, используя следующий синтаксис:
@font-face{font-family: «Font Name»;src: local(«Font Name»), url(«/fonts/Font Name.woff2») format(‘woff2’), url(«/fonts/Font Name.woff») format(‘woff’), url(‘/fonts/Font Name.ttf’) format(‘truetype’); }
Если в этом случае шрифт не найден на локальном компьютере пользователя, то будет осуществлен поиск в других указанных источниках.
font-stretch
Определяет как шрифт должен быть растянут. Значение по умолчанию — «normal». Необязательное значение.
font-style
Задает стиль шрифта (обычный | курсивный | наклонный). Значение по умолчанию — «normal». Необязательное значение.
font-weight
Устанавливает насколько жирным будет выглядеть текст. Значение по умолчанию — «normal». Необязательное значение.
unicode-range
Определяет диапазон символов Unicode, которые шрифт поддерживает. Значение по умолчанию — «U+0-10FFFF». Необязательное значение.
С помощью данного дескриптора диапазона Unicode мы можем создать разделенный запятыми список значений диапазона
Каждый из них может быть указан в одной из трех форм:
Одна кодовая точка (например, U+416).
Начальную и конечную кодовые точки диапазона (например, U+400-4ff).
Подстановочный диапазон (например, U+4??) — символы ‘?’ обозначают любое шестандцатиричное число.
Использование диапазона Unicode важно для азиатских языков, в которых намного больше глифов, чем в западных языках, а так же в мультиязычных сайтах.
Используя полный набор, пользователям необходимо загружать несколько мегабайт, а не десятки килобайт для отображения.
При использовании диапазонов, пользователь будет скачивать только те символы, которые отображаются на странице.
Which tag is root tag in HTML?
The HTML element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element. None. One element, followed by one element.
Why P tag is used in HTML?
HTML paragraph or HTML p tag is used to define a paragraph in a webpage. It is a notable point that a browser itself add an empty line before and after a paragraph. An HTML
tag indicates starting of new paragraph.
How do you add a background color to HTML?
To set the background color in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML tag, with the CSS property background-color. HTML5 do not support the tag bgcolor attribute, so the CSS style is used to add background color.
How do you add a background to HTML?
In HTML, we can easily add the background Image in the Html document which is to be displayed on a web page using the following different two methods: Using the Background attribute (Html Tag)…
- Add the Background image using background attribute.
How do you change faces in HTML?
To change font type in HTML, use the CSS font-family property. Set it to the value you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a paragraph, heading, button, or span tag. This is how you use inline CSS.
Which tag is used to change the type face in HTML?
The tag was used in HTML 4 to specify the font face, font size, and color of text.
What is front tag in HTML?
The tag plays an important role in the web page to create an attractive and readable web page. The font tag is used to change the color, size, and style of a text. The base font tag is used to set all the text to the same size, color and face. Color.
How do I apply a font style in HTML?
Chapter Summary
- Use the style attribute for styling HTML elements.
- Use background-color for background color.
- Use color for text colors.
- Use font-family for text fonts.
- Use font-size for text sizes.
- Use text-align for text alignment.
How to change font face in HTML Stack Overflow?
Previously I already added other fonts but, It was always one from different families. This is my code:
When to use the < font > tag in HTML?
The <font> tag was used in HTML 4 to specify the font face, font size, and color of text.
How is the face attribute used in HTML?
The HTML <font> face Attribute is used to specify the font family of the text inside <font> element. Attribute Values: It contains single value font_family which is used to specify the font family. Several font family can be used by separating comma. Note: The <font> face attribute is not supported by HTML5.
How do you change font size in HTML?
The font tag has three attributes called size, color, and face to customize the fonts. To change any of the font attributes at any time within your webpage, simply use the <font> tag. The text that follows will remain changed until you close with the </font> tag. We can set font size using size attribute.
Tables
Authors should avoid using tables simply for layout as much as possible. Unfortunately, completely avoiding tables for layout can limit an author’s flexibility since CSS layout methods are not supported well enough to fully replace tables. When using tables for layout, authors should keep the following ideas in mind:
- The WIDTH attribute on TABLE, TD, or TH elements is usually unnecessary and can hinder a document’s accessibility. In particular, authors should avoid specifying absolute widths larger than a few hundred pixels, since large widths can cause horizontal scrolling with narrow windows or large fonts.
- While HTML standards do not allow a paragraph to contain a table, many browsers do allow this, which has led some authors to use floating tables within a sentence of a paragraph. In Lynx and speaking browsers, the result is half a sentence, followed by the table contents, followed by the other half of the sentence. To account for the different interpretations of tables and paragraphs, authors should never try to place a TABLE within a P element, and they should always use the optional </P> end-tag to end any paragraph preceding a table.
Images
ALT Text
When using the IMG or AREA elements, authors should always use the ALT attribute to provide a textual alternative. The ALT attribute is presented to those not loading images—estimated to account for 30% of all Web users.
The ALT attribute is best used to provide the function of the image rather than a description of the image. For example, ALT=»Welcome to the Web Design Group» is more useful to those not loading images than ALT=»Web Design Group logo». In general, users of a text-only browser like Lynx should be unaware that there are any images on the page, unless the image is content that cannot be completely replaced with text. In this case, such as in a photo album or art gallery, the image’s function and description are essentially the same thing, and so a description of the image would be appropriate for the ALT text.
Images that are purely decorative should use ALT=»» to indicate explicitly that the image is not content. Decorative bullets should be replaced with ALT=»*» or something similar—not ALT=»Round yellow bullet». When images are alongside text or other images, some form of separation may be necessary, such as ALT=» » or ALT=»Web Design Group ~».
For a thorough discussion of the ALT attribute, see the article Use of ALT texts in IMGs.
Images of Text
Images of text are quite common on the Web, but they can be difficult for those with poor vision or with high resolutions on small monitors. In HTML, text is sized according to the user’s preferred font size, but when using images of text the author must choose an absolute font size in pixels for the user. Since different users have different tastes, trying to guess a suitable font size is not a good idea. Thus, authors should avoid using images of text as much as possible.
Cascading Style Sheets can often be used to provide attractive text without the need for images. With CSS, the author can suggest numerous physical properties of text, including its font, color, background, letter spacing, and more.
Image Maps
Image maps are problematic because of their poor support for those not loading images. When using an image map, one should use a client-side image map in combination with a server-side image map wherever possible. With client-side image maps, the attribute of the AREA element should always be used.
Image maps should be avoided when they are not «natural.» For example, most graphical toolbars could more easily and more efficiently be created using a number of separate images or simply using text. On the other hand, an image map for linking to organs of the body, or an image map linking to regions of a country, would be natural and less contrived than the graphical toolbars common on the Web. If feasible, a textual alternative would be helpful in these cases.
Platform Independence
Wherever possible, Web pages should be platform independent, meaning that they should be accessible regardless of the user’s platform and settings. While is a key step in ensuring platform independence, it alone is not sufficient. Authors should also take care to ensure that Web pages are not dependent on a certain resolution, color depth, font size, or window size.
Authors concerned about their documents’ accessibility are encouraged to view their pages with varying resolution, color depth, font size, and window size. Well-authored pages will adjust and remain accessible in any browsing environment. Authors can also view their Web pages on numerous browsers (preferably including a text-only browser like Lynx), and can have a friend read their Web pages aloud to simulate how blind or in-car users might hear the pages. Two helpful tools for authors in evaluating the platform independence of a Web site are the Web Page Purifier and Web Page Backward Compatibility Viewer.
Since people access the Web in different ways, platform-dependent phrases should be avoided. For example, «click here» is inappropriate to anyone without a mouse, and is also useless when a link anchor is read aloud or printed at the end of a document as a summary. Authors should also avoid phrases like «see below» since «below» is meaningless when a document is spoken aloud.
BODY Colors
If setting colors using HTML’s BODY attributes, an author should specify all color attributes. By specifying only one or a few of BGCOLOR, TEXT, LINK, VLINK, and ALINK, authors risk an inaccessible document since the user’s chosen colors may be unreadable against the author’s specified colors. As an author, do not assume that users have the same browser settings as you.
BODY colors should always be specified with a hexadecimal triplet in the form #rrggbb or #RRGGBB since older browsers do not support color names. Netscape 1.22 will interpret all color names as blue.
Authors who specify a background image using BODY’s BACKGROUND attribute should also specify all color attributes. Be sure to select a BGCOLOR that will be readable against the text colors, since those not loading images will see the background color in place of the background image.