Как браузер узнает, как форматировать заголовки и гиперссылки?

Обновлено: 03.07.2024

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

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

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

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

Веб-сайты, серверы, IP-адреса, о боже!

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

Каждое устройство в Интернете — серверы, сотовые телефоны, умный холодильник — имеют уникальный адрес, называемый IP-адресом. IP-адрес состоит из четырех пронумерованных частей:

Но такие числа трудно запомнить! Вот тут-то и появляются доменные имена. jennapederson.dev гораздо легче запомнить, чем 203.0.113.0, верно? Представьте себе, что вам нужно запомнить все телефонные номера ваших контактов, не имея приложения «Контакты» на вашем телефоне. Ваше приложение "Контакты" позволяет искать телефонные номера по имени.

То же самое мы делаем в Интернете. Система доменных имен, или DNS, похожа на приложение «Контакты» на нашем телефоне. DNS помогает нашему браузеру (и нам) находить серверы в Интернете. Мы можем выполнить поиск DNS, чтобы найти IP-адрес сервера на основе доменного имени jennapederson.dev. Подробнее о DNS можно прочитать здесь.

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

Процесс

Чтобы показать, как все эти шаги сочетаются друг с другом, я буду использовать экземпляр Amazon Lightsail и зону DNS Lightsail. Я использую Lightsail, потому что это один из самых простых сервисов для управления виртуальными частными серверами (VPS) и DNS в одном месте, но эти концепции работают для любого сервиса VPS и DNS.

Давайте разберем части этого URL, которые вы ввели, чтобы попасть сюда.

Схема

Домен

jennapederson.dev — это доменное имя сайта. Это запоминающийся адрес, который указывает на IP-адрес определенного сервера. Если вы посмотрите на DNS-зону Lightsail ниже, вы увидите DNS-запись A, указывающую на экземпляр Lightsail, jennapedersondev-static-ip, которая представляет собой статический IP-адрес экземпляра Lightsail.

Ресурс

Когда вы вводите этот URL-адрес в браузере, hello-world – это название ресурса на веб-сайте, который вы хотите просмотреть. Иногда вы увидите это с расширением файла, например .html, которое указывает, что это статический файл на сервере с содержимым HTML. Без расширения, такого как этот URL-адрес, он обычно указывает, что сервер сгенерировал этот контент. Например, новостной сайт покажет вам персонализированный, актуальный и местный новостной контент, что он может сделать только тогда, когда знает, кто вы и откуда пришел запрос.

2. Браузер ищет IP-адрес для домена

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

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

После того как браузер получит запись DNS с IP-адресом, ему нужно будет найти сервер в Интернете и установить соединение.

3. Браузер инициирует TCP-соединение с сервером

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

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

CDN – это глобально распределенная сеть серверов кэширования, которые повышают производительность вашего сайта или приложения (источника), приближая контент к вашим пользователям. CDN Lightsail использует CloudFront, который является частью глобальной сети AWS. Запросы от клиентского браузера могут использовать преимущества этой частной сети со сверхнизкой задержкой и высокой доступностью. Чтобы отслеживать переходы, которые выполняет запрос с моего компьютера на jennapederson.dev, мы можем использовать traceroute. На изображении ниже первый переход (первая строка) относится к моему маршрутизатору. Переходы в первом блоке находятся в сети моего интернет-провайдера, а переходы во втором блоке — в глобальной сети AWS.

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

На изображении ниже это подключение (начальное подключение) заняло 130,30 мс.

Строка запроса содержит следующее:

Строка запроса URL-адреса выглядит следующим образом:

Последняя часть запроса — тело. Тело (обычно) пустое для GET-запроса, подобного нашему. Для запроса, который манипулирует ресурсами, такими как POST, PUT или PATCH, тело будет содержать данные от клиента для создания или обновления.
Тело запроса может быть в разных форматах, и сервер понимает формат на основе заголовка запроса, Content-Type .
Вот пример полного запроса URL со строкой запроса и заголовками (без тела, так как это GET):

После того как сервер получил запрос от клиента, он обрабатывает его и отправляет ответ.

5. Сервер обрабатывает запрос и отправляет ответ

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

