doka-guide · TatianaFokina · Oct 6, 2023 · Sep 9, 2023 · Sep 9, 2023 · Sep 9, 2023
@@ -6,28 +6,62 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
   <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
     html {
-      height: 100%;
+      color-scheme: dark;
+      font-size: 24px;
     }
 
     body {
-      font-family: Roboto, sans-serif;
-      font-size: 20px;
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #000000;
+      font-family: "Roboto", sans-serif;
     }
 
     p {
-      max-width: 190px;
+      margin: 7px 0;
+      font-size: 1rem;
+      line-height: 1.4;
+    }
+
+    div {
+      width: 65%;
+      padding: 55px 40px;
+      background-color: #FF8630;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+
+      div {
+        width: 100%;
+        padding: 55px 30px;
+      }
     }
   </style>
 </head>
 <body>
-  <p>
-    В лидеры обзора вышли
-    <b>MDR-V6</b> и <b>ATH-M50x</b>,
-    одни из самых популярных
-    мониторных наушников.
-  </p>
+  <div class="container">
+    <p>
+      В лидеры обзора вышли
+      <b>MDR-V6</b> и <b>ATH-M50x</b>,
+      одни из самых популярных
+      мониторных наушников.
+    </p>
+  </div>
 </body>
 </html>
@@ -1,10 +1,11 @@
 ---
 title: "`<b>`"
-description: "Тег для привлечения внимания, но без лишней важности"
+description: "Тег для привлечения внимания, но без лишней важности."
 authors:
   - gkhabada
 contributors:
   - gingerraccoon
+  - tatianafokina
 editors:
   - tachisis
 keywords:
@@ -36,7 +37,7 @@ tags:
 
 В этом примере выделены названия моделей в обзоре, чтобы их проще было найти среди текста.
 
-<iframe title="Пример использования" src="demos/view/" height="200"></iframe>
+<iframe title="Пример использования" src="demos/view/" height="350"></iframe>
 
 ## Как понять
 

@@ -6,35 +6,59 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
   <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
     html {
-      height: 100%;
-      margin-top: 0;
-      margin-bottom: 0;
+      color-scheme: dark;
+      font-size: 24px;
     }
 
     body {
-      min-height: 100%;
-      margin-top: 0;
-      margin-bottom: 0;
+      min-height: 100vh;
+      padding: 50px;
       display: flex;
-      justify-content: center;
       align-items: center;
-      background-color: #18191c;
-      color: white;
+      justify-content: center;
+      background-color: #18191C;
+      color: #000000;
       font-family: "Roboto", sans-serif;
-      font-size: 24px;
     }
 
     p {
-      text-align: center;
+      margin: 7px 0;
+      font-size: 1rem;
+      line-height: 1.4;
+    }
+
+    div {
+      width: 65%;
+      padding: 55px 40px;
+      background-color: #FF8630;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+
+      div {
+        width: 100%;
+        padding: 55px 30px;
+      }
     }
   </style>
 </head>
 <body>
-  <p>
-    Коты <em>обожают</em> кошачью мяту
-  </p>
+  <div class="container">
+    <p>
+      Коты <em>обожают</em> кошачью мяту.
+    </p>
+  </div>
 </body>
 </html>
@@ -6,37 +6,61 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
   <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
     html {
-      height: 100%;
-      margin-top: 0;
-      margin-bottom: 0;
+      color-scheme: dark;
+      font-size: 24px;
     }
 
     body {
-      min-height: 100%;
-      margin-top: 0;
-      margin-bottom: 0;
+      min-height: 100vh;
+      padding: 50px;
       display: flex;
-      justify-content: center;
       align-items: center;
-      background-color: #18191c;
-      color: white;
+      justify-content: center;
+      background-color: #18191C;
+      color: #000000;
       font-family: "Roboto", sans-serif;
-      font-size: 24px;
     }
 
     p {
-      text-align: center;
+      margin: 7px 0;
+      font-size: 1rem;
+      line-height: 1.4;
+    }
+
+    div {
+      width: 65%;
+      padding: 55px 40px;
+      background-color: #FF8630;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+
+      div {
+        width: 100%;
+        padding: 55px 30px;
+      }
     }
   </style>
 </head>
 <body>
