HTML — правила оформления кода
HTML — правила оформления кода1. Синтаксис
1.1 Два пробела в качестве отступа
Отступы позволяют визуально оценить структуру документа и быстро переключаться между его фрагментами. Размер отступа настраивается в редакторе. Также во многих редакторах можно включить отображение пробельных символов и преобразовать отступы.
Хорошо<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Ваша страница</title>
</head>
<body>
<h2>Страница</h2>
<p>Текст</p>
</body>
</html>Плохо<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<title>Ваша страница</title>
</head>
<body>
<h2>Страница</h2>
<p>Текст</p>
</body>
</html>1.2 Теги и атрибуты записываются в нижнем регистре
Символы нижнего регистра не привлекают к себе большого внимания, и вам легче будет найти нужный.
<div> <img src="./i/userpic.png" title="Иванов Иван"> <a href="/profile/">Перейти в профиль</a> </div>Плохо
<DIV> <Img Src="./i/userpic.png" titLE="Иванов Иван"> <A href="/profile/">Перейти в профиль</a> </DIV>
1.3 Отдельные логические блоки отбиваются пустой строкой
Это облегчает работу с кодом и визуально создает структуру документа.
Хорошо<h2>Заголовок первого уровня</h2> <p>Первый параграф</p> <h3>Заголовок второго уровня</h3> <ul> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul> <h4>Заголовок третьего уровня</h4> <figure> <figcaption>Блок с картинкой</figcaption> <img src="../img/image.jpg"> </figure>Плохо
<h2>Заголовок первого уровня</h2> <p>Первый параграф</p> <h3>Заголовок второго уровня</h3> <ul> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul> <h4>Заголовок третьего уровня</h4> <figure> <figcaption>Блок с картинкой</figcaption> <img src="../img/image.jpg"> </figure>
./img/image.jpg">
</figure>1.4 Используйте только двойные кавычки
При написании значений атрибутов используйте только двойные кавычки.
Хорошо<div> <img src="first-img.jpg" alt="Первая картинка"> </div>Плохо
<div> <img src='first-img.jpg' alt='Первая картинка'> </div>
1.5 Не ставим пробелов перед и после символа =
Поскольку правая часть непосредственно относится к левой, то атрибут и его значение должны быть написаны без пробелов.
Хорошо<p>Это хороший пример</p>Плохо
<p id ="first" class= "post">Это плохой пример</p>
1.6 Между атрибутами один пробел
Не используем переносов строк между атрибутами, только один пробел. Перенос строк принят в css-документах, но не в html-разметке. Пишите все атрибуты элемента в строку.
Хорошо<figure> <img src="logo.Плохо
jpg" alt="Логотип">
<figcaption>Логотип компании</figcaption>
</figure><figure> <img src="logo.jpg" alt="Логотип"> <figcaption>Логотип компании</figcaption> </figure>
2. Валидность
Html-документ должен проходить проверку на валидность. Для проверки используйте валидатор.
3. !DOCTYPE
Первой строчкой в HTML-документе должен идти актуальный doctype. Это необходимо чтобы браузер верно отображал страницу. Это обеспечит единообразное отображение во всех современных браузерах.
<!DOCTYPE html> <html lang="ru"> <head>…</head> <body>…</body> </html>
4. Кодировка
Кодировка символов в html-документе всегда должна быть указана явно. Это обеспечит верное отображение текста. Кодировка utf-8 подходит всегда, за редким исключением.
<head> <meta charset="utf-8"> <title>Заголовок</title> </head>
5.
Подключение стилейФайлы со стилями подключаются внутри тега <head> при помощи <link>. Атрибут type для тега <link> указывать не нужно, так как значение text/css устанавливается по умолчанию.
<!DOCTYPE html>
<html lang="ru">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>…</body>
</html>Плохо: стилевой файл подключён в секции body<!DOCTYPE html>
<html lang="ru">
<head>…</head>
<body>
<link rel="stylesheet" href="style.css">
</body>
</html>6. Подключение скриптов
Скрипты при загрузке блокируют отображение содержимого страницы. По этой причине следует подключать их в самом конце html-документа.
При подключении скриптов в теге <script> атрибут type указывать не нужно, так как значение text/javascript устанавливается по умолчанию.
</body><!DOCTYPE html>
<html lang="ru">
<head>…</head>
<body>
<!-- Содержимое страницы -->
<script src="app.js"></script>
</body>
</html>Плохо: скрипт подключается в секции <head><!DOCTYPE html>
<html lang="ru">
<head>
<script src="app.js"></script>
</head>
<body>…</body>
</html>7. Атрибуты и их порядок
У HTML-элементов атрибут class пишется первым. Единообразное написание помогает легче считывать код и по классам быстрее разбираться в назначении блоков.
Остальные атрибуты могут быть расставлены в любом порядке, но тоже единообразно для схожих элементов.
<a href="/" data-name="element">Ссылка</a> <input type="text" name="test"> <img src="img.jpg" alt="Картинка">
8.
Логические атрибутыДля логических атрибутов (например, checked, disabled, required) значение не указывается, а сами атрибуты указываются последними и в единообразной последовательности во всём документе.
<!-- checked="checked" необязательно --> <input type="checkbox" required checked> <input type="text" disabled> <select> <option value="1" selected>1</option> </select>
9. Подписи
inputДля улучшения опыта пользователя, при нажатии на подпись поля, само поле должно активироваться. Для этого поле формы связывается с описанием при помощи идентификатора и атрибута for тега <label>.
<input type="radio"> <label for="choose">Радио кнопка</label>Хорошо: элемент формы radio и подпись обёрнуты в label
<label> <input type="radio"> Радио кнопка </label>Плохо: подпись не связана с элементом формы
<input type="radio"> Радио кнопка
10.
Атрибут языкаДля элемента <html> в атрибуте lang должен указываться верный язык документа. Это помогает системам перевода определить, какие использовать языковые правила.
<!DOCTYPE html> <html lang="ru"> <head>…</head> <body>…</body> </html>
Рекомендации по написанию HTML-кода начинающим web-разработчикам / Хабр
Очевидные вещи, которые выделил для себя. Хотелось бы, чтоб грамотные люди дополнили этот небольшой список. Цель — сделать код и свой, и других — более красивым, валидным, легко понимаемым и семантически грамотным.
Использование тега <br />
В основном это бывает нужно, для улучшения восприятия текста, точнее для форматирования одного элемента. Поэтому, когда нам нужно разделить несколько элементов или просто, чтоб новый элемент был в новой строчке, нужно использовать блочный элемент (div, p, h2.
.., у которых по умолчанию css-свойство display:block, но при этом, старайтесь не плодить лишних элементов). И если нужно сделать отступ, не нужно вставлять десять <br>, а нужно описать в css свойство margin.
Использование атрибута style и свойство !important
Это нужно в исключительных случаях, когда место уникальное. Почти всегда нужно использовать css-класс со свойствами вынесенными в css-файл. И даже если вам нужно спрятать элемент (display:none), лучше создать универсальный класс, (например css: .hidden {display:none;}), и писать <span class=”error hidden”>.
Устаревшие элементы и атрибуты HTML
<CENTER>, <FONT>, border, color, cellpadding, cellspacing, width (для таблиц)
Все они заменяются свойствами в CSS, поэтому не используйте вышеперечисленные элементы.
Также, атрибут name для XHTML не валидный — его не нужно использовать (все делается через id).
Элемент <label>
Специально, чтоб описывать назначение инпута есть элемент <label> (в HTML5 для этой цели можно использовать атрибут placeholder). Поэтому везде, где есть input, почти всегда, должен быть <label for=”input_id”>.
Неразрывный пробел и перенос слов
Старайтесь предвидеть возможность переноса слов и, где это нужно, используйте чтобы предотвратить разрыв. Если контент динамический и нужно держать его одной строчкой, можно использовать css-свойство, которое предотвращает перенос слов в новую строку — white-space:nowrap;
Расположение кнопок
Справа должна быть наиболее вероятная для нажатия кнопка. (Например 1.Cancel 2.Ok), это не относится к выводу информации — впереди должно быть самое важное. Но поскольку пользователь проверяет все возможные действия, то не нужно заставлять его возвращаться назад, даже взглядом.
Названия колонок, кнопок, действий
Старайтесь придерживаются правила — отдельный элемент — новое предложение и соответственно — пишите его с заглавной буквы (Submit, Order now). Также не нужно писать целиком заглавными слово, предложение или абзац. Если это нужно, есть css-свойство text-transform:uppercase;
Подчеркивание и выделение
Не подчеркивайте никакие элементы кроме ссылок. Для выделения используйте <strong>, <em> с соответствующими им css-свойствами font-weight:bold, font-style:italic или изменяйте сам шрифт. Если семантически фрагмент не выделяется, а только визуально, используйте <span>.
Сюда не вошли, может, более очевидные вещи, такие как форматирование или как выбирать названия для id элементов, но это относиться, на мой взгляд, к стилю, а не к культуре написания кода. CSS может и не нужно всем знать досконально, но структуру HTML-документа должны понимать все разработчики.
Надеюсь, данная заметка будет полезна и дополнена/исправленна Вашими коментариями.
Написание текста в HTML для начинающих
Написание текста в HTML для начинающих© Paul Cooijmans — сертифицированный программист, сертифицированный веб-дизайнер, CCNA
Введение
HTML — язык гипертекстовой разметки — это компьютерный язык, на котором написаны веб-страницы. HTML-файл можно просматривать в любом браузере, и поэтому он не зависит от платформы, в отличие от файла текстового процессора. Файл HTML также намного легче по размеру, чем файл текстового процессора, поэтому его можно отправить по электронной почте быстрее и он занимает меньше места на диске.
Ниже поясняется, как можно просто разместить текст в HTML. Рассматриваются только самые элементарные аспекты HTML. Для дальнейшего изучения можно обратиться к книге или веб-руководству. Для написания текста с простой версткой в HTML достаточно и этих элементарных вещей.
Шаблон
Сначала сделайте шаблон для всех будущих документов.
Запустите текстовый редактор, например Блокнот. Введите (или скопируйте и вставьте) следующее:
Конец пустой строкой ( Введите ), здесь, конечно, невидимой. Сохраните файл под именем template.html . Также допускается template.htm ; в прошлом расширения могли состоять только из трех букв, отсюда и привычка использовать .htm вместо .html .
Обратите внимание, что при сохранении в поле «Тип файла:» необходимо выбрать вариант «все файлы», иначе расширение .txt будет добавлено (Блокнотом).
Первое сообщение
Напишите текст в обычном текстовом редакторе. Это имеет преимущества автоматической проверки орфографии и завершения слов. Имейте в виду следующее:
1 Все, что вы пишете, является либо «заголовком», либо абзацем.
2 Абзацы разделяются пробелом.
3 Абзац состоит либо из обычного текста, либо из вертикального списка, например:
Джон
Пит
Джек
И т.
д.
4 Если абзац состоит из обычного текста, не следует вручную начинать новую строку внутри абзаца; это бесполезно, потому что при просмотре конечного файла всегда будет автоматический перенос слов в конце каждой строки. И точные позиции переноса непредсказуемы, так как они зависят от разрешения экрана и настроек браузера читалки, а также от того, как текст будет размещен между элементами навигации на конечной веб-странице веб-мастером. Когда позиция переноса случайно совпадает с введенной вручную новой строкой, никто не увидит разницы.
Когда текст готов, выделите его (например, с помощью Ctrl-a или с помощью мыши) и скопируйте его с помощью Ctrl-c .
Откройте файл template.html в текстовом редакторе (Блокнот) и сразу сохраните его под другим именем, например. text1.html . Не используйте пробелы в именах файлов.
Вставьте текст между тегами
en с помощью Ctrl-v . Все, что находится между этими тегами, формирует видимое содержимое страницы.
Теперь у вас есть что-то вроде:
Мой попугай
У меня есть попугай по имени Пьетье. Он умеет летать и хорошо играть. В дневное время его выпускают из клетки. Он ест и пьет в своей клетке. У него много игрушек:
Игрушки Пьетье
Зеркало
Колокольчик
Еще одно зеркало
Еще один колокольчик
И многое другое
На этом статья о попугайчике Пьетье заканчивается.
Скопируйте заголовок, здесь «Мой попугай», и вставьте его между тегами
Сохраните файл. Найдите его и откройте двойным щелчком; открывается в стандартном браузере. Он покажет весь текст, собранный вместе. Для оформления страницы требуется дополнительный HTML-код.
Поместите заголовок (тот, что между тегами body) между
en
, примерно так (h для заголовка , заголовок ):Мой попугай
Браузер теперь будет отображать его большим, полужирным шрифтом и окруженным пробелами. Дополнительный заголовок можно сделать с помощью
en
:Игрушки Пьетье
Для еще меньших заголовков доступны от
до
.
Абзац состоит из
и
:У меня есть попугай по имени Пьетье. Он умеет летать и хорошо играть. В дневное время его выпускают из клетки. Он ест и пьет в своей клетке. У него много игрушек:
Браузер позаботится об окружающих пробелах и переносе слов.
Вертикальный список можно сделать следующим образом:
Зеркало
Звонок
Еще одно зеркало
Еще один звонок
И многое другое
Тег
начинает новую строку. Чтобы сэкономить время, вы можете ввести его один раз, а затем скопировать и вставить в нужное место.
Просто нажимаю Введите , если , а не создает новую строку в HTML.
Всего у нас теперь есть:
<тело>
Мой попугай
У меня есть попугай по имени Пьетье. Он умеет летать и хорошо играть. В дневное время его выпускают из клетки. Он ест и пьет в своей клетке. У него много игрушек:
Игрушки Пьетье
Зеркало
Звонок
Еще один звонок
Еще одно зеркало
И многое другое
На этом статья о попугае Пьетье заканчивается.