Браузер считает код состояния из 200 успешным. Ответ был 200, поэтому браузер знает, что нужно отобразить ответ.
Ресурсы могут быть статическими файлами, текстовыми (например, index.html ) или нетекстовыми данными (например, logo.img ). Однако браузеры не всегда запрашивают статические файлы. Часто это динамические ресурсы, генерируемые во время запроса, и файл, связанный с ресурсом, отсутствует. Собственно, в этом запросе именно это и происходит. Файла hello-world нет, но сервер все равно знает, как обработать запрос.Сервер создает динамический ресурс, создавая HTML-код из фрагментов или шаблонов и комбинируя его с динамическими данными для отправки в ответ в виде текста, чтобы браузер мог отобразить страницу.
Теперь, когда вы знаете, как сервер формирует ответ для отправки обратно в браузер, давайте посмотрим, как браузер обрабатывает ответ.

6. Браузер отображает содержимое

После того как браузер получил ответ от сервера, он проверяет заголовки ответа на предмет информации о том, как отображать ресурс. Заголовок Content-Type выше сообщает браузеру, что он получил HTML-ресурс в теле ответа. К счастью для нас, браузер знает, что делать с HTML!
Первый запрос GET возвращает HTML, структуру страницы. Но если вы проверите HTML-код страницы (или любой веб-страницы) с помощью инструментов разработчика вашего браузера, вы увидите, что он ссылается на другие ресурсы Javascript, CSS, изображения и запрашивает дополнительные данные для отображения веб-страницы в соответствии с дизайном.
Во время анализа и рендеринга HTML браузер делает дополнительные запросы на получение Javascript, CSS, изображений и данных. Он может делать многое из этого параллельно, но не всегда, и это история для другого поста.

На изображении выше вы можете видеть, что HTML ссылается на ресурс CSS. Браузер делает последующий запрос на сервер, чтобы получить этот ресурс CSS для оформления страницы. Заголовок Content-Type запроса ресурса CSS указывает браузеру отображать CSS. Если браузер запрашивает ресурс изображения, заголовок Content-Type сообщает браузеру, что это нетекстовые данные, и отображает их соответствующим образом.

Подведение итогов

Вы сделали это! Вы отследили URL-запрос от браузера до сервера, на котором он размещен, и ответ обратно в браузер для обработки. Мы рассмотрели взаимосвязь между веб-сайтами, серверами, IP-адресами и рассмотрели каждый из шагов, которые проходит ваш браузер, когда вы вводите URL-адрес в свой браузер и нажимаете клавишу ввода. Для ознакомления вот эти шесть шагов:

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

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

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

Нажмите на изображение доски выше, чтобы открыть версию с высоким разрешением на новой вкладке!

Расшифровка видео

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

Поэтому здесь я буду использовать Candy Japan. Недавно их продажи превысили 1 миллион долларов. Очень горжусь Candy Japan. Они продают эти красивые коробки со случайным ассортиментом японских конфет, которые приходят к вам домой. Их веб-сайт на самом деле удивительно упрощен. У них есть ссылки в нижнем колонтитуле. У них есть некоторые ссылки в содержании, но не все остальное. Но я собираюсь представить их с еще несколькими ссылками здесь только для наших целей.

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

Некоторые ссылки на странице важнее других?

Итак, во-первых, приятно это знать.

Я. Ссылки на контент имеют большее значение

<р>. вообще говоря, чем навигационные ссылки. Это не должно быть слишком удивительным, верно?Если у меня есть ссылка здесь, в содержании страницы, указывающая на мою страницу Choco Puffs или мою страницу Gummies, это может иметь больший вес в глазах Google, чем если бы я указывал на нее в своей навигации.

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

II. Ссылки в футере часто обесцениваются

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

III. Более часто используемые ссылки могут иметь больший вес

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

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

IV. Наиболее заметные ссылки могут получить больший вес

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

В. На страницах с несколькими ссылками на один и тот же URL

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

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

Может ли местоположение/тип ссылки повлиять на влияние внешней ссылки?

Другие элементы, которые следует отметить на внешней стороне вещей и где они размещены на страницах.

Я. Ссылки в содержании будут более ценными, чем нижние колонтитулы или навигационные ссылки

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

II. Что делать, если у вас есть ссылки, которые открываются на новой вкладке или в новом окне, а не ссылки, которые открываются на той же вкладке и в том же окне?

Кажется, это вообще не имеет значения. Судя по всему, Google ничем не отличается от экспериментов, которые мы видели, и тех, которые мы проводили.

