Форматирование HTML
Существует разница между тем, что написано в вашем коде HTML и что отображается в браузере.
Мы также видели, как можно писать комментарии в коде HTML, чтобы помочь человеку с чтением кода, без необходимости отображать эти комментарии в браузере.
Другим видом написанного кода, который игнорируется браузером, является пробел, он включает в себя:
Переносы строк
Переносы строк и пустые строки (которые представляют собой последовательность переносов строк) в коде HTML игнорируются браузером. Они составляют лишь единое пространство.
Чтобы реально вставить перенос строки вам нужно использовать элемент
:
Табуляция
Во всяком случае, как и обычный пробел, табуляция невидима. Она также игнорируется браузером:
Если вы хотите добавить пространство перед словом, вам придётся использовать CSS.
Если вы хотите закрыть элемент HTML, то должны сперва закрыть все его дочерние элементы.
Форматирование в виде дерева
Поскольку элементы HTML могут быть вложены друг в друга, вы должны следить за порядком, в котором они были открыты, так как это будет влиять на порядок, в котором они закрыты.
Из-за того, что может быть сложно следить за порядком, в котором были открыты элементы HTML, рекомендуется писать HTML в виде дерева:
Форматирование в виде дерева позволяет визуально воспроизвести уровень вложенности вашего кода HTML. Это позволяет легко увидеть, что:
Пишите HTML для себя, чтобы его читать
Табуляция, пустые строки, набор пробелов и переносы строк опускаются компьютером и все они превращаются в один пробел.
HTML-документ пишется и читается человеком, но компьютером только читается. Учитывая, что табуляция, пробелы и переносы строк не влияют на то, как браузер будет читать и впоследствии отображать веб-страницу, вы можете отформатировать свой документ наиболее читаемым для себя способом.
Нет конкретных правил, касающихся форматирования HTML, но есть неявные соглашения, в частности:
Пора завязывать использовать пробелы вместо табуляции в коде
Этот топик — ответ на топик «Пора завязывать использовать символы табуляции в коде».
Я хотел было ответить к комментариях, но в силу объема и желания независимости от исходного топика решил создать новый топик.
Итак, под катом — почему табы лучше пробелов, самые значительные заблуждения касательно табов и как ими правильно пользоваться.
Начнём с того, что большинство людей (по крайней мере на Хабре) предпочитают табы.
По ссылке есть очень классный комментарий от GreyCat:
На самом деле странно то, что многие до сих пор не отличают indentation и alignment. Ну, вот это — indentation:
А вот это — alignment:
Первое можно делать и табами, и пробелами, но когда делаешь табами — каждый может подстроить ширину indent’а на свой вкус и ничего никуда не едет. А второе — строго пробелами.
В IDE есть опция Smart Tabs для этого:
Если правильно использовать табы (а именно — только для indentation) — можно без проблем менять размер табов не нарушая стиль программирования.
2 пробела на таб:
5 пробелов на таб:
9 пробелов на таб:
Так каких проблем мы лишаемся?
1. Каждый программист может настроить длину табуляции под свой вкус. Всегда работает на практике. Когда код с большой вложенностью — можно поставить ширину табуляции в два пробела, иначе — в четыре.
2. Легче работать с посторонними библиотеками. Какие-то библиотеки поддерживают стиль с шириной таба в два пробела, какие-то с шириной в четыре пробела. Только использование табов не накладывает ограничение на стиль.
Процитирую пару мыслей из предыдущего топика:
Тяжело работать с проектами, где используются библиотеки, содержащие в тесте табуляции. Предположим, в одной библиотеке табуляция равна 3 символам, в другой 4 символам. А вы в проекте используете 2 символа. В результате какая-то часть кода у вас будет отображаться в редакторе со сбитым форматированием.
На самом деле в проектах, которые используют табуляцию таких проблем нету — так как табуляция безразмерна, а вот поддерживать одновременно пару библиотек с разным размером пробело-табуляции становится проблематичным, т.к. уже нельзя пользоваться tab (чтобы IDE заменяла табы на пробелы). Конечно, есть шанс решить такую проблему разными проектами с разными настройками, но это тот еще костыль, да и башку все-равно сносит от разных размеров вложенности.
Легко пустить козла в огород. Скажем у вас табуляция равна 4 пробелам. Кто-то что-то чуть-чуть поправил, используя другой размер табуляции или явно вставив пробелы. У него все смотрелось нормально, а у вас строчка кода куда-то уедет.
Аналогично, табуляция — безразмерная. Такая проблема есть только в проектах, которые используют пробелы. Там где используются табы — они могут быть хоть 2, хоть 10 символов шириной.
Надо постоянно настраивать различные редакторы под нужный вам размер табуляции. Даже если вам нужно просто посмотреть код не правя. Иначе все разъезжается. Особенно это не удобно, когда приходится что-то делать со своим кодом на сторонней машине.
Допустим, я открываю Kate, чтобы по-быстряку поправить код в каком-то файле. Оппа, размер табуляции два пробела. Надо лезть в конфиг. А в соседнем файле из другой либы — четыре пробела. Придётся пользоваться пробелом вместо таба для отступов, ужас. С табами такой проблемы нету.
Лишние сложности тем, кто работает одновременно с проектами, где по стандартам кодирования требуются разные отступы. Если стандарты требуют использование табуляции, то это ещё тот вечно ноющий зуб. В случае пробелов опять-таки все намного проще.
Как выше разобрали, такая проблема есть именно с проблемами, а не с табами.
А еще дополнительно у пробелов есть такие недостатки, как невозможность быстрого перемещения стрелочками клавиатуры (щёлкает каждый пробел, а не через блок), возможность допустить ошибку (поставить в одном месте 3 пробела вместо 4, чем порушить дальнейшую структуру), увеличение размера файла и куча всего ещё.
Вывод
У пробелов нету ни одного существенного преимущество по сравнению с табами, при этом мы не сковываем программиста в рамки и не заставляем его мучаться с слишком маленькими (или слишком большими) для него табами.
Главное
Не так важно, что именно вы используете. Важно, чтобы вы следили за порядком своего кода и всегда придерживались одного и того же стиля. Включите отображение табов/пробелов, иногда меняйте размер табуляции на другой и пробегайте глазами код, чтобы удостоверится, что у вас где-то не вставились пробелы вместо табов или табы вместо пробелов.
Табуляция
Если отправить на печать текст (символ табуляции обозначен стрелкой)
получим такую распечатку:
Также существует вертикальная табуляция VT с кодом 0B16, в настоящее время используемая крайне редко.
Содержание
В текстовых редакторах
В текстовых редакторах позиции табуляции могут идти каждые 2 или 4 знакоместа: это удобно для работы с языками программирования. По желанию пользователя клавиша Tab ⇆ может не вставлять символ-табулятор, а имитировать его, вставляя нужное количество пробелов.
Одни стандарты оформления кода категорически запрещают символы-табуляторы: независимо от того, на сколько позиций настроен редактор или просмотрщик, текст будет выглядеть одинаково; в строковых константах же невидимый символ можно спутать с пробелом. Другие — требуют пользоваться именно табуляторами, а не пробелами.
В текстовых процессорах
Текстовые процессоры позволяют расставлять позиции табуляции в любых местах текста и выравнивать текст по любую сторону этих позиций (по левую сторону, по центру, по правую сторону). При желании символ табуляции может отображаться как отточие. С помощью табуляторов часто реализуются нумерация формул, списки определений, оглавления.
Сходная функциональность у таблиц. Но есть и отличия: текст, выровненный табуляторами, невозможно разлиновать на строки и столбцы. Зато в таблицах текст не может выходить за пределы ячеек.
Табуляция в (X)HTML
Браузер отобразит этот код так:
Клавиша Tab ⇆ в прикладном ПО
За клавишей Tab ⇆ закрепились такие функции:
См. также
![]() | Это заготовка статьи о компьютерах. Вы можете помочь проекту, исправив и дополнив её. Это примечание по возможности следует заменить более точным. |
Полезное
Смотреть что такое «Табуляция» в других словарях:
табуляция — сущ., кол во синонимов: 1 • табулирование (1) Словарь синонимов ASIS. В.Н. Тришин. 2013 … Словарь синонимов
табуляция — Перемещение курсора к следующей позиции. [http://www.morepc.ru/dict/] Тематики информационные технологии в целом EN tabulation … Справочник технического переводчика
табуляция — табул яция, и … Русский орфографический словарь
Горизонтальная табуляция — Источник: ГОСТ 22562 77: Аппараты телеграфные буквопечатающие. Термины и определения оригинал документа Смотри также родственные термины … Словарь-справочник терминов нормативно-технической документации
вертикальная табуляция — вертикальное форматирование Возможность текстового редактора размещать текст вертикально внутри границ, установленных пользователем. [ГОСТ Р ИСО/МЭК 2382 23 2004] вертикальная табуляция Число строк, которые должны быть пропущены на странице перед … Справочник технического переводчика
горизонтальная табуляция — горизонтальное форматирование Возможность текстового редактора размещать текст горизонтально внутри границ, установленных пользователем. [ГОСТ Р ИСО/МЭК 2382 23 2004] горизонтальная табуляция Горизонтальное перемещение положения курсора к… … Справочник технического переводчика
КРОСС-ТАБУЛЯЦИЯ — (CROSS TABULATION) Распространенным способом представления данных являются двумерные таблицы, в которых значения одной переменной соотносятся со значениями другой. Примером может служить кросс табуляция электоральных намерений и социального… … Социологический словарь
вертикальная табуляция — stačiasis tabuliavimas statusas T sritis radioelektronika atitikmenys: angl. vertical tabulation vok. Vertikaltabulation, f rus. вертикальная табуляция, f pranc. tabulation verticale, f … Radioelektronikos terminų žodynas
комбинированная табуляция (данных) — — [А.С.Гольдберг. Англо русский энергетический словарь. 2006 г.] Тематики энергетика в целом EN cross tabulation … Справочник технического переводчика
Табуляция или пробел
Согласитесь, такой код, выглядит читабельнее и красивее:
Нежели этот, хотя отображение сайта в браузере не измениться.
Да и как другой программист, который возможно будет исправлять или дорабатывать ваш код, будет разбираться, если выглядит все так, как на примере сверху.
Для каждого тэга, который вложен в другой тэг, делается табуляция(отступ слева), можно использовать и пробел, но практика показывает, что табуляция намного удобнее. Табуляция ставиться с помощью клавиши «Tab».
Комментарии в коде
Также, для удобства и понятности редактирования кода, используют комментарии.
В языке HTML комментарии пишутся следующим образом:
В языке CSS, так:
Аналогично пишутся комментарии и на JavaScript, а также двумя символами «/», для одной строки:
В PHP, комментарии такие же как и на JavaScript, но добавляется еще символ «#»:
Используйте комментарии и табуляцию, для сложных кусков кода, начиная с самого начала пути Создания сайтов, тогда Вы с легкостью сможете разбираться в собственном коде, и он будет приятен для чтения другими программистами.
Табы или пробелы? Анализ 400 тысяч репозиториев GitHub, миллиарда файлов, 14 ТБ кода
Для пытливых разработчиков до сих пор остается актуальным вопрос использования табуляции и пробелов для форматирования кода. Могут ли они быть взаимозаменяемы: например, 2 пробела на табуляцию или 4? Но единого стандарта нет, поэтому иногда между разработчиками возникает непонимание. Кроме того, различные IDE и их компиляторы обрабатывают табуляцию также по-своему.
Решением вопроса обычно становится соглашение о правилах форматирования в рамках проекта или языка программирования в целом.
Команда разработчиков из Google исследовала проекты в репозитории Github. Они проанализировали код, написанный на 14 языках программирования. Целью исследования было выявить соотношение табуляций и пробелов — то есть, наиболее популярный способ форматирования текста для каждого из языков.
Реализация
Для анализа использовалась уже существующая таблица [bigquery-public-data:github_repos.sample_files], в которую записаны наименования репозиториев Github.
Напомним, что около двух месяцев назад весь открытый код Github стал доступен в форме таблиц BigQuery.
Однако для анализа были выбраны не все репозитории, а только верхние 400 тысяч репозиториев с наибольшим числом звёзд, которые они получили за период с января по май 2016 года.
Запрос выполнялся довольно долго. И это неудивительно, так как было необходимо выполнить операцию объединения (join) таблицы из 190 миллионов строк с таблицей в 70 миллионов строк. Всего было обработано 1,6 ТБ данных. Результаты запроса доступны по этому адресу.
В таблице [contents] записаны файлы без своих дубликатов. Ниже указано общее количество уникальных файлов и их суммарный размер. Дубликаты файлов не учитывались в ходе анализа.
После этого оставалось только сформировать и запустить на выполнение финальный запрос.
Анализ каждой из строк 133 Гб кода занял 16 секунд. Добиться такой скорости помог все тот же BigQuery.
Чаще всего табуляция встречается в языке С, а пробелы — в Java.
Хотя для кого-то соотношение тех или иных управляющих символов не имеет значения, а споры на эту тему кажутся надуманными. Это не имеет значения и для некоторых IDE, которые сохраняют табуляцию как некоторое количество пробелов. Также существуют IDE, в которых это количество можно настраивать вручную.
Некоторое время назад эта проблема была обыграна в сериале «Кремниевая долина». Парень и девушка не сошлись в вопросе форматирования. В результате старый холивар не только привел к недопониманию в профессиональном плане, но и создал проблемы в их личных отношениях.

.svg.png)


