Статья посвящена довольно простым и очевидным советам по написанию чистого кода, однако не все так просто!

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

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

1. Пишите читабельный код

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

Самый простой способ – это использование пробелов. Сокращение кода перед его релизом является нормальным. Однако необязательно писать код, который имеет сокращенный вид. Вместо этого можно использовать различные опознавательные элементы такие, как: скобки, пустые строки и отступы для того, чтобы сделать структуру нашего кода более читабельной. Решение, использовать подобные элементы в структуре кода, значительно улучшит читабельность и ясность этого кода. Давайте просто взглянем на код для того чтобы все понять. Ниже приведены два простых примера:

Код: // Плохой const userData=[{userId: 1, userName: "Anthony Johnson", memberSince: "08-01-2017", fluentIn: [ "English", "Greek", "Russian"]},{userId: 2, userName: "Alice Stevens", memberSince: "02-11-2016", fluentIn: [ "English", "French", "German"]},{userId: 3, userName: "Bradley Stark", memberSince: "29-08-2013", fluentIn: [ "Czech", "English", "Polish"]},{userId: 4, userName: "Hirohiro Matumoto", memberSince: "08-05-2015", fluentIn: [ "Chinese", "English", "German", "Japanese"]}]; // Лучше const userData = [ { userId: 1, userName: "Anthony Johnson", memberSince: "08-01-2017", fluentIn: [ "English", "Greek", "Russian" ] }, { userId: 2, userName: "Alice Stevens", memberSince: "02-11-2016", fluentIn: [ "English", "French", "German" ] }, { userId: 3, userName: "Bradley Stark", memberSince: "29-08-2013", fluentIn: [ "Czech", "English", "Polish" ] }, { userId: 4, userName: "Hirohiro Matumoto", memberSince: "08-05-2015", fluentIn: [ "Chinese", "English", "German", "Japanese" ] } ]; Код: // Плохой class CarouselLeftArrow extends Component{render(){return ( );}}; // Лучше class CarouselLeftArrow extends Component { render() { return ( ); } };

2. Используйте понятные слова для обозначения переменных, функций и методов

Давайте рассмотрим второй совет, который поможет нам в написании чистого и понятного кода. А суть совета заключается в использовании понятных слов при обозначении переменных, функций и методов. Но что означает «используйте понятные слова»? Понятные слова – это те слова, посмотрев на которые, не только мы, но и другие люди поймут, для чего предназначается та или иная переменная, функция или метод. Другими словами название само по себе должно говорить за переменную, функцию или метод.

Код: // Плохой const fnm = ‘Tom’; const lnm = ‘Hanks’ const x = 31; const l = lstnm.length; const boo = false; const curr = true; const sfn = ‘Remember the name’; const dbl = [‘1984’, ‘1987’, ‘1989’, ‘1991’].map((i) => { return i * 2; }); // Лучше const firstName = ‘Tom’; const lastName = ‘Hanks’ const age = 31; const lastNameLength = lastName.length; const isComplete = false; const isCurrentlyActive = true; const songFileName = ‘Remember the name’; const yearsDoubled = [‘1984’, ‘1987’, ‘1989’, ‘1991’].map((year) => { return year * 2; });

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

3. Пишите код так, чтобы любая функция или метод выполняли только одну задачу

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

Затем, я уже не помню кто, мне дал этот прекрасный совет. Пиши код так, чтобы любая функция или метод выполняли только одну задачу. Этот совет изменил все и помог мне начать писать более «чистый» код. Начиная с этого момента, другие люди могли понять, что же творится в моем коде. Или им требовалось гораздо меньшее количество времени на это. Мои функции и методы также стали предсказуемы. Они стали постоянно выдавать одинаковый результат при одинаковом вводе. Кроме того, проблема с придумыванием названий для функций свелась к минимуму.

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

Примечание: Совет по написанию функций или методов, каждая из которых выполняет только одну задачу – это есть принцип разделения обязанностей. Такая практика была представлена Робертом К. Мартином, в качестве одного из пяти принципов объектно-ориентированного проектирования, более известные, как SOLID. Если вы хотите узнать об этом больше, я рекомендую ознакомиться с function number = > number * 2 )

4. Используйте комментарии в качестве пояснений

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

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

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

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

Однако имейте в виду, что мы подразумеваем написание комментариев, только там, где это необходимо. Не нужно комментировать плохой код. Написание комментариев к плохому коду – это замкнутый круг, который не поможет в его трансформации в «чистый» код. Если код написан плохо, то проблему нужно решать при помощи его улучшения, а не при помощи написания длинных инструкций к нему. «Чистый» код более предпочтителен, нежели инструкции к плохому коду.