III. Текстовые ссылки работают лучше, имеют больший вес, чем ссылки на изображения с атрибутами alt

Похоже, они также работают лучше, чем ссылки JavaScript и другие типы ссылок, но это очень важно знать, потому что много раз вы увидите, что веб-сайт будет делать что-то подобное. У них будет образ. Это изображение будет ссылкой, которая будет указывать на страницу, а затем под ним будет какая-то подпись с якорями, богатыми ключевыми словами, и это также будет указывать на это. Но Google будет рассматривать эту первую ссылку, как если бы она была единственной, и это будет атрибут alt этого изображения, который передает якорный текст, если только это не один тег href, и в этом случае вы получаете преимущество подписи как якорь. Так что лучше всего здесь.

IV. Несколько ссылок с одной страницы — учитывается только первый якорь

Как и в случае с внутренними ссылками, учитывается только первый анкор. Таким образом, если у меня есть две ссылки из Candy Japan, указывающие на меня, Google первой увидит только верхнюю в HTML-коде. Таким образом, дело не в том, где она организована на сайте, когда она визуализируется визуально, а в том, где она появляется в HTML-коде страницы, когда Google ее визуализирует.

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

Не всегда и не всегда. Иногда это может быть нормально. Разрешено ли Amazon ссылаться на Whole Foods из нижнего колонтитула? Да, они. Они являются частью одной и той же компании, группы и тому подобного. Но если бы, например, Amazon сошла с ума от спама и решила сделать это «дешевые авокадо с доставкой на дом» и поместить это в нижний колонтитул всех своих страниц и указать на страницу WholeFoods.com/avocadodelivery, это, вероятно, получить штраф, или это может быть просто обесценено. Он может вообще не ранжироваться или не проходить по ссылкам. Настолько примечательно, что в тех случаях, когда у вас есть выбор: «Должен ли я получить ссылку на каждой странице веб-сайта? Ну, черт возьми, это звучит как хорошая сделка. ." Нет, плохая сделка.

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

Хорошо, все. Я с нетерпением жду ваших вопросов. Увидимся на следующей неделе в другом выпуске Whiteboard Friday. Будьте осторожны.

DigitalOcean объединяет усилия с CSS-Tricks! Специальное приветственное предложение: получите бесплатный кредит в размере 100 долларов США.

Эрик Рэндж написал об этой идее публикации в блоге. Лучше ли обернуть тег заголовка якорной ссылкой или наоборот? Предполагая, что HTML5, оба они полностью действительны.

Итак, какой из них вы выбираете? Я бы сказал, что это зависит.

По сравнению с подходом a > h1, когда заголовок уровня блока становится полностью кликабельным.

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

Вы можете подумать: «Более кликабельная область! Это хорошо!», что допустимо, но влияет на следующее:

Удобство выделения текста

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

Вы можете просто наблюдать за этим и убедиться, что вы учитываете это в CSS, но есть странная ошибка, если вы выберете подход a > h1, когда отступы в ссылке вызовут такую ситуацию:

Два заголовка, одна ссылка

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

Боюсь, я не уверен. Есть ли такие?

Мне, как правило, нравится h1 > a, и неофициальный опрос показывает, что подавляющее большинство людей тоже.

Тем не менее, стоит подумать.

Добавьте [role="link"] к любому элементу, рассматриваемому как ссылка для семантики, триггер open(url, target) для обработки ссылок (только убедитесь, что щелчок левой кнопкой мыши по умолчанию указывает на цель _self, а щелчок средней к цели _blank ) и добавьте [tabindex="0"] , чтобы включить элемент в порядок табуляции.

Спасибо, что указали на некоторые проблемы UX при каждом подходе. Возможно, более важным, чем личные предпочтения или интернет-опросы, является построение на индивидуальной основе и с учетом ожиданий пользователей. Например, Bootstrap Collapse, который предоставляет пример кода с тегом A внутри H4 (да, H4), мало что делает для возможности касания, поскольку он связан с законом Фиттса и тем, как пользователи ожидают взаимодействия со сворачивающимися панелями, которые обычно отображают блок. -уровень в любом случае.

Возможно, я плохо разбираюсь в доступности, но я думаю, что все дело в семантике. а > h1 будет означать «Весь этот заголовок является ссылкой», а h1 > a будет означать «В этом заголовке есть ссылка».

