Html и css теги: Изучай HTML и CSS | Справочник HTML CSS

Плохие теги

1. Главная
2. Самоучители
3. Учебник HTML для начинающих

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

Исповедуя философию отделения содержимого от визуального представления, HTML старается избавиться от репрезентативных функций. Такой подход ведет к веб-страницам значительно меньшего по объему кода, так как отдельный набор инструкций, определяющих внешний вид (во внешнем CSS файле), может подключаться к любому числу веб-страниц. К тому же обслуживать сайт становится гораздо проще, потому что изменение всего одного файла воздействует на все страницы, использующие его.

Одни «плохие теги» попросту отвечают за внешнее представление элемента (как тег <small>), и их можно заменить на нечто более значимое, либо использовать вместо них CSS. Другие же могут не только определять визуальное представление, но и быть к тому же излишне громоздки (как тег <font>) или ужасно пагубны для удобства использования веб-страницы (как тег <blink>).

Теги

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

• <b> отображает текст жирным шрифтом. Вместо него можно использовать тег <strong>, который добавляет элементу дополнительное значение (усиленное выделение), либо, если необходимо просто отобразить текст жирным шрифтом, соответствующее свойство CSS выполняет ту же работу.
• <i> отображает текст курсивом. Использование тега <em> также добавляет дополнительную информацию (выделение), а для обычной визуализации подойдет соответствующее свойство CSS.
• <big> увеличивает размер отображаемого текста. Если текст используется в качестве заголовка, то лучше использовать теги заголовков (<h2>, <h3> и т.д.), которые именно для этого и предназначены, а для простого визуального выделения следует использовать свойство CSS font-size, которое предоставляет больший контроль над страницей.
• <small> уменьшает размер отображаемого текста. Опять же для этого лучше использовать свойство CSS font-size.
• <hr> создает горизонтальную линию. Тем не менее, в веб-странице, основывающейся на CSS, использование этого тега несколько необычно. Для этого вполне подойдет свойство CSS border-top или border-bottom, либо, в крайнем случае, старый добрый тег изображения сделает это лучше.

Ко всем перечисленным тегам последние стандарты HTML относятся достаточно лояльно, однако эти теги ничего не добавляют к значению контента, что обязаны делать «хорошие теги». Все эти «пустышки» могли бы быть более полезны, но они не приносят и вреда, в отличие от следующих «вредин»:

• <u> в свое время использовался для подчеркивания текста. Так получилось, что подчеркнутый текст прочно ассоциируется со ссылками. Именно поэтому этот тег давно умер, и именно поэтому крайне не желательно иметь в тексте подчеркнутые участки, не являющиеся ссылками.
• <center> использовался для центрирования одного элемента относительно другого. Свойство CSS text-align имеет не только значение center, но и left, right и justify.
• <layer> аналогичен тегу <div>, однако работает он только в старых версиях браузера Netscape и потому совершенно бесполезен.
• <blink> или <marquee>. Наше твердое «Нет!». Они должны были делать мигающий текст, однако из-за ограниченной поддержки вскоре превратились в дурную шутку.
• <font> использовался для определения имени, размера и цвета шрифта элементов. Этот тег снискал репутацию злого гения мира тегов. Старые сайты (и даже некоторые новые) подобно оспинами буквально испещрены тегами <font>. Большинство из них обязаны своему появлению различным программам автоматизации создания сайтов, вставляющие тег <font> вокруг всякого элемента, размер или цвет которого изменяет автор. Так как этот тег приходится вставлять вокруг каждого появления элемента (скажем, каждый раз, как используется элемент <p>), то при помощи свойств CSS это можно сделать при помощи одной маленькой строки кода и применить ее ко всему сайту. Такой способ не только делает код веб-страницы меньше, но и позволяет при модифицировании стиля изменить всего одну строку, а не отыскивать все теги <font> в коде всех веб-страниц. Тег <font> и неуместное использование таблиц – две наиболее частые причины распухания кода веб-страниц.

Атрибуты

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

