Введение в кросс-браузерное тестирование - Изучение веб-разработки

Введение в кросс-браузерное тестирование
========================================

* Обзор: Cross browser testing
* Далее  (en-US)

Эта статья начинает модуль с обзора темы кросс-браузерного тестирования, отвечая на такие вопросы как "что такое кросс-браузерное тестирование?", "с какими распространёнными проблемами можно столкнуться?" и "какие основные подходы для тестирования, обнаружения и исправления проблем существуют?"

| Необходимые условия: | Знакомство с основами HTML, CSS, и JavaScript. |
| --- | --- |
| Цель: | Улучшить понимание идей кроссбраузерного тестирования. |

Что такое кросс-браузерное тестирование?
----------------------------------------

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

* Других браузерах. Не тех нескольких, которые вы регулярно используете, а о довольно старых, которые некоторые люди могут использовать до сих пор, и которые не поддерживают современные возможности CSS и JavaScript.
* Разных устройствах с разными возможностями, начиная от последних лучших планшетов, смартфонов и "умных" телевизоров, до дешёвых устройств и самых старых смартфонов, в которых браузеры могут работать с ограниченными возможностями.
* Людях с инвалидностью, которые используют Web с помощью вспомогательных технологий, таких как скринридеры, или не используют мышь (некоторые используют только клавиатуру).

Поймите, что вы - не ваши пользователи — если ваш сайт работает на Macbook Pro или Galaxy Nexus, это не значит, что он будет работать так для всех пользователей — нужно сделать много тестов!

**Примечание:** Статья сделаем веб доступным для всех предоставляет более полезную информацию о различных браузерах, которые используют люди, их доле рынка и связанных с этим проблемах совместимости браузеров.

Мы должны поговорить немного о терминологии. Для начала, когда мы говорим о сайтах, "работающих кросс-браузерной", на самом деле мы говорим о том, что они должны обеспечивать приемлемое удобство использования в разных браузерах. Это нормально, если сайт выглядит немного по-разному в разных браузерах, главное он должен обеспечивать полную функциональность.В современных браузерах вы можете сделать что-то анимированным или использовать 3D, тогда как в старых браузерах вы можете лишь показать плоскую картинку, предоставляющую ту же информацию. Если владелец сайта доволен, вы сделали своё дело.

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

Когда мы говорим "приемлемое количество браузеров", мы не говорим, что это должно быть 100% всех браузеров в мире — это почти невозможно. Вы можете собрать информацию о том, какими браузеры и устройства используют ваши пользователи (это мы обсудим во второй статье — см. Gotta test 'em all? (en-US)), но это ничего не гарантирует. Как веб-разработчик, вы должны определить для себя несколько браузеров и устройств, на которых код должен работать полностью, но кроме этого, вы должны писать код так, чтобы и другие браузеры были способны максимально использовать ваш сайт (defensive coding). Это одна из самых больших проблем веб-разработки.

**Примечание:** Мы разберём defensive coding позже в этом модуле.

Почему возникают кросс-браузерные проблемы?
-------------------------------------------

Есть множество причин, почему возникают кросс-браузерные проблемы, и, заметьте, что сейчас мы говорим о проблемах, при которых некоторые вещи ведут себя по-разному в разных браузерах / устройствах / настройках просмотра. Прежде чем вы столкнётесь с проблемами браузера, вы должны исправить все ошибки в коде (см. Отладка HTML, Отладка CSS, and Что пошло не так? Устранение ошибок JavaScript из предыдущего раздела).

Кросс-браузерные проблемы возникают потому-что:

* иногда браузеры содержат баги, или реализуют возможности по-разному. В настоящее время это не такая частая проблема, но когда IE4 и Netscape 4 конкурировали за право быть доминирующим браузером в 90-е, компании-разработчики браузеров умышленно реализовывали возможности по-своему в попытке получить конкурентное преимущество, что делало жизнь веб-разработчикам адом. Сейчас же браузеры гораздо жёстче соблюдают стандарты, но различия и баги всё же иногда возникают.
* браузеры имеют разную степень поддержи современных технологий. Это неизбежно, когда вы имеете дело с новейшими функциями, которые браузеры только начинают осваивать, или если вы вынуждены поддерживать очень старые браузеры, которые более не дорабатываются или которые могли быть заморожены (то есть в них не добавляют новый функционал) задолго до того, как придумали новые возможности. Например, если вы хотите использовать передовые возможности JavaScript на вашем сайте, то они могут не работать в старых браузерах. Если вам нужна поддержка старых браузеров, вы можете конвертировать ваш код под старый синтаксис, используя специальные компиляторы.
* некоторые устройства могут иметь ограничения, из-за которых сайт работает медленно или отображается неверно. Например, если сайт был спроектирован для просмотра на десктопных устройствах, он возможно будет выглядеть мелко и трудночитаемо на мобильных устройствах. Если ваш сайт содержит множество больших анимаций, это может быть хорошо на высокопроизводительных планшетах, но может быть вялым или резким на устройствах меньшей производительности.

а также другие причины.

В статьях далее, мы выясним основные проблемы кросс-браузерности и посмотрим на их решения.

Инструменты для кросс-браузерного тестирования
----------------------------------------------

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

Если вы будете тестировать в конце проекта, любые не обнаруженные баги будут гораздо более затратными по времени для исправления, если бы вы их тестировали и обнаруживали своевременно.

Рабочий процесс над тестированием и исправлением ошибок может быть разбит на следующие четыре фазы (очень грубое разделение - у разных людей этот процесс может очень сильно отличаться):

**Начальное планирование** > **Разработка** > **Тестирование** > **Исправление ошибок**

Шаги 2-4 будут повторяться до тех пор, пока не будут реализованы все возможности. Мы рассмотрим различные элементы процесса тестирования более детально в следующих статьях, но пока давайте соберём то, что может происходить на каждом этапе.

### Начальное планирование

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

Once you've got an idea of the required featureset, and what technologies you will likely build these features with, you should start exploring the target audience — what browsers, devices, etc. will the target audience for this site be using? The client might already have data about this from previous research they've done, e.g. from other web sites they own, or from previous versions of the web site you are now working on. If not, you will be able to get a good idea by looking at other sources, such as usage stats for competitors, or countries the site will be serving. You can also use a bit of intuition.

So for example, you might be building an e-commerce site that serves customers in North America. The site should work entirely in the last few versions of the most popular desktop and mobile (iOS, Android, Windows phone) browsers — this should include Chrome (and Opera as it is based on the same rendering engine as Chrome), Firefox, IE/Edge, and Safari. It should also provide an acceptable experience on IE 8 and 9, and be accessible with WCAG AA compliance.

Now you know your target testing platforms, you should go back and review the required featureset and what technologies you are going to use. For example, if the e-commerce site owner wants a WebGL-powered 3D tour of each product built into the product pages, they will need to accept that this just won't work in IE versions before 11. You'd have to agree to provide a version of the site without this feature to users of older IE versions.

You should compile a list of the potential problem areas.

**Примечание:** You can find browser support information for technologies by looking up the different features on MDN — the site you're on! You should also consult caniuse.com, for some further useful details.

Once you've agreed on these details, you can go ahead and start developing the site.

### Development

Now on to the development of the site. You should split the different parts of the development into modules, for example you might split the different site areas up — home page, product page, shopping cart, payment workflow, etc. You might then further subdivide these — implement common site header and footer, implement product page detail view, implement persistent shopping cart widget, etc.

There are multiple general strategies to cross browser development, for example:

* Get all the functionality working as closely as possible in all target browsers. This may involve writing different code paths that reproduce functionality in different ways aimed at different browsers, or using a Polyfill to mimic any missing support using JavaScript or other technologies, or using a library that allows you to write a single bit of code and then does different things in the background depending on what the browser supports.
* Accept that some things aren't going to work the same on all browsers, and provide different (acceptable) solutions in browsers that don't support the full functionality. Sometimes this is inevitable due to device constraints — a cinema widescreen isn't going to give the same visual experience as a 4" mobile screen, regardless of how you program your site.
* Accept that your site just isn't going to work in some older browsers, and move on. This is OK, provided your client/userbase is OK with it.

Normally your development will involve a combination of the above three approaches. The most important thing is that you test each small part before committing it — don't leave all the testing till the end!

### Testing/discovery

After each implementation phase, you will need to test the new functionality. To start with, you should make sure there are no general issues with your code that are stopping your feature from working:

1. Test it in a couple of stable browsers on your system, like Firefox, Safari, Chrome, or IE/Edge.
2. Do some low fi accessibility testing, such as trying to use your site with only the keyboard, or using your site via a screen reader to see if it is navigable.
3. Test on a mobile platform, such as Android or iOS.

At this point, fix any problems you find with your new code.

Next, you should try expanding your list of test browsers to a full list of target audience browsers and start concentrating on weeding out cross browser issues (see the next article for more information on determining your target browsers (en-US)). For example:

* Try to test the latest change on all the modern desktop browsers you can — including Firefox, Chrome, Opera, IE, Edge, and Safari on desktop (Mac, Windows, and Linux, ideally).
* Test it in common phone and tablet browsers (e.g. iOS Safari on iPhone/iPad, Chrome and Firefox on iPhone/iPad/Android),
* Also do tests in any other browsers you have included inside your target list.

The most low fi option is to just do all the testing you can by yourself (pulling in team mates to help out if you are working in a team). You should try to test it on real physical devices where possible.

If you haven't got the means to test all those different browser, operating system, and device combinations on physical hardware, you can also make use of emulators (emulate a device using software on your desktop computer) and virtual machines (software that allows you to emulate multiple operating system/software combinations on your desktop computer). This is a very popular choice, especially in some circumstances — for example, Windows doesn't let you have multiple versions of Windows installed simulataneously on the same machine, so using multiple virtual machines is often the only option here.

Another option is user groups — using a group of people outside your development team to test your site. This could be a group of friends or family, a group of other employees, a class at a local university, or a professional user testing setup, where people are paid to test out your site and provide results.

Finally, you can get smarter with your testing using auditing or automation tools; this is a sensible choice as your projects get bigger, as doing all this testing by hand can start to take a really long time. You can set up your own testing automation system (Selenium being the popular app of choice) that could for example load your site in a number of different browsers, and:

* see if a button click causes something to happen successfully (like for example, a map displaying), displaying the results once the tests are completed
* take a screenshot of each, allowing you to see if a layout is consistent across the different browsers.

You can also go further than this, if wished. There are commercial tools available such as Sauce Labs, Browser Stack, LambdaTest, TestingBot, and CrossBrowserTesting that do this kind of thing for you, without you having to worry about the setup, if you wish to invest some money in your testing. It is also possible to set up an environment that automatically runs tests for you, and then only lets you check in your changes to the central code repository if the tests still pass.

#### Testing on prerelease browsers

It is often a good idea to test on prerelease versions of browsers; see the following links:

* Firefox Developer Edition
* Edge Insider Preview
* Safari Technology Preview
* Chrome Canary
* Opera Developer

This is especially prevalent if you are using very new technologies in your site, and you want to test against the latest implementations, or if you are coming across a bug in the latest release version of a browser, and you want to see if the browser's developers have fixed the bug in a newer version.

### Fixes/iteration

Once you've discovered a bug, you need to try to fix it.

The first thing to do is to narrow down where the bug occurs as much as possible. Get as much information as you can from the person reporting the bug — what platform(s), device(s), browser version(s), etc. Try it on similar configurations (e.g. the same browser version on different desktop platforms, or a few different versions of the same browser on the same platform) to see how widely the bug persists.

It might not be your fault — if a bug exists in a browser, then hopefully the vendor will rapidly fix it. It might have already been fixed — for example if a bug is present in Firefox release 49, but it is no longer there in Firefox Nightly (version 52), then they have fixed it. If it is not fixed, then you may want to file a bug (see Reporting bugs, below).

If it is your fault, you need to fix it! Finding out the cause of the bug involves the same strategy as any web development bug (again, see Debugging HTML, Debugging CSS (en-US), and What went wrong? Troubleshooting JavaScript). Once you've discovered what is causing your bug, you need to decide how to work around it in the particular browser it is causing problems in — you can't just change the problem code outright, as this may break the code in other browsers. The general approach is usually to fork the code in some way, for example use JavaScript feature detection code to detect situations in which a problem feature doesn't work, and run some different code in those cases that does work.

Once a fix has been made, you'll want to repeat your testing process to make sure your fix is working OK, and hasn't caused the site to break in other places or in other browsers.

Reporting bugs
--------------

Just to reiterate on what was said above, if you discover bugs in browsers, you should report them:

* Firefox Bugzilla
* EdgeHTML issue tracker
* Safari
* Chrome
* Opera
Summary
-------

This article should have given you a high-level understanding of the most important concepts you need to know about cross browser testing. Armed with this knowledge, you are now ready to move on and start learning about Cross browser testing strategies.

* Обзор: Cross browser testing
* Далее  (en-US)
In this module
--------------

* Introduction to cross browser testing
* Strategies for carrying out testing (en-US)
* Handling common HTML and CSS problems (en-US)
* Handling common JavaScript problems (en-US)
* Handling common accessibility problems (en-US)
* Implementing feature detection
* Introduction to automated testing (en-US)
* Setting up your own test automation environment (en-US)


Использование HTML для решения общих задач - Изучение веб-разработки

Использование HTML для решения общих задач
==========================================

Следующие ссылки указывают на решения общих повседневных проблем, которые вам нужно решить с помощью HTML.

### Основы структурирования

Основное применение HTML - это структура документа. Если вы новичок в HTML, вы должны начать с этого.

* Как создать простой HTML документ
* Как разделять веб-страницы на логические блоки (en-US)
* Как задавать структуру заголовков и параграфов
### Основы организации гипертекста

HTML специализируется на предоставлении семантической информации для документа, поэтому HTML отвечает на многие вопросы, которые могут у вас возникнуть о том, как лучше донести ваше сообщение в документе.

* Как создать список элементов с помощью HTML
* Как подчеркнуть или выделить содержание
* Как подчеркнуть важность некоторого текста
* Как отображать компьютерный код в HTML
* Как комментировать (подписывать) изображения и видео
* Как помечать аббревиатуры и делать их понятными
* Как добавлять цитаты на веб-страницы
* Как определять термины в HTML (en-US)
### Гиперссылки

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

* Как создавать гиперссылки
* Как создать "оглавление" HTML
### Изображения и мультимедиа

* Как добавить изображения на веб-страницу
* Как добавить видео на веб-страницу
* Как добавить аудио на веб-страницу
### Сценарии и стили

HTML определяет лишь структуру документа. Для улучшения внешнего вида документа обычно используется CSS. Чтобы добавить странице интерактивности вы также можете написать сценарий на одном из скриптовых языков (например JavaScript).

* Как использовать CSS внутри веб-страницы
* Как использовать JavaScript внутри веб-страницы (en-US)
### Встраиваемый контент

* Как встроить одну веб-страницу внутрь другой
* Как добавлять Flash содержимое на веб-страницы
Необычные или продвинутые проблемы
----------------------------------

Помимо основ, HTML очень богат и предлагает расширенные возможности для решения сложных проблем. Эти статьи помогут вам разобраться с менее распространёнными случаями использования, с которыми вы можете столкнуться:

### Формы

Форма это сложная HTML структура предназначенная для отправки данных с веб-страницы на веб-сервер. Мы призываем вас просмотреть наше полное посвящённое руководство. Вот где вы должны начать:

* Как создать простую Веб-форму (en-US)
* Как организовать Веб форму (en-US)
### Таблицы

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

* Как создать таблицу данных
* Как сделать HTML-таблицы доступными
* Как оптимизировать рендеринг HTML-таблицы
### Представление данных

* Как отображать числовые данные с помощью HTML
* How to use data attributes
* How to associate human readable content with arbitrary computer data structures
### Интерактивность

* How to create collapsible content with HTML
* Как добавить контекстное меню на веб-страницу
* Как создать диалоговое окно с помощью HTML
### Продвинутая организация текста

* Как контролировать HTML
* Как отмечать изменения (добавление и удаление текста)
### Продвинутые изображения и мультимедиа images & multimedia

* How to add responsive image to a webpage
* How to add vector image to a webpage
* How to add a hit map on top of an image (en-US)
### Локализация

HTML не одноязычен. Он имеет поддержку средств локализации документов.

* Как добавить несколько языков в одну веб-страницу
* How to handle Japanese ruby characters
* Как отображать дату и время с помощью HTML
### Производительность

* Как ускорить загрузку HTML страниц


HTML таблицы - Изучение веб-разработки

HTML таблицы
============

Структурирование табличных данных является в HTML самой обычной задачей, для этой цели есть множество элементов и атрибутов. С добавлением таблиц стилей (CSS) HTML с лёгкостью позволяет выводить в веб различные таблицы, например, расписание школьных уроков, график посещения бассейна, или статистические данные о ваших любимых динозаврах или футбольных командах. В данном разделе вы узнаете все, что вам потребуется для структурирования табличных данных с помощью HTML.

Необходимые условия
-------------------

Прежде чем приступить к данному разделу, вы должны ознакомиться с основами HTML — смотрите Введение в HTML (Introduction to HTML).

**Примечание:** Если компьютер/планшет/другое устройство, на котором вы работаете, не позволяет вам самостоятельно создавать файлы, то приводимые здесь примеры кода можно посмотреть в онлайновых программах для кодирования, например JSBin или Thimble.

Руководства
-----------

Данный раздел содержит следующие статьи:

Основы работы с таблицами HTML

Эта статья поможет вам начать работу с таблицами HTML, познакомив с самыми базовыми понятиями - строками и ячейками, заголовками, слиянием строк или столбцов, а также с тем, как объединять все ячейки столбца для оформительских целей.

Продвинутые возможности таблиц HTML и доступность

Во второй статье данного раздела мы рассмотрим более продвинутые возможности таблиц HTML — заголовки/подписи, а также разбиение строк таблицы на три части: "голову" (head), "тело" (body) и нижний колонтитул (footer) — а также исследуем, как можно представлять таблицы для людей, имеющих проблемы со зрением.

Проверка знаний
---------------

Структурирование данных о планетах

Для проверки усвоенных знаний мы дадим вам ряд данных, касающихся планет солнечной системы, чтобы представить их в виде таблицы HTML.


Мультимедиа и встраивание - Изучение веб-разработки

Мультимедиа и встраивание
=========================

Мы уже прочли много текста в этом курсе. МНОГО текста. Но веб был бы скучным, если бы состоял только из текста, поэтому давайте посмотрим, как оживить веб при помощи более интересного контента! Этот модуль объясняет, как при помощи HTML вставлять мультимедиа в ваши web-страницы, включая разные способы вставки изображений, видео, аудио, а также других страниц целиком.

Перед стартом
-------------

Перед изучением этого модуля, вам необходимо изучить азы HTML, изложенные во Введении в HTML. Если вы не прошли этот модуль (или подобный ему), сначала пройдите его, затем возвращайтесь!

**Примечание:** Если вы работаете на компьютере/планшете/другом устройстве, на котором у вас нет возможности создавать файлы, вы можете попробовать сделать упражнения на программирование (большинство из них) в онлайн сервисах, например в JSBin или Thimble.

Руководство
-----------

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

Изображения в HTML

Можно рассматривать другие типы мультимедиа, но логично начать с простого элемента `<img>`, используемого для встраивания простого изображения в веб-страницу. В этой статье мы увидим, как использовать его в целом, включая основы, подписывать его, используя `<figure>`, и как он взаимодействует с фоновым изображением CSS.

Видео и аудио контент

Далее мы рассмотрим, как использовать элементы HTML5 `<video>` и `<audio>` для встраивания видео и аудио на наши страницы, включая основы, обеспечивая доступ к различным форматам файлов для разных браузеров, добавление подписей и субтитров, а также как добавить резервные копии для старых браузеров.

От <object> к <iframe> — другие технологии встраивания

В этом месте мы бы хотели сделать шаг в сторону, чтобы изучить пару элементов, которые позволят встраивать широкий спектр типов контента в ваши веб-страницы: элементы `<iframe>` (en-US), `<embed>` и`<object>` (en-US). <iframe> используется для встраивания других веб-страниц, а другие два элемента позволяют встраивать PDF, SVG и даже Flash – устаревающая технология, но все ещё часто встречаемая.

Добавление векторной графики в Веб

Векторная графика может быть очень полезной в определённых ситуациях. В отличие от обычных форматов типа PNG/JPG, она не деформируются/пикселизируются при растяжении, она остаётся гладкой при масштабировании. Эта статья знакомит вас с понятием векторной графики и учит вас встраивать популярный формат SVG в веб-страницы.

Адаптивные изображения

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

Аттестация
----------

Следующая аттестация проверит ваше понимание основ HTML, изложенных в перечисленных выше статьях.

Страница приветствия Mozilla

В этой аттестации мы проверим ваши знания по некоторым технологиям, которые обсуждались в статьях этого модуля, заставляя вас добавить несколько изображений и видео на примитивную приветственную страницу, посвящённую Mozilla!

Смотрите также
--------------

Как добавить карту кликов поверх изображения (en-US)

Карта изображения предоставляет способ разделить изображение на части, которые ссылаются на разные места (представьте себе географическую карту, которая показывает подробную информацию о каждой стране, когда вы кликаете на неё.) Эта технология иногда может быть полезной.

Основы Веб-грамотности 2

Превосходный курс от фонда Mozilla, который освещает и проверяет некоторые навыки, полученные в модуле *Мультимедиа и встраивание*. Погрузитесь глубже в основы вёрстки веб-страниц, проектирования для доступности, обмена ресурсами, использования интернет-СМИ и работы с открытым кодом.


Введение в HTML - Изучение веб-разработки

Введение в HTML
===============

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

Необходимые условия
-------------------

Чтобы начать изучение этого модуля, вам не нужны никакие знания HTML, но вы должны иметь хотя бы базовые навыки обращения с компьютером и навыки пассивного использования Веба (т.е просто смотря на него, потребляя контент). У вас должна быть базовая рабочая среда, описанная в разделе Установка базового программного обеспечения), а также понимание, как создавать и управлять файлами, что подробно описано в статье Работа с файлами — обе статьи являются частью нашего модуля Начало работы с сетью.

**Примечание:** если вы работаете на компьютере/планшете/другом устройстве, с отсутствием возможности создания собственных файлов, вы можете испробовать примеры кода (большинство) в онлайн-редакторах кода, таких как JSBin или Thimble.

Руководства
-----------

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

Начало работы с HTML

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

Что такое заголовок? Метаданные в HTML

Заголовок HTML — это часть документа, которая **не отображается** в браузере при загрузке страницы. Он содержит информацию, такую как: страница `<title>`, ссылки на CSS (если вы хотите стилизовать свой HTML при помощи CSS), ссылки на пользовательские значки и метаданные (которые представляют собой данные о HTML, например, кто его написал или важные ключевые слова, которые описывают документ).

Основы редактирования текста в HTML

Основной задачей HTML является придание тексту значения \*\*(\*\*также известно, как **семантика**), чтобы браузер знал, как его правильно отображать. В этой статье рассматривается то, как использовать HTML, чтобы разбить блок текста на структуру из заголовков и абзацев, добавить акцент/значение слов, создать списки и многое другое.

Создание гиперссылок

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

Углублённое форматирование текста

Существует множество других элементов HTML для редактирования текста, про которые мы вам не рассказали в статье Основы редактирования текста в HTML. Описанные здесь элементы менее известны, но о них также полезно знать. Здесь вы узнаете о разметке цитат, списках описания, компьютерном коде и другом сопутствующем тексте, нижнем и верхнем индексах, контактной информации и многом другом.

Структура документа и веб-сайта

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

Отладка HTML

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

Оценка
------

Следующие задания проверят ваше понимание основ HTML, описанных в приведённых выше руководствах.

Разметка письма

Все мы рано или поздно учимся писать письма; также это полезный тест, для проверки ваших навыков форматирования текста! Поэтому, в этом задании вам будет предоставлено письмо для разметки.

Структурируем страницу

Этот тест проверит вашу способность использовать HTML для структурирования простой страницы, которая содержит шапку ("хедер") , нижний колонтитул ("футер"), меню навигации, основное содержимое и боковую панель.

Смотрите также
--------------

Основы интернет-грамотности

Отличный фундаментальный курс Mozilla, который даёт множество тестов, проверяющих знания, о которых мы говорили в модуле *Введение в HTML.* Учащиеся знакомятся с чтением, письмом и использованием сети в модуле из 6 частей. Откройте для себя основы Интернета через производство и сотрудничество.


HTML таблицы основы - Изучение веб-разработки

HTML таблицы основы
===================

* Обзор: Tables
* Далее

Этот раздел познакомит вас с таблицами HTML, представив самые базовые понятия - строки и ячейки, заголовки, слияние строк и столбцов, а также объединение всех ячеек в столбце в целях стилизации.

| Начальные условия: | Знание основ HTML (читайте Введение в HTML - Introduction to HTML). |
| --- | --- |
| Цель: | Общее знакомство с таблицами HTML. |

Что такое таблица ?
-------------------

Таблица - это структурированный набор данных, состоящий из строк и столбцов (**табличных данных**). Таблицы позволяют быстро и легко посмотреть значения, показывающие некоторую взаимосвязь между различными типами данных, например - человек и его возраст, или расписание в плавательном бассейне.

![A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.](/ru/docs/Learn/HTML/Tables/Basics/numbers-table.png)

![A swimming timetable showing a sample data table](/ru/docs/Learn/HTML/Tables/Basics/swimming-timetable.png)

Люди постоянно используют таблицы, причём уже давно, как показывает документ по переписи в США, относящийся к 1800 году:

![A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.](/ru/docs/Learn/HTML/Tables/Basics/1800-census.jpg)

Так что не удивительно, что создатели HTML включили в него средства для структурирования и представления табличных данных в сети.

### Как работает таблица?