5. Будьте последовательны

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

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

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

6. Регулярно проверяйте свой код

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

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

Заключительные мысли по написанию «чистого» кода

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

Всем спасибо за ваше время. И до следующего раза, всем удачного дня!

Перевод: Александр Давыдов

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

Общие рекомендации по написанию полезных и гармоничных статей от Максима Ильяхова - ответственного редактора Дизайн-бюро Артема Горбунова, ректора Школы редакторов и успешного коммерческого писателя - послужат вам замечательным подспорьем при создании собственных текстов.

1. Спросите себя: нужно ли сейчас браться за перо?

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

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

2. Пишите только об идеях, что будоражат ваше сознание

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

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

3. Всегда упрощайте

Простая форма и понятная структура - это именно то, что нужно для полного взаимопонимания между автором и читателем. Но очень важно не подменять смысл слова «упрощение», - если текст простой и структурированный, то это не значит, что он должен быть примитивным и неглубоким. Вполне допустимо применять специальные термины и вводить сложные понятия в текст, просто смысл от этого не должен существенно меняться.

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

4. Дайте волю эмоциям

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

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

5. Проявляйте заботу к своему читателю

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

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

• Не пишу ли я для себя?
• Кому конкретно будет адресовано мое послание?
• Какую задачу я помогу решить читателю?
• Как я буду раскрывать и описывать вопрос: с позиции ресурса, на котором будет опубликован материал или с точки зрения читателя?

Будьте предельно честными и объективными

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

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

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

Мы надеемся, что у вас получится эффективно применить эти несложные рекомендации, ведь они действительно могут усовершенствовать ваши навыки!

В языке HTML существует два вида списков: нумерованные и ненумерованные. Их создание практически одинаковое. Даже теги отличаются на один символ. Также можно создавать которые могут включать в себя как нумерованные, так и маркерные.

Эти списки можно преобразовывать как угодно. Всё зависит от вашей фантазии. Сначала мы рассмотрим стандартные списки, такие же как в редакторе Word, а затем будем их улучшать и оформлять до неузнаваемости.

Нумерованный список HTML

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

Простые списки выглядят вот так

Согласно стандартам, каждый пункт списка должен быть внутри открывающего и закрывающего тега li. Но если вы не поставите закрывающий тег, то результат будет точно таким же. Обработчик весьма умный. Во время преобразования списка он анализирует открывающие теги. Если он видит новый

Таким образом, списки можно делать так, как показано ниже.

Но с точки зрения профессионалов это некорректно.

Ненумерованные (или же маркерные) списки создаются точно так же, только вместо тега ol, пишется ul.

В нет цифр или букв - только различные символы, которые называются маркерами.

Многоуровневый нумерованный список HTML

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

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

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

Для нумерованных указываем алфавит или тип цифр, а для остальных случаев - тип маркера.

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

Можно указать атрибут type с любым значением из таблицы. Или в классе стиля css указать list-style-type с желаемым типом сортировки.

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

Для нумерованных списков нужно использовать следующие варианты:

• 1 - арабские цифры;
• A - заглавные ;
• a - строчные латинские буквы;
• I - заглавные римские цифры;
• i - строчные римские цифры.

По умолчанию всегда используется список с То есть, если вы ничего не указали, это равносильно type="1".

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

Кроме этого, можно сделать вывод в обратном порядке. Для этого нужно написать reversed.

Оформление списков

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

Вот примеры красивых списков.

Как видно из примера, можно изменять внешний вид нумерации и самих элементов.

Создать обычный список можно вот так.

В стилях css нужно указать оформление для тегов ol. Обратите внимание, что в этом случае настройки будут применены ко всем спискам всего сайта, где используется этот файл стилей.

Рассмотрим сначала вариант с круглым оформлением списка. Вернитесь к коду списка. Там указан класс rounded-list. Вот именно с этим классом нужно повозиться, чтобы сделать такую красоту. Назвать класс вы можете как хотите.

Теперь рассмотрим квадратное оформление.

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

Профессиональный верстальщик должен предвидеть и понимать, что не все пользователи используют современные компьютеры. Не у всех установлены Windows 7, 8, 10. Существует процент пользователей, кто до сих пор сидит на Windows XP и использует старые версии браузера Internet Explorer.

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

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

Делайте что-то подходящее для всех или учитывайте все варианты браузеров.

Списки активно используются для автоматической нумерации блоков контента. Однако при использовании вложенных списков нельзя получить нумерацию подпунктов типа 1.1, 1.2, 1.3, поскольку каждый список будет независимым. Но то, что нельзя в ШТМЛ, можно возложить на стили.

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