• text и bgcolor используются для определения цветов базового текста и фона страницы в открывающем теге <body>. Но то же самое могут сделать свойства CSS color и background-color, если применить их в селекторе body.
• background используется с тегом <body> для определения фонового изображения страницы. Свойство CSS background-image позволяет манипулировать фоновыми изображениями гораздо лучше.
• link, alink, vlink используются в теге <body> для определения цвета ссылок (непосещенные, активные и посещенные). CSS псевдоклассы:link, :active, :visited умеют это делать гораздо лучше.
• align используется для выравнивания содержимого элемента (например, <div align=»center»>Текст</div>), однако, как и в случае с тегом <center>, здесь есть новый господин – свойство CSS text-align.
• target используется для определения различных состояний открытия ссылки, обычно чтобы она открывалась в новом окне (например, <a href=»//msiter.ru/wherever.html» target=»_blank»>Помощь</a>). Звучит мило, но этим вы можете только навредить своему сайту. Пользователи вовсе не ожидают возникновения чего-то (вроде нового окна браузера) из ниоткуда, и кроме этого большинство из них пользуются таким инструментом навигации браузера как кнопка «Назад», которая не работает, если ссылка открывается в новом окне. Таким образом этот атрибут следует использовать крайне осторожно.

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

Самые непостижимые атрибуты представления принадлежать тегу <textarea>, где есть не только атрибуты cols и rows, признаваемые последними стандартами HTML обязательными.

Плохое использование хороших тегов

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

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

Иногда разработчики используют некоторые из упомянутых здесь тегов и атрибутов (и в том числе таблицы в качестве разметки страницы) для достижения традиционного дизайна, чтобы веб-страница была совместима со старыми браузерами (в частности с Netscape 4). Таблицы действительно дают больший контроль над визуальным представлением, чем CSS, не доступный в Netscape 4, но таких пользователей не много и их число постоянно уменьшается, в то время как тех, для кого табличная верстка является огромным неудобством, — пользователей, получающих доступ в Интернет с мобильных устройств – постоянно растет. Преимущества бестабличной разметки, уже упоминавшиеся выше, намного перевешивают недостатки и отчетливо проявляются на страницах, которые сохраняют полную функциональность во всех браузерах.

Фреймы

Большинство сайтов не использует фреймы, и пользователи получают всего один документ.

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

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

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

1. Если тег или атрибут хотя бы намекает на визуальное представление, не используйте его. Это работа CSS. И делает он ее гораздо лучше.
2. Используйте теги только для того, для чего они предназначены. Таблицы для табличных данных. Заголовки для заголовков. И так далее, и так далее.
3. Когда у вас появляется специфичный контент, используйте соответствующие теги.

10 редких тегов HTML, которые редко используют

• Блог по веб разработке
• HTML / CSS / Верстка сайтов
• org/Breadcrumb»>10 редких тегов HTML, которые редко используют

10 редких тегов HTML, которые редко используют

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

Когда вы впервые изучали HTML, вы вероятно познакомились с наиболее распространенными тегами, которые используются на многих веб-сайтах и достаточны для подавляющего большинства сценариев. Наверняка каждый веб-разработчик слышал о тегах вроде <html>, <body>, <p>, <a> и конечно же <div>.

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

Было бы хорошо, если бы Вы расширили свои знания HTML узнав об этих редко используемых тегах, мы рассмотрим 10 из них в этой статье.

1. Тег <abbr>

   Тег <abbr>определяет аббревиатуру или аббревиатуру, например HTML, CSS, PHP, JS, CS, и т.д.

   			
   Я читаю о тегах <abbr title="Язык гипертекстовой разметки">HTML</abbr> на сайте <abbr title="Coding Beauty">CB</abbr>.
   			
   		

   Аббревиатура по умолчанию обозначается пунктирной линией.

   Наведение курсора на элемент <abbr>.

2. Тег <q>

   Тег <q>указывает, что текст внутри него является короткой встроенной цитатой.

   			
   <q>Coding создает информативные руководства по технологиям веб-разработки</q>
   			
   		

   Современные браузеры обычно реализуют этот тег, заключая заключенный в него текст в кавычки:

3. Тег <s>

   Мы используем <s>тег для рендеринга текста с перечеркнутой линией (перечеркнутый). Это полезно для представления вещей, которые больше не актуальны или неверны.

   			
   Купить за <s>200 долл. США</s> 100 долл. США
   			
   		

   Указание на изменение цены с помощью тега <s>.

   Подобно тегу <s>, <del>который также отображает зачеркнутый текст, но предназначен для использования с <ins>тегом для обозначения редакционных изменений в уже опубликованном документе.

   			
   <!DOCTYPE html> 
   <html lang="en"> 
     <head> 
       <style> 
         del { 
           background-color: lightsalmon; 
         }
         ins { 
           украшение текста: нет; 
           цвет фона: светло-зеленый; 
         } 
       </style> 
     </head> 
     <body> 
       Мой любимый язык программирования — <del>JavaScript</del> 
       <ins>TypeScript</ins> 
     </body> 
   </html>
   			
    
   		

   Указание редакционных изменений в документе с помощью тегов <del> и <ins>.

4. Тег <mark>

   Мы используем <mark>тег для определения текста, который должен быть помечен или выделен.

   			
   Кодирование веб-сайта <mark>Beauty</mark>
   			
   		

   По умолчанию <mark>применяет ярко-желтый фон к заключенному тексту:

   Этот тег полезен для выделения результатов текстового поиска в документе, как это делают многие браузеры при использовании Find on Page инструмента.

   Отображение результатов поиска по букве «е» с <mark>тегом.

5. Тег <wbr>

   Тег <wbr>(Word Break Opportunity) определяет определенные позиции в тексте, где можно было бы добавить разрыв строки.

   Когда текст переносится в браузере, слова в конце переноса могут быть слишком длинными и прерываться не в том месте.

   			
   <p>это-очень-длинный-текст-созданный-для-проверки-тега-wbr</p>
   			
   		

   Текст прерывается в месте, выбранном браузером.

   После уменьшения окна браузера приведенный выше текст был перенесен и разорван в точке, выбранной браузером, что может быть не тем, что нам нужно.

   С помощью <wbr>тега мы указываем точные места в слове, где его можно было бы сломать.

   			
   <p>это-очень-длинный-те<wbr />xt-созданный-для-тестирования-тега-wbr</p>
   			
   		

   Текст прерывается в месте, заданном тегом <wbr>.

6. Тег <details>

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

   			
   <details>
     <summary>Lorem Ipsum</summary> 
     Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti eos 
     quod fugiat Quasi Repudiandae, минус quae facere. Сед, киа? Quod 
     cupiditate asperiores neque iste consectetur tempore eum repellat incidunt 
     qui. 
   </details>
   			
    
    
   		

   Виджет раскрытия закрыт (состояние по умолчанию).

   Виджет раскрытия открыт.

7. Тег <optgroup>

   Тег <optgroup>группирует связанные параметры в <select>элементе. Это может облегчить пользователям понимание их выбора, когда список вариантов длинный.

   			
   <select name="country"> 
     <optgroup label="Северная Америка"> 
       <option value="us">США</option> 
       <option value="ca">Канада</option> 
     </optgroup> 
     <optgroup label="Европа"> 
       <option value="uk">Великобритания</option> 
       <option value="fr">Франция</option> 
     </optgroup> 
   </select>
   			
    
   		

   Здесь мы группируем страны в списке в соответствии с их континентами.

8. Тег <datalist>

   Мы используем <datalist>элемент, чтобы указать список предопределенных опций для <input>элемента. Он содержит набор <option>элементов, представляющих рекомендуемые или разрешенные параметры, из которых может выбирать пользователь.

   			
   <form>
     <label for="lang">Выберите язык:</label> 
     <input list="langs" name="lang" />
     <datalist> 
       <option value="Английский" /> 
       <option value="Французский" /> 
       <option value="Испанский" /> 
       <option value="Китайский" /> 
       <option value="Немецкий " /> 
     </datalist> 
   </form>
   			 
   		

   Чтобы связать <input>элемент с <datalist>элементом, мы устанавливаем idатрибут <datalist>и устанавливаем listатрибут <input>этого же идентификатора.

   Список доступных вариантов ввода отображается в раскрывающемся списке.

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

9. Тег <fieldset>

   Элемент <fieldset>используется для группировки нескольких связанных элементов в форме. Визуальное разделение, которое обеспечивает этот элемент, может облегчить пользователям понимание ваших форм.

   			
   <form> 
     <fieldset> 
       <legend>Имя</legend>
       <label for="fname">Имя:</label> 
       <input type="text" name="fname" /><br /> 
       <label for="mname">Отчество: 
       <input type="text" name="mname" /><br /> 
       <label for="lname">Фамилия:</label> 
       <input type="text" id= "lname" name="lname" /> 
     </fieldset> 
     <br /> 
     <label for="email">Электронная почта:</label> 
     <input type="email" name="email" / > 
     <br /><br /> 
     <label for="password">Пароль:</label> 
     <input type="password" name="password" /> 
   </form>
   			
   		

   Мы используем <legend>тег, чтобы определить заголовок для <fieldset>элемента.

10. Теги <sup> и <sub>

    Мы используем <sup>тег для определения текста, который должен отображаться как верхний индекс. Надстрочный текст обычно появляется на полсимвола выше обычной строки и имеет меньший шрифт.

    С другой стороны, текст нижнего индекса отображается на полсимвола ниже обычной строки. Он также имеет меньший шрифт, и мы используем <sub>тег для его отображения.

    			
    <p>Этот текст содержит текст <sub>подстрочный</sub></p> 
    <p>Этот текст содержит текст <sup>надстрочный</sup></p>
    			
    		

    Вот более практический пример:

    			
    푥<sup>2</sup> - 3푥 - 28 = 0. Найдите 푥. <br /> 
    
    
    H<sub>2</sub>SO<sub>4</sub> + NaOH → Na<sub>2</sub>SO<sub>4</sub> + 
    H<sub>2</sub>O
    			
    		

В этой статье мы рассмотрели некоторые из наименее известных и используемых тегов в HTML. Эти редкие теги могут быть весьма полезны в определенных ситуациях, несмотря на их редкое использование.

Просмотров: 1052

• 2.67
• 1
• 2
• 3
• 4
• 5

Голосов: 58

10 редких тегов HTML, которые редко используют Косая граница блока или граница с наклоном Как в CSS связывать объекты? Масштабирование в CSS средствами zoom и transform Эффект пульсации элемента на чистом CSS Красивая форма обратной связи на чистом CSS Что такое Pixel Perfect верстка? Адаптивная верстка. Правильные медиа выражения для retina. Формат ссылки для телефонных звонков Icon Fonts или SVG? Скошенные элементы на CSS3 Стилизуем placeholder при помощи CSS Адаптивный CSS3 Manasory без JavaScript Что такое Flexbox? Описание всех css свойств, основные принципы, преимущества и недостатки. CSS прижать footer к низу окна браузера Создаём отзывчивые письма без медиа-запросов Кроссбраузерная стилизация select на CSS Специальные символы HTML Треугольники по средствам CSS Стилизация элементов checkbox и radio button на CSS3 Как убрать свечение вокруг текстового поля? Как отключить преобразование телефонных номеров в ссылки в мобильных браузерах 17 CSS/HTML эффектов с кроссбраузерными решениями Пять полезных CSS селекторов Медиа типы в CSS Базовые правила HTML верстки писем для E-Mail рассылки Создаём адаптивный сайт

Похожие материалы

Базовые правила HTML верстки писем для E-Mail рассылки

Для того, чтобы email рассылка смотрелась максимально одинаково в большинстве почтовых клиентах, необходимо придерживаться некоторых базовыx правил HTML верстки email-писем.

Формат ссылки для телефонных звонков

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

10 редких тегов HTML, которые редко используют

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

HTML с CSS — javatpoint