Как правильно верстать в 2022 году. Часть 1
Вступление
Меня зовут Николай и я Frontend-разработчик. Хочу рассказать о самых распространённых ошибках в вёрстке современных проектов.
Дело в том, что лишь малая часть современных фронтендеров обращает внимание на работу с HTML и CSS, предпочитая готовые решения, вроде UI-библиотек и систем сеток. Но эти решения неидеальные и приходится дописывать обёртки вокруг них, видоизменять код, переписывать стили и совершать прочие действия для соответствия требованиям проекта. Тут-то и начинаются проблемы: вёрстка местами становится избыточной, стили переназначются через important и с каждым релизом проект всё сложней поддерживать. Я уже не говорю об удобстве использования и доступности. Об этом думают вообще в последнюю очередь.
В этой статье я расскажу лишь о небольшой части проблем, которые можно достаточно быстро решить, не прибегая к радикальному переписыванию больших частей проекта.
Содержание
Используйте правильные теги.
Как правильно вкладывать теги друг в друга.
Работа с медиаконтентом.
Пишем таблицы на HTML правильно.
a или button? Работа с интерактивными элементами и как выбрать правильный тег.
Различный теги для медиа-контента.
Прекратите писать велосипеды! Как мы можем стилизовать дефолтные HTML-элементы.
Пишем доступные формы.
Избыточная вёрстка. Как облегчить разметку.
Современные фишки HTML и CSS способные облегчить нам жизнь.
Экспериментальные технологии, входящие в стандарт.
Используйте правильные теги
Исторически так сложилось, что HTML служит для описания документов. То есть язык гипертекстовой разметки был придуман для обмена документами (в основном научного характера) и не предназначался для построения сложных веб-приложений и сайтов. Благодаря развитию стандарта стало полегче, но большинство современных разработчиков всё ещё предпочитают <div> в качестве главного тега и засовывают в него любой контент, вплоть до изображений (через background-image).
И я прекрасно их понимаю, <div> — очень удобный тег: у него нет встроенных стилей, его можно вкалывать в другие дивы. Чем не кандидат на лучший тег. Но при таком использовании тегов мы теряем главные преимущества HTML:
семантику — чёткую структууа контента, где каждый тег говорит о том, зачем он здесь и что ожидается внутри;
доступность — HTML может рендериться не только браузером, но и другими инструментами, вроде скрин-ридеров, роботов-поисковиков и т.д. И в наших силах упростить для них парсинг страниц.
Про какие теги нам следует стоит помнить?
Структурные теги документа
Почти любой сайт или приложение можно разбить на 3 большие части: <header>, <main> и <footer>. Сейчас это стало неким стандартом в дизайне. Некоторые части приложения повторяются от страницы к странице, и мы можем выделить их в отдельные части (шапку и подвал).
Шапка — это контент вверху страницы.
Там обычно размещается логотип, навигационное меню и другие элементы, которые должны быть доступны пользователю с любой страницы. Тег <header> не обязательно один на странице, он может озаглавливать любую независимую часть (например, быть частью модального окна).
Подвал — нижняя часть сайта, где обычно дублируется навигация и располагаются контакты компании. Также, как и шапка, <footer> может быть не один и использоваться для других независимых частей, помимо страницы.
Тег <main> обычно обозначает место для основного контента, который не повторяется от страницы к странице.
Плохо
<body> <div> ... </div> <div> ... </div> <div> ... </div> </body>
Хорошо
<body> <header> ... </header> <main> ... </main> <footer> ... </footer> </body>
Помимо трёх базовых семантических тегов существует ряд других.
Разберём их ниже.
<article>
Это независимый блок на странице, который без внешнего контекста может существовать в рамках других сайтов и сервисов. Это может быть статья в блоге, твит, виджет VK, коментарий к публикации и т.д. Желательно, чтобы у этого блока был заголовок.
<section>
Неотделяемая от основного контента секция на странице. Например, это может быть блок на лендинге. Чаще всего имеет заголовок.
<aside>
Побочный, косвенный контент на странице, находящийся в стороне. Может иметь заголовок и быть не в одном экземпляре. Главная ошибка — использовать его только для боковой панели. Этот тег многогранен и может использоваться для любых блоков, не имеющих основное значение.
<nav>
Блок навигации с ссылками на другие страницы или разделы текущей страницы. Может использоваться только для основной навигации, а не для каждой группы ссылок. Например навигацию в <footer> не имеет смысла упаковывать в <nav>, так как подвал сам по себе предполагает присутствие навигационных элементов.
И этот тег не обязательно должен включать в себя список ссылок. Туда может входить навигация любого типа, главное, чтобы она считалась основной.
<address>
В этот тег нужно вкладывать контактные данные. У него по-особенному работает «область видимости» — контактные данные в <address> относятся к ближайшему родительскому блоку <article>, либо к <body>, если он находится вне <article>.
Заголовки
Как и в любом документе на HTML-странице могут содержаться заголовки. По стандарту мы обязаны всегда указывать заголовок первого уровня <h2>. Остальные уровни опциональны, но они должны быть в иерархической последовательности! Это значит, что мы не можем <h4> поставить после <h2>. Чтобы лучше это понять, посмотрим код ниже:
<body> <header> ... </header> <main> <h2> Наша кондитерская самая кондитерская из всех кондитерских </h2> ... <section> <h3> Почему наши булочки лучшие? </h3> ... <h4> Мука высочайшего сорта </h4> ... <h4> Много корицы </h4> ... <h5> Корица со Шри-Ланки</h5> ... <h4> Минимум сахара </h4> ... <h5> </section> </main> <footer> ... </footer> </body>
..
<section>
<h3> Почему наши булочки лучшие? </h3>
...
<h4> Мука высочайшего сорта </h4>
...
<h4> Много корицы </h4>
...
<h5> Корица со Шри-Ланки</h5>
...
<h4> Минимум сахара </h4>
...
<h5>
</section>
</main>
<footer>
...
</footer>
</body>Как вы видите, заголовки выстраиваются в иерархию и идут один за одним, формируя логичную структуру.
По поводу использования нескольких заголовков <h2>: вы МОЖЕТЕ использовать несколько заголовков первого уровня, если это требуется на странице. Когда-то давно некоторые злые SEO-специалисты настоятельно не рекомендовали так делать, хотя спецификация ничего не говорит на этот счёт. Сейчас мы, конечно, не узнаем действительно ли поисковики снижали сайт в выдаче за использование двух и более заголовков первого уровня, но уже даже многие SEOшники признали, что этот фактор малозначителен при ранжировании сайтов.
Блочные теги
<p>
Простой тег для абзацев, именно для разделения текстовых частей. Не используйте <p> для коротких фраз внутри интерфейса. С точки зрения доступности, этот тег очень крут, дает пользователям с ограниченными возможностями «прыгать» между ними с помощью шорткатов.
<figure> и <figcaption>
Это иллюстрация с необязательной подписью. Во многих книгах изображения подписываются как «Рис. 1 — такой-то объект». Вот это и есть <figure>. Но в рамках HTML назначение этого тега гораздо шире. Мы можем разместить внутри цитату (см. ниже), фрагмент кода, какую-нибудь диаграмму. В общем <figure> — это любой объект с подписью. Подпись размещается внутри тега <figcaption>, который, в свою очередь, вкладывается в <figure>.
<figure> <img src="https://example.com/cat.jpg" alt="Сердитый кот"> <figcaption>Кот, который зол на своего хозяина</figcaption> </figure>
<blockquote>
Тег для вставки длинных цитат.
Может иметь аттрибут cite, в котором указывается URL на источник цитаты, а также хорошо совместим с тегом <figure>, где в <figcaption> можно указать автора и название источника.
<figure> <blockquoute cite="https://www.youtube.com/watch?v=ZXsQAXx_ao0"> Just Do It! </blockquote> <figcaption> Shia LaBeouf, <cite>Motivational Speech</cite> </figcaption> </figure>
<hr>
Одиночный тег для разделения контента. Про него забывают и заменяют на border-bottom, но помимо визуального отображения этот тег несёт семантический смысл — тематическое разделение абзацев.
<pre>
Тег для вывода предварительно отформатированного текста. Имеет ограниченную область использования — ASCII-арт, вывод программного кода. Не рекомендую использовать для других задач, так как тег довольно ненадёжен и непредсказуем. Например, мы потеряем всё форматирование, если сборщик проекта минифицирует HTML.
Списки
Списки в вебе просто везде! Но очень редко их верстают как списки. Например, преимущества компании на лендинге это что? Правильно, список. Они бывают двух видов: упорядоченные и неупорядоченные. Я в этот раздел также добавил список описаний Description list.
<ul>
Неупорядоченный список применяется в том случае, если мы безболезненно можем поменять порядок элементов. Примеры:
<ul> <li>Удобная оплата</li> <li>Быстрая доставка</li> <li>Гарантия в 1 год</li> </ul>
<ol>
Упорядоченный список применяется тогда, когда нам важен порядок элементов. Например:
<ul> <li>Оформляете заявку</li> <li>С вами связывается менеджер для уточнения деталей</li> <li>Совершаете оплату</li> <li>Ожидаете доставку</li> </ul>
<dl>, <dd>, <dt>
Списки описаний применяются для формирования списков терминов.
<dl> <dt>HTML</dt> <dd>Язык разметки гипертекста, с помощью которого формируют контент веб-страницы</dd> <dt>CSS</dt> <dd>Язык для описания стилей веб-страницы</dd> <dt>JS</dt> <dd>Язык программирования, часто применяемый для написания веб-приложений</dd> </dl>
Строчные теги
<b>, <i>, <u>, <s>
Чудесные теги, которые чаще всего используют не по назначению. Они несут исключительно визуальное выделение текста. Если вы сбросите их стили, то они ничем не будут отличаться от обычного текста. В данный момент их можно использовать как теги для дополнительного выделения текста, которое вы оформите с помощью CSS. И да, тег <i> НЕ предназначен для иконок.
<em>
Как и <i> выделяет текст курсивом. Но зачем нам два тега для одного и того же? В том то и дело, что они разные.
<i>, как говорилось выше, не несёт никакого семантического смысла, это просто визуальное выделение, а <em> делает акцент на обёрнутом им тексте, который меняет смысл всего предложения. Например:Я <em>просто обожаю </em>, когда верстальщики используют только дивы.
<strong>
Браузер выделяет текст обёрнутый тегом <strong> полужирным. Но помимо визуального выделения, текст обретает семантический смысл — большую важность по сравнению с остальным текстом вокруг.
<cite> и <q>
Оба тега связаны с цитирований, но применяются в разных случаях. <cite> — тег, в который мы оборачиваем текст, который отсылается к другому документу/произведению/etc.
Больше информации вы сможете найти в стандарте <cite>[ISO-0000]</cite>
<q> похож на <blockquote>, разница лишь в том, что <q> применяется для строчных цитат.
<q cite="https://russian.rt.com/business/news/966657-rubl-dollar-evro"> Рубль растёт к доллару и евро </q> — сообщает RT со ссылкой на ФАН.
<code>
Применяется для оформления программного кода внутри текста. Если требуется вывести многострочный блок кода, то лучше использовать <code> в связке с тегом <pre>.
<time>
Тег для обозначения даты и времени. У него может быть атрибут datetime, куда необходимо передать дату и время в формате ISO.
<time datetime="1995-11-24">24 ноября 1995 года</time>
<sub> и <sup>
Используются для добавления в текст индексов и степеней. Удобны для описания формул.
x<sub>1</sub> + x<sub>2</sub> = y<sup>2</sup> <!-- Икс первый плюс икс второй равно игрек в квадрате -->
<del> и <ins>
Нужны, чтобы показать, что из текста было что-то удалено или добавлено.
При этом они также обозначают факт изменения текста семантически, а не только визуально.
Вася пришёл домой в <del><time>19:00</time></del> <ins><time>23:00</time></ins>
<br>
Простой тег для переноса строки, думаю, все про него знают, потому что альтернативы нет.
Интерактивные элементы
<details>
Нативный дропдаун прямо в HTML! На самом деле не совсем так. <details> применяется, чтобы скрыть часть информации, которую можно получить, кликнув по кнопке, описанной во внутреннем теге <summary>.
Рубль растет на фоне заявлений Запада о введении санкцийпротив России
<details>
<summary>Подробнее</summary>
Согласно данным валютных торгов на Московской бирже, по состоянию
на 22.40 мск курс доллара находился на уровне 78,7 рубля (-1,6%),
курс евро снижался до 89,3 рубля (-0,9%).
</details>Внимание! Данный тег не поддерживается IE и старыми версиями основных браузеров.
Другие интересные теги
<abbr>
Тег для аббревиатур.
<abbr title="HyperText Markup Language">HTML</abbr> — основной язык разметки веб-приложений
<dfn>
Тег для выделения термина. Элемент<p>, пара <dt>/<dd> или <section>, который является ближайшим предком <dfn> считается определением термина.
<p> <dfn>JavaScript</dfn> — язык программирования, используемый в основных веб-браузерах. </p>
<kbd>
Изпользуется для выделения названия клавиш в клавиатурных сочетаниях.
Чтобы открыть диспечер задач, нажмите сочетание клавиш <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Esc</kbd>.
<samp>
Тег для обозначения вывода компьютерной программы. По-умолчанию выводится моноширинным шрифтом.
<p> Приложение упало с ошибкой:<br> <samp>404 Неизвестный ресурс</samp>
<var>
Элемент для вывода математических переменных
Для рассчёта расстояния <var>S</var>, необходимо перемножить скорость <var>V</var> на время <var>t</var>.
<bdi> и <bdo>
Теги, связанные с направлением текста ltr и rtl. Необходимы, когда мы встраиваем в текст, написанный языком в одном направлении, фразу или предложение написанное в другом.
<bdi> изолирует от окружающего текста фрагмент, который может поменять направление (но не обязательно поменяет).
<bdo> в свою очередь, переопределяет направление текста так, что текст внутри тега отображается в другом направление, нежели чем окружающий.
<p dir="ltr"> Это <bdi>арабское слово</bdi> будет перевёрнуто. </p> <!-- Это оволс еоксбара будет перевёрнуто.
--><mark>
Элемент, выделенный по причине его актуальности в определённом контексте. Чаще всего используется для выделения ключевых фраз, введенных пользователем, в результатах поиска. По умолчанию, на текст внутри этого тега применяется жёлтый фон.
<meter>
Современный компонет, который может показывать шкалу с наполнением разного цвета, в зависимости от указанных значений. Используется преимущественно для отображения числовых значений, например, количества результатов поиска, объема жидкости, давления и др.
Имеет следующие аттрибуты:
min— минимальное значение шкалы;max— максимальное значение шкалы;low— предел, при достижении которого, значение считается низким;optimum— предел, при достижении которого, значение считается оптимальным;high— предел, при достижении которого, значение считается высоким;value— собственно само значение.
<p>Температура воды</p> <meter value="0" max="100" low="10" high="60">Низкая</meter> <meter value="30" max="100" low="10" high="60">Нормальная</meter> <meter value="80" max="100" low="10" high="60">Горячая</meter> <meter value="100" max="100">Кипяток</meter>
Текст внутри является фолбэком для браузеров, которые не поддерживают этот тег.
<progress>
Тег для отображения индикатора, показывающего ход выполнения задачи. По простому — прогресс-бар.
<progress max="100" value="70">70%</progress>
<wbr>
Одиночный тег, указывающий, в каком месте можно переносить цельную строку. Является аналогом символа ­, с той лишь разницей, что не добавляет символ переноса в конце строки.
<ruby>, <rt>, <rp>
Теги, в основном используемые для иероглифов.
Не вижу смысла подробно их разбирать. Если интересно, можно почитать здесь.
<big>, <small>, <tt> и прочая эзотерика
Просто забудьте об этих тегах. Стандарт говорит, что они больше не поддерживаются и не рекомендует их использовать. Полный список здесь.
Заключение части 1
В этой статье ничего не сказано про элементы форм, таблицы, всякий медиа-контент, а также теги <a> и <button>. Об этом в следующих публикациях.
Также, я ничего не сказал по <div> и <span>, которые являются базовыми элементами для вёрстки. Их стоит использовать только в том случае, когда ничто из вышеперечисленного не подошло.
Верстка таблиц – семантическая верстка таблиц
Верстка таблиц всегда была сложной задачей для верстальщика. В древние времена (до HTML5) дело отдавали на откуп тегу table, и, пока не было понятия семантической верстки, верстальщики организовывали табличную верстку через теги tr/td, и этих HTML кодов вполне хватало.
Но – пришли новые технологии, и нужно было «подружить» блочную верстку с поисковыми роботами (которые до этого таблицы, в общем-то, игнорировали), что привело к появлению более сложной семантической верстки. Ниже мы расскажем, как применять эту верстку сайта, какие используются теги и как в этом замешаны CSS стили.
Верстка таблиц
Семантическая верстка таблиц
Структура таблиц
Строки и ячейки таблицы
Объединение ячеек
Выравнивание содержимого таблицы по вертикали
Заголовок таблицы
Важно знать
Что почитать по теме
Подведем итоги
Верстка таблиц
База верстки – это 3 тега: table, tr, td. Table – это заголовок всей таблицы, он говорит браузеру, что все в его пределах нужно верстать в колонках и ячейках. Внутрь table вложены заголовки строк – tr. А вот в уже в строки вложен заголовок столбца и сам столбец, эта честь отведена тегу td. Получается каскадная структура – есть table, внутри него прописаны ряды, для каждого ряда указаны колонки с содержимым ячейки (для простоты колонки td можно считать ячейками):
<table> <tr> <td>123</td> <td>456</td> <td>789</td> </tr> <tr> <td>0ab</td> <td>cde</td> <td>fgh</td> </tr> </table>
Учтите, что для того, чтобы таблица отображалась с границами, вам нужно прикрутить к ней стиль CSS – сами по себе элементы table отображаются без границ, с минимальной возможной шириной и стандартным шрифтом.
Добавление стиля оформления – такое же, как и для других тегов, можете обращаться сразу к table/tr/td или прописать классы/id и задать ширину/другие параметры отдельным классам. Основные полезные команды стилей: border (толщина/заливка/цвет рамки), width (ширина, в % или фиксированная), border-collapse (объединить двойные границы в одинарные), padding (отступы).
Еще одна важная функция, относящаяся к базовой верстке – объединение ячеек. Задается соединение блочных элементов атрибутами colspan (сколько ячеек вниз от текущей будет объединено) и rowspan (сколько ячеек вправо от текущей будет объединено). Естественно, количество объединяемых ячеек не должно превышать общее количество ячеек доступных с этой точки ячеек, иначе с дизайном сайта можно будет попрощаться – все поедет. К примеру:
<table> <tr> <th>Имя коровы</th> <th>Средний удой молока в день</th> <th>Удой молока в месяц</th> </tr> <tr> <td>Машка</td> <td rowspan="2">20</td> <td>570</td> </tr> <tr> <td>Буренка</td> <td rowspan="2">770</td> </tr> <tr> <td>Авдотья</td> <td>15</td> </tr> </table>
Содержимое CSS:
table {
border: 2px solid black;
border-collapse: collapse;
width: 50%;
}
td {
border: 1px solid black;
}Результат:
Обратите внимание: поскольку мы объединяем элементы td с атрибутом rowspan, нам нужно выкинуть из таблицы ячейки td, которые будут замещены – поэтому первой строкой мы задаем заголовки таблицы, тегом tr и тремя тегами td мы размечаем 3 ячейки второго ряда, а вот в третьем и четвертом ряду мы уже указываем по 2 ячейки – 3-я ячейка в 3 и 4 ряду прописана через rowspan в предыдущем ряду.
Если добавить лишнюю ячейку, взаимное расположение блочных элементов «поедет».
Семантическая верстка таблиц
Как вы могли заметить, в примере выше мы использовали в первом ряду тег th вместо td. Это – первый шажок к семантической верстке таблиц. Сразу отметим, что семантическая верстка на адаптивную верстку никак не влияет – эти верстки никак друг с другом не связаны. Адаптивная верстка используется для создания сайтов, дружелюбных к маленьким размерам экрана – в этом случае макетом сайта сразу предполагается возможность сужения и переразмещения блоков для того, чтобы добиться наилучшего отображения для данной ширины экрана. Семантическая верстка – это когда мы закладываем в таблицу семантику, то есть смысл, для поисковых роботов и программ для чтения с экрана.
В семантической верстке используют теги, которые помогают машинам понять контекст той или иной строки/ячейки/области таблицы.
Семантический подход к верстке таблиц стал сегодня наиболее распространенным и популярным. Он является очевидной противоположностью визуальному или адаптивному, для которого имеет цену исключительно внешний вид HTML-страницы.
Применительно к семантической верстке на первый план выходит передача смысловой важности содержимого, которое размещается в таблице. Задействование такого способа заметно повышает доступность контента, что дает сразу два очень важных преимущества в виде лучшего понимания со стороны:
- браузеров и различных вспомогательных программ, включая читающих и распознающих информацию с экрана компьютера;
- поисковых роботов, выводящих страницу с грамотно сверстанной таблицей на более высокие места выдачи.
Еще большего эффекта удается добиться, если правильно сочетать семантическую верстку таблицы с CSS (каскадными таблицами стилей).
Структура таблиц
Здесь разберемся с использованием тегов thead, тегом tbody и tfoot. Все 3 используются для того, чтобы показать браузеру/программам/роботам о логическом разделении таблицы – вы можете воспринимать их, как head/body/footer страницы, только примененным к конкретной таблице.
Thead – это тег, который ставится перед tr в шапке таблицы. В thead вместо td используется th, потому что каждая ячейка содержит в себе заголовок колонки, и это нужно как-то подчеркнуть. Собственно, браузер это и подчеркивает – когда мы используем для табличных данных thead и th, они отображаются жирным шрифтом и располагаются по центру ячейки, даже если мы не прописываем это в CSS:
<thead> <tr> <th>Имя коровы</th> <th>Средний удой молока в день</th> <th>Удой молока в месяц</th> </tr> </thead> …
Tbody – это тег, который показывает, что здесь находится тело таблицы. Таких тегов может быть несколько – это удобно, когда вам нужно создать несколько разделов таблицы, и каждому назначить разные стили табличных данных.
… <tbody> <tr> <td>Машка</td> <td>20</td> <td>570</td> </tr> </tbody> <tbody> <tr> <td>Буренка</td> <td>25</td> <td>770</td> </tr> </tbody> <tbody> <tr> <td>Авдотья</td> <td>15</td> <td>440</td> </tr> </tbody> …
CSS:
.
first {
color: red;
}
.second {
color: blue;
}
.third {
color: green;
}Результат:
Наконец, tfoot используется для того, чтобы подвести какой-либо итог таблицы. Часто в tfoot выносится сумма:
… <tfoot> <tr> <td>Всего:</td> <td>60</td> <td>1780</td> </tr> </tfoot>
Результат:
Заметьте, что tfoot не накладывает на содержимое ячеек никакого стиля – вам нужно прописывать его самостоятельно в CSS.
Строки и ячейки таблицы
Как мы уже говорили, строки прописываются через tr, ячейки прописываются через td. Если вы прописываете первую строку через thead – крайне желательно выделить ячейки первой строки тегами th, а не td.
Th показывают браузеру и всем интересующимся программам, что они имеют дело конкретно с заголовочной ячейкой. Тем же программам-ридерам это позволяет правильно зачитать таблицу для человека с плохим зрением – программа понимает, что нужно зачитывать данные сверху вниз, от одного столбика к другому, с отдельным выделением заголовочной ячейки – чтобы слушатель понял, что за заголовком последует информация.
Еще стоит отметить, что управляющие семантикой теги thead, tbody и tfoot практически никак не влияют на саму таблицу – если вы уберете их, все останется на своих местах.
Еще раз повторимся, что эти семантические теги нужны именно для того, чтобы придавать строкам, столбцам и ячейкам смысл – вот здесь мы объявляем заголовки, вот тут у нас основная информация, а вот здесь мы суммируем все.
Объединение ячеек
Основные правила объединения ячеек мы давали выше – вам нужно использовать rowspan и colspan. Первый объединяет ячейки вниз от текущей, второй объединяет ячейки вправо от текущей.
Оба можно использовать одновременно – при rowspan = colspan = 2 вы получите квадрат размером 2 на 2 ячейки. Если объединяете ячейки, то удаляйте лишние – иначе таблица сломается.
Для большего понимания целесообразно привести пример таблицы с объединенными ячейками. Она имеет такой вид.
Чтобы получить данную визуальную реализацию табличного формата, необходимо написать соответствующий исходный программный код. Сначала задаются базовые параметры таблицы, не предусматривающие объединения столбцов или строк.
<table> <thead> <tr> <th>Сотрудник</th> <th>Зарплата</th> <th>Бонусы</th> <th>Менеджер</th> </tr> </thead> <tbody> <tr> <td>Алексей Примадонин</td> <td>750$</td> <td>63$</td> <td>Кодовенок Хекслетович</td> </tr> <tr> <td>Вениамин Редакторович</td> <td>1200$</td> <td>0</td> <td></td> </tr> <tr> <td>Джедай Падаванов</td> <td>500$</td> <td>100$</td> <td>Королева Верстальщина</td> </tr> <tr> <td></td> <td></td> <td></td> <td>Всего: 2613$</td> </tr> </tbody> </table>
Далее необходимо избавиться от пустых ячеек, что позволит расположенной по соседству информации занять все предусмотренное объединением пространство.
Для этого используются два HTML-атрибута:
- объединение столбцов производится посредством включения в код colspan;
- аналогичная операция в отношении строк – через атрибут rowspan.
Каждому из них присваивается определенное значение. Оно показывает, сколько столбцов или строк необходимо объединить. Ячейки, место которых занимает объединенная, в обязательном порядке удаляются. В противном случае структура таблицы будет нарушена. Программный код для объединения ячеек в соответствии с приведенным выше скриншотом выглядит следующим образом.
Сначала — для сотрудников, закрепленных за одним менеджером.
<tr> <td>Алексей Примадонин</td> <td>750$</td> <td>63$</td> <td rowspan="2">Кодовенок Хекслетович</td> </tr> <tr> <!-- В этой строке теперь только три столбца --> <td>Вениамин Редакторович</td> <td>1200$</td> <td>0</td> </tr>
Затем – для итоговой строки таблицы.
<tr> <!-- В этой строке всего один столбец, который растянется на 4 --> <td colspan="4">Всего: 2613$</td> </tr>
Код для объединения ячеек размещается после установки базовых параметров таблицы. Но до последнего тэга </table>.
Выравнивание содержимого таблицы по вертикали
Табличная верстка часто предусматривает необходимость выровнять контент по вертикали. Для этого используются несколько тэгов, у каждого из которых имеется своя специализация. Чаще всего речь идет о свойстве vertical-align, которому присваивается подходящее из четырех доступных значений, показывающее как именно будет происходить выравнивание:
- baseline – по так называемой базовой линии используемого шрифта;
- top – по верхней границе табличной ячейки;
- middle – по центральной части;
- bottom – по нижней границе ячейки таблицы.
Пример подобного кода представлен ниже. Он позволяет получить таблицу примерно следующего вида:
Строка 1. Колонка 1. | ||
Строка 2. Колонка 2. | ||
Строка 3. Колонка 3. |
body {
font: 18px/1.5 sans-serif;
color: #333;
}
table {
border-collapse: collapse;
}
table,
td {
border: 1px solid #000;
}
td {
height: 70px;
padding: 10px 20px;
}
.vertical-top {
vertical-align: top;
}
.vertical-bottom {
vertical-align: bottom;
}Заголовок таблицы
Последний семантический инструмент, который вам обязательно нужно использовать – это заголовок таблицы (caption). Выше мы приводили аналогию «таблица – страница», и заголовок для таблицы так же важен, как h2 для страницы.
Добавляется он в самое начало таблицы, после тега <table>:
<table> <caption>Удой агрофермы "Ромашкино"</caption> <thead> <tr> <th>Имя коровы</th> <th>Средний удой молока в день</th> <th>Удой молока в месяц</th> </tr> </thead> …
Браузер сам поставит заголовок по центру таблицы, перед ней (то есть выше нее). В CSS можно прописать
caption-side: bottom;
и тогда заголовок будет располагаться после таблицы. Заголовок таблице нужно прописывать обязательно, если вам он не нужен – скройте его средствами CSS:
caption {
display: none;
}Важно знать
Итак, зачем все это? Пока что все выглядит так, как будто вам предлагают прописать пару ненужных тегов и усложнить себе жизнь. На самом деле, такой версткой вы существенно упростите жизнь людей, которые плохо видят и пользуются специальными программами для озвучивания находящегося на экране текста.
И за то, что вы это сделаете, Гугл вознаградит вас более высокими позициями в выдаче. Вообще, для Гугла это – не первая такая практика, все опытные SEOшники прекрасно знают, что для изображений нужно прописывать тег alt, даже если по факту это почти никогда не пригодится. Здесь – то же самое. Когда поисковый робот приходит на ваш сайт, он смотрит не только на контент, но и на качество верстки. Если у вас прописаны альты, расставлены теги головы/контента/подвала таблиц, есть заголовок (пусть и скрытый – робот его все равно видит, поскольку он анализирует HTML-код) – робот приходит к выводу, что страница – качественная, и в нее были вложены силы, после чего повышает скоринг страницы при ранжировании. Еще одна полезная награда от поисковика – это виджеты. Когда пользователь ищет что-то, Гугл может на свое усмотрение выдать человеку не сухой список страниц, а, например, таблицу, взятую со страницы сайта. Если таблица размечена с помощью семантической верстки – шансы появления этой таблицы прямо на странице выдачи существенно повышаются.
Если же таблица размечена криво и без семантики – нет вообще никаких шансов на то, что она окажется на главной.
Что почитать по теме
Хорошие и короткие стандарты разметки таблиц от интернет-консорциума W3 (на английском):
- Об использовании id и хедеров.
- Использование заголовка.
- Как лучше располагать информацию в таблице.
- (продвинутая тема) Использование scope для обозначения диапазона ячеек, принадлежащих заголовку.
- (продвинутая тема) Использование атрибута summary для подведения краткого итога таблицы.
Подведем итоги
Тезисно:
- Семантическая верстка – это когда вы размечаете не только ячейки таблицы, но и логические/информационные разделы.
- За структуру отвечают теги thead, tbody, tfoot – они задают заголовок данных/тело/сводку таблицы.
- Caption задает общий заголовок таблицы – его можно поместить вниз или скрыть.
- Теги разметки никак не влияют на саму таблицу – они показывают роботам и специальным программам-ридерам, где что находится.
- Семантическая верстка таблиц существенно улучшает ранжирование страницы.
Создать сайт | Создание бизнес-гида
Пошаговое руководство по созданию бизнес-сайта
Зарегистрируйте веб-адрес (также называемый доменным именем или URL-адресом): Ряд компаний могут зарегистрировать доменное имя для вас (и они часто также предоставляют хостинг). Найдите реестры доменов в Интернете и посетите их веб-сайты. Используйте их инструменты, чтобы ввести предпочтительные веб-адреса и посмотреть, заняты ли они. Когда вы найдете то, что не так, заявите об этом.
Наймите кого-нибудь для размещения вашего сайта: Веб-сайты хранятся на серверах, называемых хостами. Вы сможете найти хост за скромную годовую плату. Ваш хост также будет продавать дополнительные продукты, которые помогут защитить ваш сайт от вирусов и вредоносных программ, и они могут продавать шаблоны для создания вашего сайта.
Выберите правильный тарифный план для вашего сайта: Прежде чем подписывать договор с хостингом, убедитесь, что у вас правильный тарифный план.
Вы можете начать с базового веб-хостинга, но могут возникнуть дополнительные расходы, если вы захотите добавить несколько адресов электронной почты или интернет-магазин.Выберите шаблон (или получите индивидуальный дизайн): Вы можете создать веб-сайт с нуля, но сегодня многие компании используют готовые шаблоны. Там тысячи. Вы можете просто вставить свой текст и изображения или попросить разработчика настроить шаблон по своему вкусу.
Получить логотип: Хорошо продуманный качественный логотип поможет вам выглядеть невероятно профессионально. Если у вас нет логотипа, воспользуйтесь дизайнерскими сервисами, такими как Tailor Brands, Fiverr.com и 9.9Designs.com. Убедитесь, что выбранные вами цвета и шрифт соответствуют вашему бренду. Вам нужна единая тема для всех ваших вещей.
Добавьте свой контент: Вам не нужно слепо следить за тем, что делают ваши конкуренты, но проверяйте их. Если что-то работает для них, учитесь на этом.
Затем сосредоточьтесь на том, как вы можете быть свежими и разными.Протестируйте свой сайт: Посетите свой сайт с разных устройств и браузеров. Убедитесь, что он выглядит и ощущается практически одинаково на всех из них. Спросите у друзей и семьи их честное мнение.
Опубликовать: Оживите свой сайт и расскажите о нем всем. Электронная почта клиентов и контакты. Посмотрите, есть ли какие-либо локальные каталоги, в которые можно добавить ваш сайт. Попросите соответствующих деловых партнеров дать вам ссылку.
Установка дат проверки и обновления: Запланируйте даты проверки в своем календаре, чтобы обновить и изменить свой сайт. Держите информацию точной. Если вы упоминаете актуальные вопросы, убедитесь, что они устарели или постоянно обновляются.
Вы можете начать с базового веб-хостинга, но могут возникнуть дополнительные расходы, если вы захотите добавить несколько адресов электронной почты или интернет-магазин.
Затем сосредоточьтесь на том, как вы можете быть свежими и разными.Что размещается на веб-сайте?
Веб-сайты обычно имеют четыре типа страниц:
Домашняя страница: Включите название вашей компании и логотип, а также подробное описание того, чем вы занимаетесь и почему.
Держите это коротким на данный момент. Конкретные детали могут жить на других страницах. Покажите свою индивидуальность и страсть.Товары и услуги: Расскажите посетителям, что они могут купить у вас, с помощью нескольких строк о каждом продукте или услуге. Укажите цены на продукты. Если вы работаете в сфере услуг, вам придется позвонить и узнать, раскрываете ли вы свои сборы.
Информация: Расскажите немного о себе и перечислите членство в организациях или профессионалах. Расскажите свою историю, но сосредоточьтесь не столько на том, что произошло, сколько на том, почему. Вы хотите, чтобы ваша страсть сияла. Это также хорошее место для отзывов клиентов.
Свяжитесь с нами: Укажите свой адрес электронной почты и служебный почтовый адрес, а также ссылки на свои учетные записи в социальных сетях. Многим людям по-прежнему нравится видеть номер телефона. Если у вас есть физический адрес, вставьте карту Google.
И укажите часы работы.
Держите это коротким на данный момент. Конкретные детали могут жить на других страницах. Покажите свою индивидуальность и страсть.
И укажите часы работы.Советы по написанию веб-страниц
Пишите меньше: В любом случае люди читают только около 30% слов на странице.
Используйте описательные заголовки: 80% людей просматривают информацию, которая им нужна, поэтому упростите поиск.
Сделайте это чистым: Читать онлайн сложнее (и медленнее), поэтому используйте более крупные шрифты и оставляйте много пустого места.
Избегайте ловушки шаблона
Выбирая готовый шаблон веб-сайта, вы, естественно, ожидаете, что ваш сайт будет выглядеть как образец в галерее. Но это произойдет только в том случае, если ваши заголовки и текстовые блоки будут примерно такой же длины, как и их. Вам нужно писать в выбранном вами шаблоне, иначе это может выглядеть странно.
Не все на вашем сайте должно продаваться
Создавая сайт, думайте не только о том, чего вы хотите от своих посетителей.
Спросите себя, с какими вопросами они, вероятно, сейчас борются. Можете ли вы ответить на них? Вот почему полезно делиться полезной информацией или советом:
Привлеките людей на свой сайт: Когда люди ищут тему в Интернете, ваши лучшие статьи могут начать появляться в списке рекомендуемых к прочтению. И если этот контент действительно полезен, читатели начнут делиться им со своими контактами.
Завоевать новых клиентов: Люди любят получать советы и подсказки. Если они найдут ценную информацию на вашем сайте, им будет приятно иметь с вами дело.
Держитесь за клиентов: Когда вы предвидите следующий вопрос клиента и отвечаете на него, клиенты чувствуют, что вы их понимаете. Это отличный способ установить взаимопонимание и лояльность.
Сосредоточьтесь на своем бренде
При написании контента для вашего веб-сайта очень важно иметь что-то, что может помочь сосредоточить ваши мысли. Запишите ценности, наиболее важные для вашего бренда, и превратите их в облако слов. Такие сайты, как Worditout, позволяют делать это бесплатно. Распечатайте его и повесьте на стену, где вы пишете.
Восемь способов обеспечить высокое качество вашего веб-сайта
При запуске бизнеса убедитесь, что ваш веб-сайт:
Релевантный: Поймите, с кем вы общаетесь (ваш целевой рынок) и что они думают ищу. Создайте свой сайт для этих людей. Вы хотите, чтобы они знали, что нашли правильное место, как только приземлились.
Профессиональный вид: Относитесь к своему сайту так, как он выглядит при первом впечатлении. Используйте качественные изображения, хорошо написанный текст и современный дизайн. Если бюджет является проблемой, сделайте меньше страниц для начала. Сосредоточьтесь на качестве.
Надежный: Включите страницу «О нас» с полной контактной информацией, небольшой информацией о вашей предыстории и несколькими фотографиями, которые придают вашему бизнесу человеческое лицо.
Легко найти: Создайте сайт, который будет отображаться, когда местные жители будут искать ваши продукты и услуги в Интернете. Поисковая оптимизация (SEO) может вам помочь. Основы освоить не так сложно.
Подключено к вашим социальным сетям: Некоторые люди, которые находят ваш сайт, могут предпочесть подключаться к социальным сетям. Упростите им это. Это отличный способ показать им индивидуальность вашего бренда.
Предоставление отзывов и отзывов: Ничто не сравнится с реальными отзывами людей, которые пользовались вашими услугами или продуктами, поэтому приглашайте клиентов присылать отзывы. Будьте готовы принять хорошее вместе с плохим.
Всегда актуальная информация: Устаревшая информация выглядит некрасиво. Это создает впечатление, что вам все равно, и снижает доверие к сайту. Снимите старые промо и не ставьте даты в тексте, если в этом нет необходимости.
Удобство покупки: Если вы продаете через свой сайт, сделайте его простым и безопасным.
Предоставьте покупателям простую в использовании корзину для покупок, проясните стоимость доставки до того, как они дойдут до оформления заказа, и предложите различные способы оплаты, такие как дебетовая карта, кредитная карта и PayPal.
Предоставьте покупателям простую в использовании корзину для покупок, проясните стоимость доставки до того, как они дойдут до оформления заказа, и предложите различные способы оплаты, такие как дебетовая карта, кредитная карта и PayPal.Как начать свой бизнес
Каждый день открываются тысячи новых предприятий. Если все эти люди могут это сделать, почему бы и нет? Вот что делать и когда.
- Как провести исследование рынка
Ваша бизнес-идея явно вдохновлена. Но это помогает проверить, что вы не единственный, кто так думает.
- Как составить бизнес-план
Составление бизнес-плана поможет вам сформулировать вашу идею и даст вам план ее реализации.
- Бюджетирование и прогнозирование
Пришло время оценить вашу бизнес-идею. Бюджетирование и прогнозирование помогают в этом.
- Стратегии ценообразования и себестоимость проданных товаров
Ваши цены могут влиять на количество продаж, которые вы совершаете, и на прибыль, которую вы получаете от каждой сделки.
- Типы бизнес-структуры
Ваша бизнес-структура может влиять на размер налогов, которые вы платите, и на то, как к вам относится закон.
- Бухгалтерский учет малого бизнеса
Если вы начинаете свой бизнес, вам необходимо ознакомиться с некоторыми основами бухгалтерского учета.
- Регистрация бизнеса и другие административные задачи
После всех волнений, связанных с решением начать бизнес, вам придется заполнить некоторые документы.
- Как создать веб-сайт для бизнеса
Относитесь к своему веб-сайту как к онлайн-версии витрины. Это первое впечатление для многих клиентов и потенциальных клиентов.
- Инструменты и руководства для вашего бизнеса
Теперь, когда вы в бизнесе, вы хотите остаться в нем. У Xero есть ресурсы и решения, чтобы помочь.
Загрузите руководство по открытию бизнеса
Узнайте, как начать бизнес, от идеи до запуска. Заполните форму, чтобы получить это руководство в формате PDF.