, а элементы списка формируются тегами
1. . Вложенный список также начинается с
   , но этот тег должен располагаться внутри контейнера
   1. , именно так соблюдается корректность синтаксиса (пример 1).

      Пример 1. Обычный вложенный список

      
      
      
      
      
      
      
      

      
      
      1. Пункт 1
         
         
         
         1. Подпункт 1.1
         
         
         2. Подпункт 1.2
         
         
         3. Подпункт 1.3
         
         
         
         
      
      
      2. Пункт 2
         
         
         
         1. Подпункт 2.1
         
         
         2. Подпункт 2.2
         
         
         
         
      
      
      
      
      

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

      Рис. 1. Вид вложенного списка

      Теперь уберем встроенную нумерацию списков и создадим ее по новой, но уже в том виде, что нам требуется. Для этого понадобится три стилевых атрибута: counter-reset , counter-increment и content .

      counter-reset — задает некоторую переменную, которая будет хранить значение счетчика;

      counter-increment — увеличивает или уменьшает значение счетчика на указанное число;

      content — выводит значение счетчика при использовании аргумента counter(переменная) . Работает совместно с псевдоэлементами after или before .

      Для списка первого уровня переменную счетчика назовем list1 , а для второго уровня — list2 . Тогда инициация счетчиков для списков будет следующей.

      OL { counter-reset: list1; } /* Список первого уровня */
      OL OL { counter-reset: list2; } /* Список второго уровня*/

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

      , но только когда он располагается внутри другого тега
      .

      Увеличение значения счетчика происходит через селектор OL LI:before , к которому добавляются стилевые атрибуты counter-increment и content . Атрибут counter-increment со значением list1 повышает значение этого счетчика на единицу, а content: counter(list1) ". " выводит значение счетчика перед пунктом списка. Эти атрибуты работают в паре, поэтому включать их надо одновременно.

      OL LI:before { /* Список первого уровня */
      counter-increment: list1;
      /* Выводим значение в виде 1., 2.*/
      }
      OL OL LI:before { /* Список второго уровня */
      counter-increment: list2; /* Увеличиваем значение счетчика */
      }

      Для вложенного списка вновь применяем конконтентные селекторы (OL OL ) и одновременно используем вывод счетчика list1 и list2 , в этом случае мы и получим нумерацию нужного нам вида.

      Окончательный код приведен в примере 2.

      Пример 2. Вложенные списки с автонумерацией

      
      
      
      
      
      
      
      
      

      
      
      1. Пункт
         
         
         
         1. Подпункт
         
         
         2. Подпункт
         
         
         3. Подпункт
         
         
         
         
      
      
      2. Пункт
         
         
         
         1. Подпункт
         
         
         2. Подпункт
         
         
         
         
      
      
      
      
      

      Результат данного примера показан на рис. 2.

      

      Рис. 2. Вид автонумерации списка в браузере Опера

      Замечание

      Приведенный пример не работает в браузере Internet Эксплорер до 7 версии включительно, поскольку он не поддерживает ни одно из приведенных стилевых свойств.

      Поскольку браузер Internet Эксплорер не поддерживает множество интересных стилевых атрибутов, специально для него обычную нумерацию в списках следует оставить нетронутой. Для этого дастаткова убрать list-style-type: none . Но это также затронет и другие браузеры, в которых пример работает корректно, поэтому придется применить хаком — так имеется ввиду прием, когда разным браузерам дается разный стилевой код. Например, можно применить тегом !important . При добавлении !important к значению стилевого атрибута его важность повышается. Если заново определить значение того же атрибута без !important , он будет игнорироваться браузерами. Но только не в Intenet Explorer версии 6 и ниже.

      LI {
      list-style-type: none !important; /* Убираем нумерацию в браузерах Опера, Safari, Файер фох */
      list-style-type: decimal; /* Оставляем нумерацию в браузере ИЕ6 и ниже */
      }

      Заменяя этим кoдам строку с селектором LI в примере 2 получим вложенный список корректно работающий во всех браузерах.

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

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

      Каждое определение и термин является группой определения (или группой имя-значение). Можно иметь любое требуемое количество групп определений , но в каждой группе должны быть как минимум один термин и как минимум одно определение . Нельзя иметь термин без определения или определение без термина.

      Можно ассоциировать более одного термина с одним определением , или наоборот. Например, термин "кофе" может иметь несколько значений, и можно показать их одно за другим:

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

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

      содовая шипучка газировка кола Сладкий, насыщенный углекислым газом, напиток

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

      Поэтому списки определений используют одну пару элементов

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

      Простой список определений одного термина с одним определением будет выглядеть следующим образом:

      Термин

      Определение термина

      Термин

      Определение термина

      Термин

      Определение термина

      Который выводится следующим образом:

      Термин Определение термина Термин Определение термина Термин Определение термина

      В этом примере мы соединяем более одного термина с определением и наоборот:

      Термин

      Определение термина

      Термин

      Термин

      Определение которое применяется к обоим предыдущим терминам

      Термин, который может иметь оба следующие определения

      Одно определение термина

      Другое определение термина

      Что будет представлено следующим образом:

      Термин Определение термина Термин Термин Определение которое применяется к обоим предыдущим терминам Термин, который может иметь оба следующие определения Одно определение термина Другое определение термина

      Обычно не принято связывать несколько терминов с одним определением , но полезно знать, что это возможно, если возникнет такая необходимость.

      Выбор типа списка

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

      1. Определяются термины (или соединяются другие пары имя/значение)?
         • Если да, используйте список определений .
         • Если нет, не используйте список определений - перейдите к следующему вопросу.
      2. Важен ли порядок элементов списка?
         • Если да, используйте упорядоченный список.
         • Если нет, используйте неупорядоченный список.

      Различие между списками HTML и текстом

      Можно задаться вопросом, в чем различие между списком HTML и каким-то текстом с маркерами или числами, написанными вручную. Существует несколько преимуществ использования списка HTML :

      • Если потребуется изменить порядок элементов списка в упорядоченном списке, то вы просто перемещаете их в коде HTML . Если числа будут написаны вручную, то придется все просмотреть и изменить число каждого элемента, чтобы исправить порядок - что достаточно скучно, по крайней мере!
      • Использование списка HTML позволяет правильно оформить стиль списка. Если используется просто большой текст, то окажется значительно труднее оформить стиль отдельных элементов каким-либо более-менее полезным образом.
      • Использование списка HTML создает для контента подходящую семантическую структуру, а не просто "спискообразный" визуальный эффект. Это имеет важные преимущества, так как позволяет считывателям экрана сообщить пользователям с недостатками зрения, что они читают список, а не просто прочитать путаную смесь текста и чисел.

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

      Вложенные списки

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

      1. Глава один 1. Раздел один 2. Раздел два 3. Раздел три 2. Глава два 3. Глава три

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

      1. Глава один
         1. Раздел один
         2. Раздел два
         3. Раздел три
      2. Глава два
      3. Глава три

      Отметим, что вложенный список начинается после элемента

      1. и текста, содержащего список элемента ("Глава один"); а заканчивается перед элементом
      , содержащего список элемента. Вложенные списки часто формируют основу для навигационного меню Web -сайта, так как они являются удобным способом определения структуры Web -сайта.

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

      Пошаговый пример

      Давайте рассмотрим пошаговый пример, чтобы собрать все это вместе. Рассмотрим следующий сценарий :

      Мы создаем небольшой Web - сайт для Кулинарной школы. На основной странице мы покажем список классифицированных рецептов, связанный ссылками со страницами рецептов. Каждая страница рецепта перечисляет требуемые ингредиенты, замечания по этим ингредиентам и метод приготовления. Тремя категориями являются "Cakes" (включающая рецепты для "Plain Sponge ", "Chocolate Cake" и "Apple Tea Cake"); "Biscuits" (включающая рецепты "ANZAC Biscuits", " Jam Drops" и "Melting Moments "); и "Quickbreads" (включающая рецепты для "Damper" и "Scones"). Клиенту все равно в каком порядке будут выводиться категории и рецепты, он просто хочет, чтобы люди понимали, какие позиции являются категориями, а какие являются рецептами.Имеется три категории рецептов для представления, и порядок не важен - для этого больше всего подходит неупорядоченный список, поэтому добавим на страницу следующий код:

      Recipes

      • Cakes
      • Biscuits
      • Quickbreads

      Отступ для элементов li делает код удобнее для чтения, но не является обязательным.

      Теперь нужно добавить рецепты в качестве подпунктов, например, "Plain Sponge ", "Chocolate Cake" и "Apple Tea Cake" являются частью категории "Cakes". Для этого необходимо в каждой позиции списка создать вложенный список. Так как порядок неважен, то снова подходит неупорядоченный список. Чтобы упростить материал для учебного руководства, все рецепты можно соединить с одной страницей рецептов:

      Recipes

      • Cakes
        • Plain Sponge
        • Chocolate Cake
        • Apple Tea Cake
      • Biscuits
        • ANZAC Biscuits
        • Jam Drops
        • Melting Moments
      • Breads/quickbreads
        • Damper
        • Scones