Добавляет доку про атрибут rel
#5536
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Open
|
@solarrust |
|
Привет! Большая получилась дока, подробная. Это очень хорошо =) Следующим подходом планирую немного упростить структуру, уменьшить количество уровней заголовков. Призову ещё @TatianaFokina и @skorobaeus на помощь. Вместе сделаем прекрасную доку =) |
|
Привет! Какие еще улучшения можно внести? В спецификации WHATWG есть условный блок "other" — возможно, его стоит добавить. Примеры сейчас взяты из WHATWG, и, возможно, этого достаточно для понимания. Но стоит ли добавить ссылки на сайты, где это используется на практике, чтобы увидеть, как это работает в реальных условиях? |
|
@mafin1799, привет! Нужна наша помощь с этим пиаром? |
|
Привет На этих выходных пройдусь по замечаниям |
Исправление замечаний
Превью контента из 45fbf31 опубликовано. |
solarrust
reviewed
Dec 16, 2024
There was a problem hiding this comment.
Потрясающая работ!
Получилась очень обстоятельная статья про, казалось бы, такой маленький и неприметный атрибут =)
Я прошлась и предложила несколько небольших оформительских правок.
В целом стоит обратить внимание на:
- Как блок текста помещается на страницу. Длинные строки требуют прокрутки. Превью по ссылке → https://content-5536.dev.doka.guide/html/rel/
- На лишний код в примерах. Достаточно оставить только ту часть кода, о которой говорим в тексте.
- Давай поставим объяснение примера над кодом, а не после него?
- Хотелось бы попробовать убрать множественные вопросы и списки. Давай попробуем?
Если на любом из этапов тебе понадобиться моя помощь — пиши!
Важно: чтобы твоя работа была подписанная твоим именем нужно будет добавить твой профиль в папку people/. Вот тут есть инструкция как это правильно оформить → https://github.com/doka-guide/content/blob/main/docs/people.md
На следующем этапе планирую поработать с формулировками, немного облегчить стиль повествования.
Спасибо тебе ещё раз
|
|
||
| ## Кратко | ||
|
|
||
| Атрибут `rel` в HTML указывает, как связаны текущая страница и подключаемый ресурс. Например, если это ссылка, `rel` сообщает браузеру, что это за ссылка: обычная, ведущая на следующий раздел, или на файл стилей для оформления страницы. |
There was a problem hiding this comment.
Suggested change
| Атрибут `rel` в HTML указывает, как связаны текущая страница и подключаемый ресурс. Например, если это ссылка, `rel` сообщает браузеру, что это за ссылка: обычная, ведущая на следующий раздел, или на файл стилей для оформления страницы. | |
| Атрибут `rel` в HTML указывает на тип связи между текущей страницей и подключаемым ресурсом. Например, для ссылок ([`<a>`](/html/a/)), атрибут `rel` сообщает браузеру, что это за ссылка: обычная, ведущая на следующий раздел или на внешний ресурс. Для тегов [`<link>`](/html/link/) `rel` может определять, что подключаемый ресурс является файлом стилей или другим типом данных. |
Написала чуть подробнее. Пожалуйста, посмотри, как тебе такой вариант?
|
|
||
| Атрибут `rel` в HTML указывает, как связаны текущая страница и подключаемый ресурс. Например, если это ссылка, `rel` сообщает браузеру, что это за ссылка: обычная, ведущая на следующий раздел, или на файл стилей для оформления страницы. | ||
|
|
||
| А вот зачем он может быть нужен: |
There was a problem hiding this comment.
Suggested change
| А вот зачем он может быть нужен: | |
| Зачем он нужен: |
Comment on lines
+19
to
+22
| **Определение типа ссылки:** Указывает, что представляет собой подключаемый ресурс. Например, `rel="stylesheet"` сообщает, что ресурс — это таблица стилей, которая будет применяться для оформления страницы. | ||
| **Улучшение SEO:** Для ссылок можно использовать значения `rel="nofollow"` или `rel="noopener"`, чтобы сообщить поисковым системам, как обрабатывать эти ссылки и стоит ли передавать им «вес» страницы. | ||
| **Оптимизация загрузки страниц:** Значения `rel="preload"` или `rel="prefetch"` помогают браузеру заранее загружать ресурсы, чтобы ускорить загрузку страницы. | ||
| **Определение специальных ссылок:** Например, `rel="next"` или `rel="prev"` помогают браузерам и поисковикам понять, как навигация на сайте организована по разделам. |
There was a problem hiding this comment.
Suggested change
| **Определение типа ссылки:** Указывает, что представляет собой подключаемый ресурс. Например, `rel="stylesheet"` сообщает, что ресурс — это таблица стилей, которая будет применяться для оформления страницы. | |
| **Улучшение SEO:** Для ссылок можно использовать значения `rel="nofollow"` или `rel="noopener"`, чтобы сообщить поисковым системам, как обрабатывать эти ссылки и стоит ли передавать им «вес» страницы. | |
| **Оптимизация загрузки страниц:** Значения `rel="preload"` или `rel="prefetch"` помогают браузеру заранее загружать ресурсы, чтобы ускорить загрузку страницы. | |
| **Определение специальных ссылок:** Например, `rel="next"` или `rel="prev"` помогают браузерам и поисковикам понять, как навигация на сайте организована по разделам. | |
| - **Определение типа ссылки:** Указывает, что представляет собой подключаемый ресурс. Например, `rel="stylesheet"` сообщает, что ресурс – это таблица стилей, которая будет применяться для оформления страницы. | |
| - **Улучшение SEO:** Для ссылок можно использовать значения `rel="nofollow"` или `rel="noopener"`, чтобы сообщить поисковым системам, как обрабатывать эти ссылки и стоит ли передавать им «вес» страницы. | |
| - **Оптимизация загрузки страниц:** Значения `rel="preload"` или `rel="prefetch"` помогают браузеру заранее загружать ресурсы, чтобы ускорить загрузку страницы. | |
| - **Определение специальных ссылок:** Например, `rel="next"` или `rel="prev"` помогают браузерам и поисковикам понять, как навигация на сайте организована по разделам. |
Превратила перечисление в список.
Как ты думаешь, может быть перенесём этот блок текста в раздел «Как понять»? Кажется, сейчас получилось не очень «Кратко» =)
| ```html | ||
| <link rel="stylesheet" href="styles.css"> | ||
| ``` | ||
| ## Как пишется |
There was a problem hiding this comment.
Suggested change
| ## Как пишется | |
| ## Как пишется |
Добавила пустую строку
Comment on lines
+110
to
+132
| <body> | ||
| <h1>Пример постоянных ссылок</h1> | ||
| <div id="a"> | ||
| <h2>Первый пример</h2> | ||
| <p> | ||
| <a href="a.html" rel="bookmark">Эта постоянная ссылка применяется только к содержимому от первого H2 до второго H2</a>. | ||
| DIV не совсем соответствует этой секции, но приблизительно соответствует ей. | ||
| </p> | ||
| </div> | ||
| <h2>Второй пример</h2> | ||
| <article id="b"> | ||
| <p> | ||
| <a href="b.html" rel="bookmark">Эта постоянная ссылка применяется к внешнему элементу ARTICLE</a> | ||
| (что может быть, например, записью в блоге). | ||
| </p> | ||
| <article id="c"> | ||
| <p> | ||
| <a href="c.html" rel="bookmark">Эта постоянная ссылка применяется к внутреннему элементу ARTICLE</a> | ||
| (что может быть, например, комментарием в блоге). | ||
| </p> | ||
| </article> | ||
| </article> | ||
| </body> |
There was a problem hiding this comment.
Suggested change
| <body> | |
| <h1>Пример постоянных ссылок</h1> | |
| <div id="a"> | |
| <h2>Первый пример</h2> | |
| <p> | |
| <a href="a.html" rel="bookmark">Эта постоянная ссылка применяется только к содержимому от первого H2 до второго H2</a>. | |
| DIV не совсем соответствует этой секции, но приблизительно соответствует ей. | |
| </p> | |
| </div> | |
| <h2>Второй пример</h2> | |
| <article id="b"> | |
| <p> | |
| <a href="b.html" rel="bookmark">Эта постоянная ссылка применяется к внешнему элементу ARTICLE</a> | |
| (что может быть, например, записью в блоге). | |
| </p> | |
| <article id="c"> | |
| <p> | |
| <a href="c.html" rel="bookmark">Эта постоянная ссылка применяется к внутреннему элементу ARTICLE</a> | |
| (что может быть, например, комментарием в блоге). | |
| </p> | |
| </article> | |
| </article> | |
| </body> | |
| <h1>Пример постоянных ссылок</h1> | |
| <div id="a"> | |
| <h2>Первый пример</h2> | |
| <p> | |
| <a href="a.html" rel="bookmark">Эта постоянная ссылка применяется только к содержимому от первого H2 до второго H2</a>. | |
| DIV не совсем соответствует этой секции, но приблизительно соответствует ей. | |
| </p> | |
| </div> | |
| <h2>Второй пример</h2> | |
| <article id="b"> | |
| <p> | |
| <a href="b.html" rel="bookmark">Эта постоянная ссылка применяется к внешнему элементу ARTICLE</a> | |
| (что может быть, например, записью в блоге). | |
| </p> | |
| <article id="c"> | |
| <p> | |
| <a href="c.html" rel="bookmark">Эта постоянная ссылка применяется к внутреннему элементу ARTICLE</a> | |
| (что может быть, например, комментарием в блоге). | |
| </p> | |
| </article> | |
| </article> |
Можно смело убрать <body> из примера. Это немного облегчит разметку.
Давай попробуем разбить пример на два блока и комментарии написать текстом?
|
|
||
| ### `rel="nofollow"` | ||
|
|
||
| Атрибут `rel="nofollow"` может использоваться с элементами `<a>`, `<area>` и `<form>`. Этот атрибут не создаеё гиперссылку, а аннотирует другие гиперссылки, созданные данным элементом. Указывает, что ссылка не поддерживается автором или издателем страницы. Это может означать, что ссылка была добавлена на страницу из-за коммерческих отношений между владельцами двух страниц или для других целей, не связанных с поддержкой контента. |
There was a problem hiding this comment.
Suggested change
| Атрибут `rel="nofollow"` может использоваться с элементами `<a>`, `<area>` и `<form>`. Этот атрибут не создаеё гиперссылку, а аннотирует другие гиперссылки, созданные данным элементом. Указывает, что ссылка не поддерживается автором или издателем страницы. Это может означать, что ссылка была добавлена на страницу из-за коммерческих отношений между владельцами двух страниц или для других целей, не связанных с поддержкой контента. | |
| Атрибут `rel="nofollow"` может использоваться с элементами `<a>`, `<area>` и `<form>`. Этот атрибут не создаёт гиперссылку, а аннотирует другие гиперссылки, созданные данным элементом. Указывает, что ссылка не поддерживается автором или издателем страницы. Это может означать, что ссылка была добавлена на страницу из-за коммерческих отношений между владельцами двух страниц или для других целей, не связанных с поддержкой контента. |
Исправляет опечатку
| Атрибут `rel="nofollow"` может использоваться с элементами `<a>`, `<area>` и `<form>`. Этот атрибут не создаеё гиперссылку, а аннотирует другие гиперссылки, созданные данным элементом. Указывает, что ссылка не поддерживается автором или издателем страницы. Это может означать, что ссылка была добавлена на страницу из-за коммерческих отношений между владельцами двух страниц или для других целей, не связанных с поддержкой контента. | ||
|
|
||
| ```html | ||
| <p>Смотрите этот <a href="https://example.com" rel="nofollow">внешний сайт</a> для дополнительной информации.</p> |
There was a problem hiding this comment.
Suggested change
| <p>Смотрите этот <a href="https://example.com" rel="nofollow">внешний сайт</a> для дополнительной информации.</p> | |
| <p> | |
| Смотрите этот | |
| <a href="https://example.com" rel="nofollow"> | |
| внешний сайт | |
| </a> | |
| для дополнительной информации. | |
| </p> |
Разбила блок кода на строки, чтобы он помещался на экране
Comment on lines
+457
to
+462
| <form action="/submit-comment" method="post"> | ||
| <label for="comment">Ваш комментарий:</label> | ||
| <textarea id="comment" name="comment"></textarea> | ||
| <input type="submit" value="Отправить"> | ||
| </form> | ||
| <p><a href="https://spammy-site.com" rel="nofollow">Ссылка на сомнительный сайт</a></p> |
There was a problem hiding this comment.
Suggested change
| <form action="/submit-comment" method="post"> | |
| <label for="comment">Ваш комментарий:</label> | |
| <textarea id="comment" name="comment"></textarea> | |
| <input type="submit" value="Отправить"> | |
| </form> | |
| <p><a href="https://spammy-site.com" rel="nofollow">Ссылка на сомнительный сайт</a></p> | |
| <form action="/submit-comment" method="post"> | |
| <label for="comment">Ваш комментарий:</label> | |
| <textarea id="comment" name="comment"></textarea> | |
| <input type="submit" value="Отправить"> | |
| </form> | |
| <p> | |
| <a href="https://spammy-site.com" rel="nofollow"> | |
| Ссылка на сомнительный сайт | |
| </a> | |
| </p> |
Comment on lines
+570
to
+572
| - Разрешение DNS для указанного URL. | ||
| - Установление TCP-соединения. | ||
| - Для HTTPS ресурсов: выполнение TLS рукопожатия. |
There was a problem hiding this comment.
Suggested change
| - Разрешение DNS для указанного URL. | |
| - Установление TCP-соединения. | |
| - Для HTTPS ресурсов: выполнение TLS рукопожатия. | |
| - Разрешение DNS для указанного URL. | |
| - Установление TCP-соединения. | |
| - Для HTTPS ресурсов: выполнение TLS рукопожатия. |
Убрала лишний отступ
Comment on lines
+685
to
+701
| 1. **Тип ссылки: `next`** | ||
| - Назначение: Ключевое слово `next` указывает на то, что текущий документ является частью последовательности, и ссылка ведет к следующему документу в этой последовательности. | ||
| - Использование: Это можно применять к элементам `<link>`, `<a>`, `<area>` и `<form>`. | ||
|
|
||
| ```html | ||
| <link rel="next" href="document2.html"> | ||
| <a rel="next" href="document2.html">Следующий документ</a> | ||
| ``` | ||
|
|
||
| 2. **Тип ссылки:** `prev` | ||
| - **Назначение**: Ключевое слово `prev` указывает на то, что текущий документ является частью последовательности, и ссылка ведёт к предыдущему документу в этой последовательности. | ||
| - **Использование**: Аналогично `next`, может использоваться с элементами `<link>`, `<a>`, `<area>` и `<form>`. | ||
|
|
||
| ```html | ||
| <link rel="prev" href="document1.html"> | ||
| <a rel="prev" href="document1.html">Предыдущий документ</a> | ||
| ``` |
There was a problem hiding this comment.
К сожалению, вложенные списки периодически ломаются на моменте парсинга. Подумай, пожалуйста, как можно было бы иначе выразить эту информацию.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Описание
Превью: https://content-5536.dev.doka.guide/html/rel/
Closes #
Чек-лист
/css/color/,/tools/json/,/tools/gulp/#kak-ponyat)images/example.png,demos/example/,../demos/example/)