-  <p>
-    <em>
-      Этого не ожидал никто, <em>даже известный своим природным чутьём Джимми</em>
-    </em>
-  </p>
+  <div class="container">
+    <p>
+      <em>
+        Этого не ожидал никто, <em>даже известный своим природным чутьём Джимми</em>
+      </em>.
+    </p>
+  </div>
 </body>
 </html>
@@ -6,10 +6,13 @@ authors:
 keywords:
   - ударение
   - семантический акцент
+  - screen reader
+  - ридер
+  - a11y
 related:
+  - a11y/role-emphasis
   - html/strong
   - html/i
-  - a11y/screenreaders
 tags:
   - doka
 ---
@@ -20,13 +23,13 @@ tags:
 
 ## Пример
 
-Текст внутри `<em>` по умолчанию выделяется курсивом при помощи `font-style: italic`.
+Текст внутри `<em>` по умолчанию выделяется курсивом при помощи [`font-style: italic`](/css/font-style/).
 
 ```html
-<p>Коты <em>обожают</em> кошачью мяту</p>
+<p>Коты <em>обожают</em> кошачью мяту.</p>
 ```
 
-<iframe title="Базовый пример" src="demos/basic/" height="100"></iframe>
+<iframe title="Базовый пример" src="demos/basic/" height="300"></iframe>
 
 ## Как пишется
 
@@ -39,8 +42,16 @@ tags:
   <em>
     Этого не ожидал никто,
     <em>даже известный своим природным чутьём Джимми</em>
-  </em>
+  </em>.
 </p>
 ```
 
-<iframe title="Базовый пример" src="demos/nested/" height="150"></iframe>
+<iframe title="Базовый пример" src="demos/nested/" height="300"></iframe>
+
+### Доступность
+
+Хотя `<em>` считается элементом семантической вёрстки, у него пока нет встроенной [роли `emphasis`](/a11y/role-emphasis/). Так что для скринридеров это простой текст, который они никак не выделяют интонацией.
+
+Чтобы магия произошла и скринридер понял, что слово или фраза крайне важные, достаточно стилизовать элемент с помощью `font-style="italic"`. Если у пользователя скринридера включена специальная настройка, он услышит небольшое изменение в озвучивании такого текста.
+
+Несмотря на эту странность, всё равно лучше использовать `<em>` вместо `<i>`. Так ваша вёрстка будет валидной и в будущем, когда у тега появится встроенная роль `strong`, вам не нужно будет переписывать код.
@@ -6,25 +6,59 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
   <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
     html {
-      height: 100%;
+      color-scheme: dark;
+      font-size: 24px;
     }
 
     body {
-      font-family: Roboto, sans-serif;
-      font-size: 20px;
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #000000;
+      font-family: "Roboto", sans-serif;
     }
 
     p {
-      max-width: 250px;
+      margin: 7px 0;
+      font-size: 1rem;
+      line-height: 1.4;
+    }
+
+    div {
+      width: 65%;
+      padding: 55px 40px;
+      background-color: #FF8630;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+
+      div {
+        width: 100%;
+        padding: 55px 30px;
+      }
     }
   </style>
 </head>
 <body>
-  <p>
-    Кабанов <i>(вздыхая в сторону)</i>. Ах ты, господи! <i>(Матери.)</i> Да смеем ли мы, маменька, подумать!
-  </p>
+  <div class="container">
+    <p>
+      Кабанов <i>(вздыхая в сторону)</i>. Ах ты, господи! <i>(Матери.)</i> Да смеем ли мы, маменька, подумать!
+    </p>
+  </div>
 </body>
 </html>