Смысл таблицы в том, что она жёсткая. Информацию легко интерпретировать, визуально сопоставляя заголовки строк и столбцов. Например, посмотрите на приведённую ниже таблицу и найдите единственное личное местоимение, используемое в третьем лице , с полом ♀, выступающее в качестве объекта в предложении. Ответ можно найти, сопоставив соответствующие заголовки столбцов и строк.

Personal pronouns|  | Субъект | Объект |
| --- | --- | --- |
| Единствен. числ. | 1 Лицо | Я | меня |
| 2 Лицо | ты | тебя |
| 3 Лицо | ♂ | он | его |
| ♀ | она | её |
| o | оно | его |
| Множ.числ. | 1 Лицо | мы | нас |
| 2 Лицо | вы | вас |
| 2 Лицо | они | их |

Если правильно представить таблицу HTML, интерпретировать её данные смогут даже люди, имеющие проблемы со зрением.

### Оформление таблиц

Исходный код HTML (HTML source code) вышеприведённой таблице есть в GitHub; посмотрите его и живой пример (look at the live example)! Вы заметите, что таблица там выглядит иначе — это потому, что на сайте MDN к этим данным была применена таблица стилей, а приведённый в GitHub пример информации о стиле не имеет.

Не питайте ложных иллюзий - чтобы эффективно представлять таблицы в веб, необходимо придать им хорошую структуру в HTML и применить к ним таблицы стилей (CSS). В данном разделе мы сфокусируемся на HTML, чтобы узнать о том, что касается CSS, вам надо обратиться к статье Стилизация таблиц.

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

**Примечание:** Посмотрите также таблицу personal\_pronouns с применённым к ней стилем, чтобы получить представление о том, как она выглядит.

### Когда не надо использовать таблицы HTML?

HTML-таблицы следует использовать для табличных данных — это то, для чего они предназначены. К сожалению, многие используют таблицы HTML для оформления веб-страниц, например, одна строка для заголовка, одна для содержимого, одна для сносок, и тому подобное. Подробнее об этом можно узнать в разделе Вёрстка на Начальном обучающем модуле доступности. Это происходило из-за плохой поддержки CSS в разных браузерах; в наше время такое встречается гораздо реже, но иногда всё же попадается.

Короче говоря, использование таблиц в целях оформления вместо методов CSS является плохой идеей по следующим причинам :

1. **Таблицы, используемые для оформления, уменьшают доступность страниц для людей, имеющих проблемы со зрением**: Скринридеры (Screenreaders (en-US)), используемые ими, интерпретируют HTML-теги и читают содержимое пользователю. Поскольку таблицы не являются средством для представления структуры таблицы, и разметка получается сложнее, чем при использовании методов CSS, скринридеры вводят пользователей в заблуждение.
2. **Таблицы создают путаницу тегов**: Как уже упоминалось, оформление страниц с помощью таблиц даёт более сложную структуру разметки, чем специально предназначенные для этого методы. Соответственно, такой код труднее писать, поддерживать и отлаживать.
3. **Таблицы не реагируют автоматически на тип устройства**: У надлежащих контейнеров (например, `<header>`, `<section>`, `<article>`, или `<div>`) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходимо принимать дополнительные меры.
Упражнение: ваша первая таблица
-------------------------------

Итак, мы уже достаточно говорили о теории, теперь возьмём конкретный пример и построим таблицу.

1. Прежде всего, создайте локальную копию blank-template.html и minimal-table.css в новой папке на вашем компьютере.
2. Содержимое любой таблицы заключается между двумя тегами : **`<table></table>` (en-US)**. Добавьте их в тело HTML.
3. Самым маленьким контейнером в таблице является ячейка, она создаётся элементом **`<td>`** ('td' - сокращение от 'table data'). Введите внутри тегов table следующее:

```html
<td>Hi, I'm your first cell.</td>
```

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

```html
<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
```

Как видите, ячейки не располагаются одна под другой, на самом деле они автоматически выравниваются по отношению к другим ячейкам той же строки. Каждый элемент `<td>` создаёт отдельную ячейку, а все вместе они создают первую строку. Каждая добавленная ячейка удлиняет эту строку.

Чтобы эта строка перестала расти, а новые ячейки перешли на вторую строку, необходимо использовать элемент **`<tr>` (en-US)** ('tr' - сокращение от 'table row'). Попробуем, как это получится.

1. Поместите четыре уже созданных ячейки между тегами `<tr>` как здесь показано:

```html
<tr>
  <td>Hi, I'm your first cell.</td>
  <td>I'm your second cell.</td>
  <td>I'm your third cell.</td>
  <td>I'm your fourth cell.</td>
</tr>
```

2. Теперь, когда одна строка уже есть, добавим ещё — каждую строку надо вложить в дополнительный элемент `<tr>`, а каждая ячейка должна быть внутри `элемента <td>`.

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

| Hi, I'm your first cell. | I'm your second cell. | I'm your third cell. | I'm your fourth cell. |
| --- | --- | --- | --- |
| Second row, first cell. | Cell 2. | Cell 3. | Cell 4. |

**Примечание:** Этот пример можно также найти на GitHub под названием simple-table.html (see it live also).

Добавление заголовков с помощью элементов <th>
----------------------------------------------

Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как "Person" и "Age" в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмём следующий пример. Сначала исходный код:

```html
<table>
  <tr>
    <td> </td>
    <td>Knocky</td>
    <td>Flor</td>
    <td>Ella</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>Breed</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Owner</td>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <td>Eating Habits</td>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>
```

Теперь как выглядит таблица:

|  | Knocky | Flor | Ella | Juan |
| --- | --- | --- | --- | --- |
| Breed | Jack Russell | Poodle | Streetdog | Cocker Spaniel |
| Age | 16 | 9 | 10 | 5 |
| Owner | Mother-in-law | Me | Me | Sister-in-law |
| Eating Habits | Eats everyone's leftovers | Nibbles at food | Hearty eater | Will eat till he explodes |

Проблема в том, что, хотя вы и можете представить, о чем идёт речь, ссылаться на эти данные не так легко, как хотелось бы. Лучше, чтобы строка и столбец с заголовками как-то выделялись.

### Упражнение: заголовки

Попробуем улучшить эту таблицу.

1. Сначала создайте локальную копию dogs-table.html и minimal-table.css в новой папке на вашем компьютере. HTML содержит пример Dogs, который вы уже видели выше.
2. Чтобы опознавать заголовки таблицы в качестве заголовков, визуально и семантически, можно использовать элемент **`<th>` (en-US)** ('th' сокращение от 'table header'). Он работает в точности как `<td>`, за исключением того, что обозначает заголовок, а не обычную ячейку. Замените в своём HTML все элементы `<td>`, содержащие заголовки, на элементы `<th>`.
3. Сохраните HTML и загрузите его в браузер, и вы увидите, что заголовки теперь выглядят как заголовки.

**Примечание:** Законченный пример можно найти на dogs-table-fixed.html в GitHub (посмотрите живой пример).

### Для чего нужны заголовки?

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

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

Заголовки дают дополнительное преимущество — вместе с атрибутом `scope` (который мы будем изучать в следующей статье) они помогают улучшить связь каждого заголовка со всеми данными строки или столбца одновременно, что довольно полезно

Слияние нескольких строк или столбцов
-------------------------------------

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

Исходная разметка выглядит так:

```html
<table>
  <tr>
    <th>Animals</th>
  </tr>
  <tr>
    <th>Hippopotamus</th>
  </tr>
  <tr>
    <th>Horse</th>
    <td>Mare</td>
  </tr>
  <tr>
    <td>Stallion</td>
  </tr>
  <tr>
    <th>Crocodile</th>
  </tr>
  <tr>
    <th>Chicken</th>
    <td>Cock</td>
  </tr>
  <tr>
    <td>Rooster</td>
  </tr>
</table>
```

Но результат не такой, как хотелось бы:

| Animals |  |
| --- | --- |
| Hippopotamus |  |
| Horse | Mare |
| Stallion |  |
| Crocodile |  |
| Chicken | Cock |
| Rooster |  |

Нужно, чтобы "Animals", "Hippopotamus" и "Crocodile" распространялись на два столбца, а "Horse" и "Chicken" - на две строки. К счастью, табличные заголовки и ячейки имеют атрибуты `colspan` `и rowspan`, которые позволяют это сделать. Оба принимают безразмерное числовое значение, которое равно количеству строк или столбцов, на которые должны распространяться ячейки. Например, `colspan="2"` распространяет ячейку на два столбца.

Воспользуемся `colspan` и `rowspan` чтобы улучшить таблицу.

1. Сначала создайте локальную копию animals-table.html и minimal-table.css в новой папке на вашем компьютере. Код HTML содержит пример с животными, который вы уже видели выше.
2. Затем используйте атрибут `colspan` чтобы распространить "Animals", "Hippopotamus" и "Crocodile" на два столбца.
3. Наконец, используйте атрибут `rowspan` чтобы распространить "Horse" и "Chicken" на две строки.
4. Сохраните код и откройте его в браузере, чтобы увидеть улучшения.

**Примечание:** Законченный пример можно посмотреть в animals-table-fixed.html на GitHub (живой пример).

Стилизация столбцов
-------------------

И последняя возможность, о которой рассказывается в данной статье. HTML позволяет указать, какой стиль нужно применять к целому столбцу данных сразу — для этого применяют элементы **`<col>`** и **`<colgroup>` (en-US)**. Их ввели, поскольку задавать стиль для каждой ячейки в отдельности или использовать сложный селектор вроде `:nth-child()` (en-US) было бы слишком утомительно.

Возьмём простой пример:

```html
<table>
  <tr>
    <th>Data 1</th>
    <th style="background-color: yellow">Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td style="background-color: yellow">Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td style="background-color: yellow">Jazz</td>
  </tr>
</table>
```

Что даёт нам:

| Data 1 | Data 2 |
| --- | --- |
| Calcutta | Orange |
| Robots | Jazz |

Он не идеален, поскольку нам пришлось повторить информацию о стиле для всех трёх ячеек в столбце (в реальном проекте, возможно, придётся вводить `class` на всех трёх и вводит правило в таблице стилей). Вместо этого, мы можем задать информацию один раз, в элементе `<col>`. `Элемент <col>` задаётся в контейнере `<colgroup>` сразу же за открывающим тегом `<table>`. Эффект, который мы видели выше, можно задать так:

```html
<table>
  <colgroup>
    <col />
    <col style="background-color: yellow" />
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>
```

Мы определяем два "стилизующих столбца". Мы не применяем стиль к первому столбцу, но пустой элемент `<col>` ввести необходимо — иначе стиль будет применён только к первому столбцу.

Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто ввести один элемент `<col>` с атрибутом span, таким образом:

```html
<colgroup>
  <col style="background-color: yellow" span="2" />
</colgroup>
```

Подобно `colspan` и `rowspan`, `span` принимает безразмерное числовое значение, указывающее, к какому количеству столбцов нужно применить данный стиль.

### Упражнение: colgroup и col

Теперь попробуйте сами.

Ниже приведена таблица уроков по языкам. В пятницу (Friday) новый класс целый день изучает голландский (Dutch), кроме того, во вторник (Tuesday) и четверг (Thursdays) есть занятия по немецкому (German). Учительница хочет выделить столбцы, соответствующие дням, когда она преподаёт.

|  | Mon | Tues | Wed | Thurs | Fri | Sat | Sun |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 1st period | English |  |  | German | Dutch |  |  |
| 2nd period | English | English |  | German | Dutch |  |  |
| 3rd period |  | German |  | German | Dutch |  |  |
| 4th period |  | English |  | English | Dutch |  |  |

Заново создайте таблицу, проделав указанные ниже действия.

1. Сначала создайте локальную копию файла timetable.html в новой папке на вашем компьютере. Код HTML содержит таблицу, которую вы уже видели выше, но без информации о стиле.
2. Добавьте элемент `<colgroup>` вверху таблицы, сразу же под тегом `<table>`, куда вы сможете вставлять элементы `<col>`.
3. Первые два столбца надо оставить без стиля..
4. Добавьте цвет фона для третьего столбца. Значением атрибута `style` будет `background-color:#97DB9A;`
5. Задайте ширину для четвёртого столбца. `Значением атрибута style` будет `width: 42px;`
6. Добавьте цвет фона для пятого столбца. Значением атрибута `style` будет `background-color: #97DB9A;`
7. Добавьте другой цвет фона и границу для шестого столбца, чтобы показать, что это особый день и она ведёт новый класс. Значениями атрибута `style` будут: `background-color:#DCC48E; border:4px solid #C1437A;`
8. Последние два дня выходные; значением атрибута style `будет width: 42px;`

Посмотрите, что у вас получилось. Если застрянете, или захотите себя проверить, можете посмотреть нашу версию в timetable-fixed.html (посмотрите живой пример).

Итог
----

Здесь приведены практически все базовые сведения о таблицах HTML. В следующей статье вы получите более продвинутые сведения на эту тему.

* Обзор: Tables
* Далее


HTML таблицы продвинутые возможности и доступность - Изучение веб-разработки

HTML таблицы продвинутые возможности и доступность
==================================================

* Назад
* Обзор: Tables
* Далее

Во второй статье этого модуля мы рассматриваем ещё несколько продвинутых возможностей в HTML таблицах — такие как заголовок/описание и группировка строк внутри head, body и footer секциях таблицы, а также доступность таблиц для пользователей с ограниченными возможностями.

| Необходимые знания: | Базовый HTML (Введение в HTML). |
| --- | --- |
| Цель: | Изучить более продвинутые возможности HTML таблиц и их доступность. |

Добавление заголовка к таблице с помощью <caption>
--------------------------------------------------

Вы можете добавить заголовок для таблицы установив его в элементе `<caption>` и этот элемент необходимо поместить внутрь элемента `<table>` (en-US). Причём вам нужно поместить его сразу после открытия тега `<table>`.

```html
<table>
  <caption>
    Dinosaurs in the Jurassic period
  </caption>

  ...
</table>
```

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

Заголовок помещают сразу после тега `<table>`.

**Примечание:** Атрибут `summary` (en-US) также может быть использован в `<table>` элементе предоставляя описание — это также читается скринридерами. Однако мы рекомендуем вместо этого использовать `<caption>` элемент, так как `summary` deprecated в HTML5 спецификации и не может быть прочитан зрячими пользователями (он не отображается на странице).

### Упражнение: Добавление заголовка

Давайте попробуем это, вернёмся к примеру который мы ранее встретили в прошлой статье.

1. Откройте расписание занятий школьного учителя по языку в конце статьи HTML таблицы основы, или сделайте копию нашего timetable-fixed.html файла.
2. Добавьте подходящий заголовок к таблице.
3. Сохраните свой код и откройте его в браузере, чтобы посмотреть как это выглядит.

**Примечание:** Этот пример можно найти на GitHub по ссылке timetable-caption.html (живой пример).

Добавление структуры с помощью <thead>, <tfoot> и <tbody>
---------------------------------------------------------

Когда таблицы становятся более сложными по структуре полезно дать им более структурированное определение. Отличный способ сделать это используя `<thead>` (en-US), `<tfoot>` и `<tbody>` (en-US), которые позволяют вам разметить header, footer и body секции таблицы.

Эти элементы не создают дополнительной доступности для пользователей со скринридерами и не приводят к какому-то визуальному улучшению при их использовании. Зато они очень полезны при стилизации и разметке, как точки для добавления CSS к вашей таблице. Вот несколько интересных примеров, в случае длинной таблицы вы можете сделать header и footer таблицы повторяемый на каждой печатной странице, или вы можете сделать body таблицы отображаемое на одной странице и иметь доступ ко всему содержимому контенту прокручивая вверх и вниз.

Использование:

* Элементом `<thead>` нужно обернуть часть таблицы которая относится к заголовку — обычно это первая строка содержащая заголовки колонок, но это не обязательно всегда такой случай. Если вы используете `<col>`/`<colgroup>` (en-US) элемент, тогда заголовок должен находиться ниже его.
* Элементом `<tfoot>` нужно обернуть ту часть, которая относится к footer таблицы — например, это может быть последняя строка в которой отражаются суммы по столбцам таблицы. Вы можете включить сюда footer таблицы, как и следовало ожидать, или чуть ниже заголовка таблицы (браузер всё равно отобразит его внизу таблицы).
* Элементом `<tbody>` необходимо обернуть остальную часть содержимого таблицы которая не находится в header или footer таблицы. Этот блок располагают ниже заголовка таблицы или иногда footer таблицы, зависит от того какую структуру вы решите использовать (читать выше по тексту).

**Примечание:** `<tbody>` всегда включён в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется `<tbody>` и посмотрите HTML код в browser developer tools — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это даёт больше контроля над структурой таблицы и стилем.

### Упражнение: Добавление структуры таблицы

Давайте используем эти новые элементы.

1. В первую очередь, сделайте копию spending-record.html и minimal-table.css в новой папке.
2. Попробуйте открыть это в браузере — вы увидите, что все выглядит классно, но могло бы быть лучше. Строка "SUM" которая содержит потраченные суммы кажется находится не в том месте и некоторые детали отсутствуют в коде.
3. Поместите очевидную строку заголовка внутрь `<thead>` элемента, строку "SUM" внутрь `<tfoot>` элемента и оставшийся контент внутрь `<tbody>` элемента.
4. Сохраните, перезагрузите и вы увидите, что добавление элемента `<tfoot>` привело к тому, что строка "SUM" опустилась к нижней части таблицы.
5. Далее, добавьте атрибут `colspan`, чтобы ячейка "SUM" занимала первые четыре столбца, таким образом числовое значение "Cost" появится в последнем столбце.
6. Давайте добавим несколько простых дополнительных стилей к таблице, чтобы дать вам представление насколько эти элементы полезны при использовании CSS. Внутри в `<head>` вашего HTML документа вы увидите пустой элемент `<style>`. Внутри этого элемента добавьте следующие строки CSS кода:

```css
tbody {
  font-size: 90%;
  font-style: italic;
}

tfoot {
  font-weight: bold;
}
```

7. Сохраните, обновите и вы увидите результат. Если `<tbody>` и `<tfoot>` элементы не были установлены, то вам придётся писать много сложных селекторов/правил для применения одного и того же стиля.

**Примечание:** Мы не ожидаем что сейчас вы полностью поймёте CSS. Вы узнаете больше когда пройдёте наши CSS курсы (например, Вступление в CSS это хорошее место для начала; у нас также есть статья конкретно о стилизации таблиц).

Ваша готовая таблица должна выглядеть примерно так:
```

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My spending record</title>
    <style>
 html {
 font-family: sans-serif;
 }

 table {
 border-collapse: collapse;
 border: 2px solid rgb(200, 200, 200);
 letter-spacing: 1px;
 font-size: 0.8rem;
 }

 td,
 th {
 border: 1px solid rgb(190, 190, 190);
 padding: 10px 20px;
 }

 th {
 background-color: rgb(235, 235, 235);
 }

 td {
 text-align: center;
 }

 tr:nth-child(even) td {
 background-color: rgb(250, 250, 250);
 }

 tr:nth-child(odd) td {
 background-color: rgb(245, 245, 245);
 }

 caption {
 padding: 10px;
 }

 tbody {
 font-size: 90%;
 font-style: italic;
 }

 tfoot {
 font-weight: bold;
 }
 </style>
  </head>
  <body>
    <table>
      <caption>
        How I chose to spend my money
      </caption>
      <thead>
        <tr>
          <th>Purchase</th>
          <th>Location</th>
          <th>Date</th>
          <th>Evaluation</th>
          <th>Cost (€)</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td colspan="4">SUM</td>
          <td>118</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Haircut</td>
          <td>Hairdresser</td>
          <td>12/09</td>
          <td>Great idea</td>
          <td>30</td>
        </tr>
        <tr>
          <td>Lasagna</td>
          <td>Restaurant</td>
          <td>12/09</td>
          <td>Regrets</td>
          <td>18</td>
        </tr>
        <tr>
          <td>Shoes</td>
          <td>Shoeshop</td>
          <td>13/09</td>
          <td>Big regrets</td>
          <td>65</td>
        </tr>
        <tr>
          <td>Toothpaste</td>
          <td>Supermarket</td>
          <td>13/09</td>
          <td>Good</td>
          <td>5</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
```

**Примечание:** Этот пример можно также найти на GitHub по ссылке spending-record-finished.html (живой пример).

Вложенные таблицы
-----------------

В одну таблицу вкладывать другую таблицу возможно, если вы используете полную структуру включая элемент `<table>`. Это как правило не рекомендуется, так как делает разметку более запутанной и менее доступной для пользователей скринридеров, так в большинстве случаев вы можете просто вставить дополнительные ячейки/строки/столбцы в существующую таблицу. Однако, иногда это необходимо, например, если вы хотите легко импортировать контент из других источников.

Разметка простой вложенной таблицы:

```html
<table id="table1">
  <tr>
    <th>title1</th>
    <th>title2</th>
    <th>title3</th>
  </tr>
  <tr>
    <td id="nested">
      <table id="table2">
        <tr>
          <td>cell1</td>
          <td>cell2</td>
          <td>cell3</td>
        </tr>
      </table>
    </td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
</table>
```

Таблицы для пользователей с ограниченными возможностями
-------------------------------------------------------

Давайте кратко опишем как мы используем данные таблицы. Таблицы могут быть удобным инструментом, который даёт нам быстрый доступ к данным и позволяет искать разные значения. Например, быстрого взгляда на таблицу ниже достаточно, чтобы найти сколько колец было продано в Амстердаме в августе 2016. Чтобы понять эту информацию, мы проводим визуальные ассоциации между данными в этой таблице и её заголовками колонок и/или строк.

Items Sold August 2016|  |  | Clothes | Accessories |
|  |  | Trousers | Skirts | Dresses | Bracelets | Rings |
| Belgium | Antwerp | 56 | 22 | 43 | 72 | 23 |
| Gent | 46 | 18 | 50 | 61 | 15 |
| Brussels | 51 | 27 | 38 | 69 | 28 |
| The Netherlands | Amsterdam | 89 | 34 | 69 | 85 | 38 |
| Utrecht | 80 | 12 | 43 | 36 | 19 |

Но что если вы не можете провести эти визуальные ассоциации? Как тогда вы сможете прочитать таблицу выше? Люди с ослабленным зрением часто используют скринридер, который читает им информацию с веб-страницы. Это не проблема когда вы читаете простой текст, но интерпретация таблицы может быть сложной проблемой для слепых людей. Тем не менее, вместе с правильной разметкой мы можем заменить визуальные ассоциации программными.

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

### Использование заголовков столбцов и строк

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

Мы уже разобрали заголовки в предыдущей статье, смотри по ссылке Добавление заголовков с помощью элемента <th>.

### Атрибут scope

Новая тема в этой статье это атрибут `scope` (en-US), который может быть добавлен к элементу `<th>` он сообщает скринридеру какие ячейки точно являются заголовками — например, заголовок строки в которой он находится или столбца. Возвращаясь назад к нашему примеру с записями расходов, вы могли однозначно определить заголовки столбцов как здесь:

```html
<thead>
  <tr>
    <th scope="col">Purchase</th>
    <th scope="col">Location</th>
    <th scope="col">Date</th>
    <th scope="col">Evaluation</th>
    <th scope="col">Cost (€)</th>
  </tr>
</thead>
```

И у каждой строки может быть определён заголовок, как здесь (если мы добавили заголовки строк и заголовки столбцов):

```html
<tr>
  <th scope="row">Haircut</th>
  <td>Hairdresser</td>
  <td>12/09</td>
  <td>Great idea</td>
  <td>30</td>
</tr>
```

Скринридер распознает разметку структурированную таким образом, что позволяют пользователям прочитать весь столбец или строку целиком.

Атрибут `scope` имеет ещё два возможных значения — `colgroup` и `rowgroup`. Они используются для заголовков, которые располагаются вверху ваших столбцов или строк. Если вы посмотрите на таблицу "Items sold..." в начале этого раздела статьи, вы увидите что ячейка с "Clothes" находится над ячейками "Trousers", "Skirts" и "Dresses". Все эти ячейки должны быть помечены как заголовки (`<th>`), но "Clothes" заголовок который находится сверху и определяет остальные три подзаголовка. Поэтому "Clothes" должна получить атрибут `scope="colgroup"`, тогда как другие получат атрибут `scope="col"`.

### Атрибуты id и headers

Альтернатива атрибута `scope` это использование атрибутов `id` и `headers` задавая ассоциации между заголовками и ячейками. Этот способ выглядит следующим образом:

1. Вы устанавливаете уникальный `id` для каждого `<th>` элемента.
2. Вы устанавливаете атрибут `headers` для каждого `<td>` элемента. Каждый `headers` атрибут должен содержать список всех `id`, разделённый пробелами, ко всем `<th>` элементам которые действуют как заголовок для этой ячейки.

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

Вернёмся к нашему примеру с расчётом затрат, его можно переписать следующим образом:

```html
<thead>
  <tr>
    <th id="purchase">Purchase</th>
    <th id="location">Location</th>
    <th id="date">Date</th>
    <th id="evaluation">Evaluation</th>
    <th id="cost">Cost (€)</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th id="haircut">Haircut</th>
    <td headers="location haircut">Hairdresser</td>
    <td headers="date haircut">12/09</td>
    <td headers="evaluation haircut">Great idea</td>
    <td headers="cost haircut">30</td>
  </tr>

  ...
</tbody>
```

**Примечание:** Этот метод создания очень точного определения ассоциаций между заголовками и данными в ячейках, но использует **гораздо** больше разметки и оставляет обширное пространство для ошибок. Атрибута `scope` обычно достаточно для большинства таблиц.

### Упражнение: играем со scope и headers

1. Для заключительного упражнения мы, вначале создадим копию items-sold.html и minimal-table.css в новой папке.
2. Теперь попробуем добавить соответствующий атрибут `scope`, который наиболее соответствует этой таблице.
3. И наконец попробуем сделать другую копию изначальных файлов, на этот раз делая таблицу более доступной используя атрибуты `id` и `headers`.

**Примечание:** вы можете проверить как работает последние примеры здесь items-sold-scope.html (also see this live) и items-sold-headers.html (see this live too).

Заключение
----------

Есть ещё некоторые вещи которые можно узнать о HTML таблицах, но мы действительно дали всё что нужно на настоящий момент. Дальше вы возможно захотите больше узнать о стилизации HTML таблиц, посмотрите статью "Стилизация таблиц".

* Назад
* Обзор: Tables
* Далее
В этом блоке
------------

* HTML таблицы основы
* HTML таблицы продвинутые возможности и доступность
* Структурирование данных о планетах


Аттестация: Структурирование данных о планетах - Изучение веб-разработки

Аттестация: Структурирование данных о планетах
==============================================

* Назад
* Обзор: Tables

В нашей аттестации, мы предоставим вам некоторые данные о планетах солнечной системы, и убедим вас структурировать их в HTML таблицу.

| Необходимые навыки: | Перед тем, как попытаться пройти эту аттестацию, вы должны были уже разобрать все статьи в этом модуле. |
| --- | --- |
| Цели: | Проверить знания о HTML таблицах и связанными с ними возможностями. |

Отправная точка
---------------

Для того, чтобы начать аттестацию, скопируйте blank-template.html, minimal-table.css, и planets-data.txt в новую директорию на вашем компьютере.

**Примечание:** В качестве альтернативы, вы можете использовать такие сайты, как JSBin или Glitch, чтобы пройти аттестацию. Вы можете вставлять HTML, CSS и JavaScript в один из этих онлайн редакторов. Если используемый вами онлайн редактор не имеет отдельных JavaScript/CSS панелей, не стесняйтесь вставлять `<script>`/`<style>` элементы в HTML страницу.

Краткое описание проекта
------------------------

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

Готовая таблица должна выглядеть так:

![](/ru/docs/Learn/HTML/Tables/Structuring_planet_data/assessment-table.png)

Вы можете также посмотреть на готовый вариант здесь (не смотрите на исходный код — не жульничайте!).

Шаги для завершения
-------------------

Следующие шаги описывают что вам нужно сделать, чтобы завершить пример таблицы. Все данные, что вам нужны находятся в файле `planets-data.txt`. Если у вас возникли проблемы с визуализацией данных, посмотрите приведённый выше пример или попробуйте нарисовать диаграмму.

1. Откройте вашу копию `blank-template.html` , и запустите таблицу, предоставив ей внешний контейнер, заголовок и тело таблицы. Вам не нужен нижний колонтитул (footer) для этого примера.
2. Добавьте предоставленную подпись к вашей таблице ("Caption" в конце `planets-data.txt`).
3. Добавьте строку в заголовок таблицы, содержащую все заголовки столбцов.
4. Создайте все строки содержимого внутри тела таблицы, помня, что все заголовки строк должны быть *семантически*.
5. Убедитесь, что весь контент помещён в нужные ячейки - в исходных данных каждая строка данных о планете отображается рядом со связанной с ней планетой.
6. Добавьте атрибуты, чтобы заголовки строк и столбцов были однозначно связаны со строками, столбцами или группами строк, для которых они выступают в качестве заголовков.
7. Добавьте чёрную рамку вокруг столбца, который содержит все заголовки строк с именами планет.
Подсказки и советы
------------------

* Первая ячейка строки заголовка должна быть пустой, и занимать два столбца.
* Заголовки групповых строк (например, *Jovian planets*), которые расположены слева от заголовков строк с именами планет (например, *Saturn*), немного сложно разобрать - необходимо убедиться, что каждый из них охватывает правильное количество строк и столбцов.
* Один из способов связать заголовки с их строками / столбцами намного проще, чем другой.
Аттестация или дальнейшая помощь
--------------------------------

Если вы хотите, чтобы ваша работа была оценена, или вы застряли и хотите обратиться за помощью:

1. Разместите свою работу в онлайн-редакторе, таком как CodePen, jsFiddle или Glitch.
2. Напишите сообщение с просьбой об оценке и/или помощи в разделе обучения на форуме MDN Discourse. Ваш пост должен включать:
    * Описательный заголовок, такой как «Требуется оценка для структурирования данных планеты».
    * Детали того, что вы уже пробовали, и что вы хотели бы, чтобы мы сделали, например, если вы застряли и нуждаетесь в помощи, или хотите оценить свою работу.
    * Ссылка на пример, который вы хотите оценить или в котором вам нужна помощь, в онлайн-редакторе (как упомянуто в шаге 1 выше). Это хорошая практика в решении проблем - очень сложно помочь кому-то с проблемой кода, если вы не видите его код.
    * Ссылка на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, с которым вам нужно помочь.
* Назад
* Обзор: Tables


Tips for authoring fast-loading HTML pages - Изучение веб-разработки

Tips for authoring fast-loading HTML pages
==========================================

Эти советы основаны на общих знаниях и экспериментах.

Оптимизированная веб-страница не только обеспечивает более отзывчивый сайт для ваших посетителей, но также снижает нагрузку на ваши веб-серверы и интернет-соединения. Это может иметь решающее значение для сайтов с большим объёмом или сайтов, которые имеют всплеск трафика из-за необычных обстоятельств, таких как последние новости

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

Советы
------

### Уменьшайте вес страницы

Веб-страницы - безусловно, самый важный фактор в производительности загрузки страницы.

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

Такие инструменты, как HTML Tidy , могут автоматически убирать начальные пробелы и лишние пустые строки из допустимого источника HTML. Другие инструменты могут «сжимать» JavaScript, переформатируя источник или запутывая источник и заменяя длинные идентификаторы на более короткие версии

### Минимизируйте количество файлов

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

В зависимости от настроек кеша браузера он может отправить запрос с заголовком `If-Modified-Since` для каждого ссылочного файла, спрашивая, был ли файл изменён с момента последней загрузки. Слишком много времени, затрачиваемое на запрос времени последнего изменения указанных файлов, может задержать первоначальное отображение веб-страницы, так как браузер должен проверить время изменения каждого из этих файлов перед отображением страницы.

Если вы часто используете фоновые изображения в своём CSS, вы можете уменьшить количество запросов на поиск HTTP, объединив изображения в одно, называемое спрайтом изображения. Затем вы просто применяете одно и то же изображение каждый раз, когда вам это нужно для фона, и соответственно корректируете координаты x / y. Этот метод лучше всего работает с элементами, которые будут иметь ограниченные размеры, и не будет работать для каждого использования фонового изображения. Тем не менее, меньшее количество HTTP-запросов и кеширование одного изображения может помочь сократить время загрузки страницы.

### **Используйте сеть доставки (и дистрибуции) содержимого (**Content Delivery Network (CDN)**)**

Для целей этой статьи CDN - это средство уменьшения физического расстояния между вашим сервером и вашим посетителем. По мере увеличения расстояния между вашим сервером и посетителем время загрузки будет увеличиваться. Предположим, ваш сервер веб-сайта находится в Соединённых Штатах и имеет посетителя из Индии; время загрузки страницы будет намного выше для индийского посетителя по сравнению с посетителем из США.

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

Дальнейшее чтение:

* Understanding CDNs
### Сократите поиск доменов

Поскольку каждый отдельный домен требует времени для поиска DNS, время загрузки страницы будет расти вместе с количеством отдельных доменов, отображаемых в ссылках CSS, а также в JavaScript и изображениях.

Это не всегда может быть практичным; однако вы всегда должны позаботиться об использовании только минимально необходимого количества разных доменов на своих страницах.

### Кешируйте повторно использованный контент

Убедитесь, что любой контент, который может быть кеширован, кеширован и имеет подходящее время истечения.

В частности, обратите внимание на заголовок `Last-Modified`. Это позволяет эффективно кешировать страницы; с помощью этого заголовка агенту пользователя передаётся информация о файле, который он хочет загрузить, например, когда он был последний раз изменён. Большинство веб-серверов автоматически добавляют заголовок `Last-Modified` к статическим страницам (напр. `.html`, `.css`), на основе даты последнего изменения, хранящейся в файловой системе. С динамическими страницами (напр. `.php`, `.aspx`), это, конечно, не может быть сделано, и заголовок не отправляется.

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

Больше информации:

1. HTTP Conditional Get for RSS Hackers
2. HTTP 304: Not Modified
3. On HTTP Last-Modified and ETag
### Оптимально размещайте компоненты на странице

Сначала загрузите содержимое страницы вместе с любым CSS или JavaScript, которые могут потребоваться для его первоначального отображения, чтобы пользователь получил самый быстрый очевидный ответ во время загрузки страницы. Этот контент, как правило, представляет собой текст, и поэтому может получить выгоду от сжатия текста при передаче, что обеспечивает ещё более быстрый отклик для пользователя.

Любые динамические функции, требующие полной загрузки страницы перед использованием, должны быть изначально отключены, а затем включены только после загрузки страницы. Это приведёт к загрузке JavaScript после содержимого страницы, что улучшит общий вид загрузки страницы.

### Уменьшайте количество встроенных скриптов

Встроенные сценарии могут быть дорогими для загрузки страницы, так как синтаксический анализатор должен предполагать, что встроенный сценарий может изменить структуру страницы во время анализа. Сокращение использования встроенных сценариев в целом и сокращение использования `document.write()` для вывода контента, в частности, может улучшить общую загрузку страницы. Используйте современные методы AJAX для управления содержимым страницы, а не устаревшие подходы, которые основаны на `document.write()`.

### Используйте современный CSS и корректную разметку

Использование современного CSS уменьшает количество текста, может уменьшить потребность в (разделительных) изображениях с точки зрения макета и очень часто может заменить изображения стилизованного текста - это «стоит» намного дороже, чем эквивалентный текст и CSS.

Использование корректной разметки имеет следующие преимущества. Во-первых, браузерам не нужно выполнять исправление ошибок при разборе HTML (это помимо философской проблемы: разрешить ли изменение формата при вводе пользователем, а затем программно «исправить» или нормализовать его; или вместо этого обеспечить строгий формат ввода без допусков).

Кроме того, корректная разметка позволяет спокойно использовать другие инструменты, которые могут предварительно обрабатывать ваши веб-страницы. Например, HTML Tidy может удалить пробелы и необязательные конечные теги; однако он откажется запускать страницу с серьёзными ошибками разметки

### Разделяйте ваш контент

Использование таблиц для вёрстки макетов устаревший метод, который не должен больше использоваться. Вместо этого для создания макетов нужно использовать floats, positioning, flexbox, или grids.

Таблицы по-прежнему считаются допустимой разметкой, но их следует использовать для отображения табличных данных. Чтобы браузер быстрее отображал вашу страницу, вам следует избегать вложения таблиц.

Вместо глубоко вложенных таблиц, как в:
```

<TABLE>
  <TABLE>
    <TABLE>
          ...
    </TABLE>
  </TABLE>
</TABLE>
```

используйте невложенные таблицы как показано (или div'ы)
```

<TABLE>...</TABLE>
<TABLE>...</TABLE>
<TABLE>...</TABLE>
```

Смотрите также: CSS3 Multi-column Layout Spec и CSS3 Flexible Box Layout

### Сокращайте и сжимайте активы SVG

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

### Сокращайте и сжимайте ваши изображения

Большие изображения приводят к тому, что загрузка страницы занимает больше времени. Рассмотрите возможность сжатия ваших изображений перед добавлением их на свою страницу. Есть онлайн-инструменты, такие как Compress Jpeg, Tiny PNG и многие другие, доступны онлайн. Вы можете использовать офлайн-инструменты, такие как фотошоп и другие.

### Указывайте размеры для изображений и таблиц

Если браузер может немедленно определить высоту и/или ширину ваших изображений и таблиц, он сможет отображать веб-страницу без необходимости переформатировать содержимое. Это не только ускоряет отображение страницы, но и предотвращает раздражающие изменения в макете страницы после завершения загрузки страницы. По этой причине `height` и `width` должны быть указаны для изображений всегда, когда это возможно.

Таблицы должны использовать CSS селектор: комбинация свойств
```

  table-layout: fixed;
```

и должны указывать ширину колонок используя HTML теги `COL` и `COLGROUP`

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

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

В идеале ваши базовые минимальные требования должны основываться на рассмотрении современных браузеров, поддерживающих соответствующие стандарты.Это может включать: Firefox 3.6+ на любой платформе, Internet Explorer 8.0+ на Windows, Opera 10+ на Windows, и Safari 4 на Mac OS X.

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

### Используйте async и defer, если это возможно

Сделайте сценарии JavaScript такими, чтобы они были совместимы как с async, так и с defer, и по возможности используйте async, особенно если у вас есть несколько тегов script.

При этом страница может перестать отображаться, пока JavaScript все ещё загружается. В противном случае браузер не будет отображать ничего после тегов сценария, которые не имеют этих атрибутов.

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

Пример структуры страницы
-------------------------

* `html`
* `head`
    + `link` ...
     CSS файлы необходимы для отображения веб-страницы. Минимизируйте количество файлов для производительности, сохраняя несвязанные CSS в отдельных файлах для обслуживания.
    + `script` ...
     Файлы JavaScript для функций, необходимых при загрузке страницы, но не для любого DHTML, который может работать только после загрузки страницы
     Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания.
* `body`
* Видимое пользователем содержимое страницы небольшими порциями (tables / divs) что можно отобразить, не дожидаясь загрузки полной страницы.
    + `script` ...
     Любые сценарии, которые будут использоваться для выполнения DHTML. Сценарий DHTML обычно может запускаться только после полной загрузки страницы и инициализации всех необходимых объектов. Нет необходимости загружать эти скрипты перед содержимым страницы. Это только замедляет первоначальный вид загрузки страницы.
     Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания
     Если какие-либо изображения используются для эффектов ролловера, вам следует предварительно загрузить их здесь после загрузки содержимого страницы.
Ссылки по теме
--------------

* Книга: "Speed Up Your Site" by Andy King
* Отличная и очень содержательная статья Best Practices for Speeding Up Your Web Site (Yahoo!)
* Инструменты для анализа и оптимизации производительности: Google PageSpeed Tools
Original Document Information
-----------------------------

* Author(s): Bob Clary, Technology Evangelist, Netscape Communications
* Last Updated Date: Published 04 Apr 2003
* Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
* Note: This reprinted article was originally part of the DevEdge site.


Использование data-* атрибутов - Изучение веб-разработки

Использование data-\* атрибутов
===============================

HTML5 (en-US) спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. `data-*` атрибуты позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или `Node.setUserData()`.

Синтаксис HTML
--------------

Синтаксис прост — любой атрибут, чьё имя начинается с `data-`, является `data-*` атрибутом. Предположим у нас имеется статья и мы хотим сохранить дополнительную информацию без визуального представления. Для этого можно использовать `data`-атрибуты:

```html
<article
 id="electriccars"
 data-columns="3"
 data-index-number="12314"
 data-parent="cars">
  ...
</article>
```

Доступ в JavaScript
-------------------

Чтение `data-`атрибутов в JavaScript осуществляется также просто. Для этого можно использовать метод `getAttribute()` с параметром, равным полному имени атрибута. Но есть и более простой способ, используя объект `dataset` (en-US).

Чтобы получить `data`-атрибут можно взять свойство объекта `dataset` с именем, равным части имени атрибута после `data-` (обратите внимание, что дефисы в имени преобразуются в camelCase).
```

var article = document.getElementById('electriccars');

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"
```

Каждое свойство является строкой и может быть прочитано и записано. В приведённом выше примере выполнение кода `article.dataset.columns = 5` приведёт к тому, что новое значение атрибута станет равным `"5"`.

Доступ в CSS
------------

Заметим, что `data`-атрибуты являются обычными HTML-атрибутами, к которым можно получить доступ в CSS. Например, чтобы показать родительские данные о статье можно использовать генерируемый контент и CSS функцию `attr()`:

```css
article::before {
  content: attr(data-parent);
}
```

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

```css
article[data-columns="3"] {
  width: 400px;
}
article[data-columns="4"] {
  width: 600px;
}
```

Увидеть как это работает можно в примере на JSBin.

`Data`-атрибуты также могут использоваться для хранения информации, которая постоянно изменяется, например, счёт в игре. Используя CSS селекторы и возможности JavaScript можно создавать некоторые изящные эффекты, без необходимости писать свои функции отображения. Посмотрите скринкаст чтобы увидеть больше примеров использующих сгенерированный контент и переходы на CSS. Пример кода из скринкаста можно также посмотреть на JSBin.

Проблемы
--------

Не храните данные, которые должны быть видимы и доступны в `data`-атрибутах. Дело в том, что вспомогательная техника (assistive technology) может не получить к ним доступ. В дополнение, поисковые роботы не индексируют данные, содержащиеся в `data`-атрибутах.

Печально, что всё простое и полезное в этой жизни не достаётся бесплатно. Internet Explorer 11+ поддерживает этот стандарт, но все более ранние версии не поддерживают `dataset`. Для поддержки IE 10 и более ранних версий получение доступа к `data`-атрибутам необходимо осуществлять через `getAttribute()`. Также, производительность чтения `data-`атрибутов по сравнению с хранением этих данных в хранилище данных JS значительно хуже. Использование `dataset` ещё медленнее, чем чтение данных с `getAttribute()`.

Тем не менее, для пользовательских метаданных, связанных с элементами, `data-`атрибуты являются отличным решением.

Смотрите также
--------------

* This article is adapted from Using data attributes in JavaScript and CSS on hacks.mozilla.org.
* How to use HTML5 data attributes (Sitepoint)