About Us
To developers
Notes
Translator
Transliterator
Compare the text
Password generator
Ip and information
Create Webp Image
Ru
About Us
To developers
Ru
Html
Content
- Неразрывный пробел ‑ - Неразрывный дефис — - Длинное тире © - Значок копирайта × - Крестик закрытия < - < левая скобка > - > правая скобка & - амперсанд <sup></sup> - Число в квадрате <sub></sub> - Число внизу <big></big> - Увеличить шрифт <small></small> - Уменьшить шрифт <header></header> - Как правило шапка сайта <footer></footer> - Как правило подвал сайта, можно оборачивать дату, фамилию автора и т.т. <nav></nav> - Навигация, кроме меню в footer <main></main> - Основной контент страницы <aside></aside> - Боковая колонка <section></section> - Смысловой блок c названием <article></article> - Фрагмент информации, как правило для статей <figure></figure> - Объединить несколько блоков, например карточка товара <figcaption></figcaption> - Пояснение или заголовок figure, должен быть или первым или последним тегом <!DOCTYPE html> <html lang="ru"> <head> <base href="/"><!-- Подставляет / у всех ссылок в начале --> <meta charset="UTF-8"> <title>Document</title> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <!-- Не индексировать ссылку --> <a href="https://google.com" rel="noindex nofollow noopener">Google</a> <!-- Input без label --> <input type="text" name="q" aria-label="Поиск"> <table> <tr> <th>Выделить текст жирным</th> <td rowspan="2"></td><!-- объединение ячеек по вертикали --> <td colspan="4"></td><!-- объединение ячеек по горизонтали --> </tr> </table> <!-- Sidebar на Bootstrap --> <div class="row"> <div class="col-md-9 col-md-push-3" onclick="location.href='/catalog/'">content</div><!-- Ссылка JS --> <div class="col-md-3 col-md-pull-9">sidebar</div> </div> <img src="http://placehold.it/96.png" alt=""> <img src="https://lorempixel.com/1600/1000/nature/3" alt=""> <!-- Использование SVG --> <picture> <source srcset="img/fa-file-pdf-o.svg"> <img src="img/fa-file-pdf-o.png" alt="Документ PDF" title="Документ PDF"> </picture> <!-- Дополнительный вариант --> <svg> <image xlink:href="img/fa-file-pdf-o.svg" src="img/fa-file-pdf-o.png" alt="Документ PDF" title="Документ PDF"/> </svg> <!-- Вариант из спрайта --> <svg class="sprite"> <use xlink:href="/img/sprite.svg#fb"></use> </svg> <style> .sprite { width: 30px; height: 30px; fill: #ccc; } </style> <!-- Поддержка Svg из sprite во всех браузерах https://github.com/jonathantneal/svg4everybody --> script src="js/svg4everybody.min.js"></script> script> svg4everybody() </script> <!-- Картинка с форматом webp --> <picture> <source type="image/webp" srcset="/img/one.webp"> <source type="image/jpeg" srcset="one.jpg"> <img src="/img/one.jpg" alt=""> </picture> <!-- Под разные устройства --> <picture> <source media="(max-width: 768px)" srcset="/img/mobile.jpg"> <img src="/img/one.jpg" srcset="/img/onex2.jpg 2x" alt=""> <!-- Для DPR2 подгрузиться большая картинка --> </picture> <!-- Ссылка js в div --> <div onclick="location.href='https://ya.ru';"> <!--... код внутри блока ...--> </div> <a href="https://www.google.ru" onclick="return false;">Google</a> <!-- Ссылка не будет работать пока не отключить JS в браузере --> <input type="button" onclick="history.back(); return false;" value="Назад"> <!-- Ссылка назад --> <a onclick="javascript:history.back(-2); return false;">Назад</a> <!-- На 2 раза назад --> <!-- Youtube видео, чтобы в паузе не было предложений других видео в конце ссылки добавить ?rel=0, https://developers.google.com/youtube/player_parameters#Parameters --> <!-- rel=0;modestbranding=1;controls=0;showinfo=0;autoplay=1&mute=1;iv_load_policy=3 Дополнительные параметры в Url --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="//www.youtube.com/embed/Vm_N5GxamCI?rel=0" allowfullscreen></iframe> </div> <!-- Показать картинку видео --> <img src="//img.youtube.com/vi/Vm_N5GxamCI/0.jpg"> <!-- Phone --> <a href="tel:+78622432083" itemprop="telephone" content="+78622432083">+7 (862) 243-20-83</a> <!-- Email --> <a href="mailto:mail@mail.ru?subject=Название">mail@mail.ru</a> <!-- Whats App --> <a href="//api.whatsapp.com/send?phone=79851192505" rel="nofollow" target="_blank">Whats App</a> <!-- Telegram --> <a href="tg://resolve?domain=@name" rel="nofollow" target="_blank">Telegram</a> <a href="//t.me/name_bot" rel="nofollow" target="_blank">Telegram</a> <!-- Viber --> <a href="viber://add?number=%2B79851192505" rel="nofollow" target="_blank">Viber</a> <a href="skype:test123" rel="nofollow" target="_blank">Skype</a> <!-- Встраивание ссылок точек в картинку --> <img src="#" alt="" usemap="#portfolio" class="img-fluid"> <map name="portfolio"> <area shape="circle" coords="114,217,70" href="#" data-product-id="1" data-map="portfolio"> </map> script> // Для адаптивности используем библиотеку https://github.com/clarketm/image-map ImageMap('img[usemap]') </script> <!-- Подключение скриптов по условию --> script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> script>window.jQuery || document.write('path/to/file')</script> <!-- Разметка schema.org --> <div itemscope itemtype="http://schema.org/Product"> <h1 itemprop="name">Name</h1> <p itemprop="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam tempore consequuntur similique adipisci voluptatem accusantium tempora laborum, totam illum! Vel.</p> <img itemprop="image" itemscope itemtype="http://schema.org/Offer" src="/img.jpg" alt="Name"> <p itemprop="offers"><span itemprop="price">100</span> <span itemprop="priceCurrency">rub</span></p> </div> script type="application/ld+json"> { '@context': 'https://schema.org', // Здесь указывается словарь разметки — Schema.org '@type': 'Product', // Объявляется сущность — товар (Person - автор) 'name': 'iPhone', // Название 'description': 'iPhone 10', // Описание 'category': 'Cat Name', // Категория 'image': 'https://example.com/photos/1x1/photo.jpg', // Изображение 'image': [ // Несколько изображений 'https://example.com/photos/1x1/photo.jpg', 'https://example.com/photos/4x3/photo.jpg', ], 'brand': 'Apple', // Бренд-производитель 'author': 'Ivan', // Автор 'datePublished': '2020-11-20', // Дата публикации 'offers': { '@type': 'Offer', 'url': 'https://example.com/anvil', 'priceCurrency': 'RUB', 'price': '119.99', 'highPrice': '101', "lowPrice": '199', 'priceValidUntil': '2020-11-20', 'itemCondition': 'https://schema.org/NewCondition', // Состояние - новый (UsedCondition - б/у) 'availability': 'https://schema.org/InStock' // В наличии } } </script> </body> </html> </div>
List
Loading...