Проблема выбора текста — именно поэтому я отказался от точного выбора материала и прибегнул к изменению текста в месте назначения.

Ха-ха! Я тоже селектор «снизу справа»! Я тоже человек типа «h1 > a», просто намного лучше, я думаю. Я также согласен с Orangestar и комментариями о доступности: это не должно быть проблемой, но «h1> a», вероятно, было бы «аккуратнее».

Может быть, я ошибаюсь, но я всегда думал, что нельзя помещать блочные элементы ( h1 ) внутри встроенных ( a )?

Я тоже думал, что это семантическое правило.

Я использую «h1 > a»… это также дает вам возможность иметь несколько ссылок внутри h2.

Раньше это было недействительно. Только не с HTML5.

Кажется, я динозавр :P Спасибо!

Уровень блока внутри строки выглядит довольно странно. Скоро мы увидим такой код:

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

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

Посмотрите Pen JoRXdY Джозефа Рекса (@bl4ckdu5t) на CodePen.

Независимо от того, сколько раз я просматриваю это, я могу гарантировать, что в следующий раз все равно забуду и вернусь сюда…

Возможно, читает собственный комментарий.

Привет, Ник! Так скоро вернулся?

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

На мобильных устройствах (по крайней мере, на iOS) выбор заголовка в ссылке приводит к выбору элемента ссылки, а не текста в заголовке. Это может сильно раздражать!

Я всегда сталкивался с проблемой удобства выбора текста и никогда не думал, что это связано с этим!

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

Я твердо придерживаюсь h1 > a-лагеря, и одна из причин этого в том, что мне кажется, что стилизация элементов (наведение курсора, фокус, активация) внутри ссылок немного затруднительна.< /p>

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

Во избежание путаницы для h1 , h2 и т. д. более точным термином будет теги заголовков или элементы заголовков. В словаре W3 эти элементы HTML называются заголовками. (ссылка)

Простите, что я тот парень…

В любом случае, это отличная дискуссия. Я задавался подобным вопросом (вероятно, уже больше года) о том, что лучше пометить как strong > a или a > strong .

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

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

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

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

Но есть и преимущества, особенно если вы думаете о ванильном варианте использования (заголовок с абзацем и ссылкой «Подробнее»):

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

Я думал, что между ними нет никакой разницы. Кстати, прочитав это, я предпочитаю h1 > a. Потому что это имеет смысл, а также удобно для пользователя.

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

Я предпочитаю h1 > a для совместимости. В браузерах без нашей ограниченной поддержки HTML5 (кхм, IEcough) a > h1 может сломаться в основном предсказуемым, но также странным и неожиданным образом.

Зачем вообще размещать ссылку внутри H1 или наоборот? H1 — это текущий заголовок страницы, не так ли? Куда будет вести ссылка?

Я думаю, что тот факт, что в статье говорится о h1, не имеет значения. Думайте об этом как о любом заголовке, h1 – h6. И есть сценарии, в которых вы хотели бы сделать это, например, индекс блога / новостей, где вы видите заголовок + рекламу для каждого сообщения. Вы можете захотеть, чтобы заголовок сообщения был связан с полной страницей сообщения. Упрощенный шаблон разметки для этого может выглядеть примерно так:

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

Заголовок и текст заголовка

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

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

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

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

Заголовки из словосочетаний часто используются в концептуальной документации.

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

По возможности избегайте использования глагольных форм -ing в качестве первого слова в любом заголовке или названии.

Рекомендуется: перенос наборов данных

Не рекомендуется: перенос наборов данных

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

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

В этих случаях можно использовать герундий.

Можно использовать форму глагола -ing позже в заголовке или названии, например Введение в мониторинг BigQuery.

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

Пример заголовков

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

Заголовок и формат названия

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

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

Не пропускайте уровни иерархии заголовков. Например, поместите

тег только под

Не используйте пустые заголовки или заголовки без связанного содержания.

См. подразделы

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

Если не указано иное, содержимое этой страницы предоставляется по лицензии Creative Commons Attribution 4.0, а образцы кода — по лицензии Apache 2.0. Подробнее см. в Правилах сайта Google Developers. Java является зарегистрированным товарным знаком Oracle и/или ее дочерних компаний.

Читайте также: