HTML ساده است فایل متنیبا پسوند htm (html). برای ایجاد ساده ترین صفحهدر ابتدا، زمانی که فقط در حال تمرین هستید، فقط به یک دفترچه یادداشت نیاز دارید. دفترچه یادداشت را باز کنید و متن را بنویسید.

هر عنصر HTML یک برچسب است که توسط آن احاطه شده است<>براکت ها هر فایل، صفحه html با یک تگ شروع می شود و با تگ به پایان می رسد.

این تگ است به سادگی به مرورگر (که برنامه ای است که در آن وب را مرور می کنید) می گوید که این سندیک سند نشانه گذاری html است.

برچسب بزنید - یعنی ابتدای سند html و- تگ بستن، به معنای پایان سند html است.


درون این تگ ها چندین تگ مهم دیگر نیز وجود دارد. درست بعد از برچسب برچسب هایی به معنای عنوان صفحه و بدنه صفحه وجود دارد.

اولین صفحه HTML من



برچسب بزنید وقتی این صفحه نمایش داده می شود به معنای عنوان عنوان پنجره است. <br>اکنون می توانید یک جدید ایجاد کنید <a href="https://bar812.ru/fa/sozdanie-kompleksnyh-dokumentov-v-tekstovom-redaktore-ms-word.html">سند متنی</a>در notepad متن بالا را کپی کنید و به عنوان Page1.html ذخیره کنید و در مرورگر اجرا کنید، در عنوان پنجره مرورگر عنوان صفحه را مشاهده خواهید کرد. <title>، و یک صفحه خالی، زیرا ما در بدنه صفحه در تگ ها هستیم <body> </body>ما چیزی را خروجی نمی دهیم</p> <p>بنابراین، متن بالا برای ما چارچوب اصلی هر صفحه وب خواهد بود.</p> <h4><b>تگ های جفت شده و جفت نشده!</b></h4> <p><html></html>, <head></head>,<body></body>اینها فقط تگ های جفت شده هستند - آن تگ هایی که به عنوان یک جفت تگ و بسته شدن آن، برچسب بسته شدن با نماد / قرار می گیرند. برای تگ های جفت شده، مقدار موجود بین ابتدای تگ و انتهای آن، عمل تگ است. این عمل تا زمانی که یک برچسب با کاراکتر / پیدا شود منتشر می شود.</p> <p>برچسب های جفت نشده - آنها برچسب بسته شدن ندارند. در زیر نمونه هایی از اینگونه تگ ها را بیان خواهیم کرد.</p> <p><head></head>- سرتیتر <a href="https://bar812.ru/fa/grafika-na-web-stranice-v-html-dobavlyaem-izobrazheniya-na-web-stranicu-a-eshche.html">صفحات html</a>، که شامل <a href="https://bar812.ru/fa/gugl-advords-sbor-klyuchevyh-slov-planirovshchik-klyuchevyh-slov-google-adwords.html">کلید واژه ها</a>برای موتورهای جستجو <a href="https://bar812.ru/fa/ustanovka-skriptov-v-razlichnye-brauzery-ustanovka-skriptov-v.html">اسکریپت های مختلف</a>، و غیره.</p> <p><body></body>- به طور مستقیم بدنه سند html.</p> <p><br />برچسب جفت نشده</p> <p><b>توجه داشته باشید:</b>در اکثر موارد اکنون هنگام ساخت سایت ها از روال های آماده، افزونه ها و ... استفاده می کنند. - برای بیشتر <a href="https://bar812.ru/fa/metall-v-fotoshope-bystryi-sposob-sozdaniya-metallicheskogo.html">ایجاد سریع</a>سایت‌ها، اما برای اعمال و استفاده از چنین روال‌ها و قالب‌هایی، همچنان حداقل دانش این جلسات مورد نیاز است.</p> <p><b>برچسب بزنید</b> (<i>pl. برچسب ها، گاهی اوقات تگ</i>) یک عنصر است <a href="https://bar812.ru/fa/rules-html-obshchie-pravila-shchity-zh2-pravila-yazyka-html-ispolzuite-sokrashch-nnye.html">زبان HTML</a>، که برای علامت گذاری متن منبع یک صفحه وب استفاده می شود. برچسب ها مخفف یا مخفف کلمات انگلیسی هستند که در پرانتزهای زاویه ای محصور شده اند.<>به عنوان مثال برچسب <b><p> </b>…<b></p> </b>مخفف کلمه انگلیسی <span><i>پاراگراف</i>، یعنی متن محصور شده در این تگ توسط مرورگرها به عنوان یک پاراگراف شناسایی می شود.</p> <p>هر تگ در HTML معنای خاصی دارد و وظیفه نمایش داده های خاصی را بر عهده دارد. مورد حروف در نام تگ ها مهم نیست، مثلاً برچسب <b><p> </b>…<b></p> </b>و تگ کنید <b><P> </b>…<b><b></P> </b> </b>- این هم همینطور. یعنی تگ ها را می توان هم با حروف کوچک نوشت و هم <a href="https://bar812.ru/fa/propisnoi-shrift-css-delaem-zaglavnye-bukvy-css-stilyami-s.html">حروف بزرگ</a>. قبلاً به طور کلی پذیرفته شده بود که همه برچسب ها با حروف بزرگ نوشته شوند تا برچسب ها با متن معمولی متفاوت باشند. اکنون این کار ضروری نیست، زیرا بسیاری از ویرایشگرها دارای برجسته سازی نحو هستند.</p> <h2>طبقه بندی برچسب</h2> <p>بیش از 90 تگ در HTML وجود دارد. به عنوان یک قاعده، یک تگ تنها بر بخشی از سند تأثیر می گذارد، به عنوان مثال، تگ عنوان سطح اول. <h1>…</h1>. در چنین مواردی از تگ های جفت استفاده می شود: <i>افتتاح</i>و <i>بسته شدن</i>. برچسب باز کردن (به عنوان مثال، <b><h1> </b>) اثر را ایجاد می کند و بسته شدن ( <b></h1> </b>) آن را خاتمه می دهد. همانطور که از مثال می بینید، تگ بسته همیشه این کاراکتر را دارد ( <b>/ </b>) یک اسلش رو به جلو است. این برچسب ها نامیده می شوند <i>جفت شده است</i>.</p> <p>برخی از برچسب ها در جایی که ظاهر می شوند یک اثر یکباره دارند. به عنوان مثال، تگ نوار افقی <HR>یا تگ نمایش تصویر <img>. چنین تگ هایی تگ پایانی ندارند. چنین برچسب هایی جفت نشده نامیده می شوند.</p> <h3>انواع برچسب</h3> <p>علاوه بر این، برچسب ها به چندین نوع تقسیم می شوند که در عملکرد آنها متفاوت است:</p> <ul><li>برچسب های عنوان سند؛</li> <li>عناصر بلوک؛</li> <li>عناصر درون خطی؛</li> <li>عناصر جهانی؛</li> <li>لیست ها</li> <li>جداول;</li> <li>قاب ها</li> </ul><p>این تقسیم بندی سختگیرانه نیست، بنابراین برخی از برچسب ها در گروه های مختلف قرار دارند. به عنوان مثال، برچسب هایی برای ایجاد لیست <ol>و <ul>برای هر دو لیست و عناصر بلوک اعمال می شود.</p> <h2>ساختار برچسب</h2> <p>وقتی در مرورگر بارگذاری می شود، خود برچسب ها نمایش داده نمی شوند، اما بر نحوه نمایش محتوای آنها تأثیر می گذارند. اگر برچسبی غلط املایی داشته باشد، به طور کامل نادیده گرفته می شود.</p> <p>همه تگ ها ساختار خاصی دارند که باید هنگام نوشتن رعایت شود. علاوه بر این، تقریباً همه برچسب ها دارای ویژگی های مختلفی هستند که می توانند نحوه نمایش محتوا را تغییر دهند.</p> <p>بیایید به ساختار صحیح برچسب های حاوی ویژگی ها نگاه کنیم:</p> <ol><li><b> <img src='/chto-takoe-parnye-tegi-tegi-v-html-odinarnye-i-parnye-tegi-kak.html' loading=lazy loading=lazy> </b></li> <li><b><a href=»сайт»>خودش مدیر وب سایت</a> </b></li> </ol><p>مثلا من دو تگ کاملا متفاوت دادم. اولین <img>تک - مسئول نمایش تصاویر، ویژگی - <b>src="logo.jpg"</b>. دومین <a>…</a>جفت مسئول ایجاد پیوندها است، ویژگی است <b>href="سایت"</b>.</p> <p><b>نتیجه گیری 1</b>: ویژگی‌ها می‌توانند برچسب‌های جفت شده و جفت نشده داشته باشند.</p> <p><b>نتیجه 2</b>: ویژگی‌ها فقط می‌توانند تگ شروع داشته باشند، تگ‌های پایان هیچ ویژگی ندارند.</p> <p>تصویر برای روشن شدن:</p> <p><img src='https://i0.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/04/%D1%81%D1%82%D1%80%D1%83%D1%82%D1%83%D1%80%D0%B0-%D1%82%D0%B5%D0%B3%D0%B0-html.gif' width="100%" loading=lazy loading=lazy></p><p>شکل 1. ساختار تگ html</p> <h4>وظیفه توجه و دانش نحو HTML</h4> <p>بیایید به نمونه ای از یک صفحه وب ساده که در آموزش به آن نگاه کردیم نگاه کنیم.</p> <p>قبلاً خوانده اید که کل زبان از برچسب ها تشکیل شده است. در این آموزش نگاهی دقیق تر به تگ های HTML خواهیم داشت. در زبان HTML، تگ ها به تگ های تکی (نه جفتی) و تگ های جفتی تقسیم می شوند. بنابراین، تگ های تک HTML از یک تگ تشکیل شده اند، یعنی تگ بسته شدن ندارند. و توصیفگرهای زوج دارای یک تگ باز و بسته شدن هستند.</p> <h2>تگ های تک HTML</h2> <p><b>تگ های تکی</b>برچسب بسته شدن ندارید مثلا: <br> , <img>. قبلاً اینطور نوشته می شد: <br/> , <img src='/chto-takoe-parnye-tegi-tegi-v-html-odinarnye-i-parnye-tegi-kak.html' loading=lazy loading=lazy>، حالا این سبک تک تگ نویسی ربطی نداره پس اینطوری ننویس. تگ های تک پرکاربرد: <br>- انتقال به <a href="https://bar812.ru/fa/nevernoe-kolichestvo-kategorii-v-ishodnoi-stroke-1s-novye-funkcii-raboty-so.html">خط جدید</a>, <hr>- خط تقسیم، <img>- درج تصویر</p> <h2>تگ های HTML جفت شده</h2> <p><b>برچسب های جفت شده</b>خیلی بیشتر. توصیفگر جفت دارای یک تگ باز و بسته شدن است. تگ جفت یک ظرف را تشکیل می دهد. محتوای ظرف همان چیزی است که بین تگ باز و بسته قرار دارد. در مثال این مقاله، برچسب را مشاهده کردید <h1>تگ ها در HTML چیست؟</h1>بنابراین، این یک تگ جفتی است، محتوای این تگ متن "تگ ها در HTML چیست؟" است. آغاز آن تگ است <h1>، و در پایان</h1> .</p> <p><a href="https://bar812.ru/fa/na-glavnuyu-stranicu-vam-nuzhno-primery-tekstov-na-glavnuyu-stranicu-i.html">اشتباه اصلی</a>تازه کارها در نوشتن تگ های جفت، این یک سردرگمی تودرتو است. به عنوان مثال، این ورودی صحیح است: <p><b>پاراگراف پررنگ</b></p>. و در اینجا خطا وجود دارد: <p><b>پاراگراف پررنگ</p></b>، یک سند HTML با چنین طرح‌بندی معتبر در نظر گرفته نمی‌شود. برای اینکه تودرتو اشتباه نشود، این کار را انجام دهید: تگ های جفتی ایجاد کنید، سپس دیگران را در آنها قرار دهید و در پایان متنی را در داخل هر دو تگ بنویسید. <p><b>نحوه صحیح نوشتن تگ های جفت</b></p> .</p> <h2>چه چیزی در HTML5 از نظر برچسب ها جدید است؟</h2> <p><b>زبان HTML5</b>یک پسوند HTML4 است، بنابراین بیشتر یا همه برچسب ها را از HTML4 نگه داشته و خود را اضافه کرده است. HTML5 تگ های ویژه ای را برای تقسیم سایت به بلوک های اصلی معرفی کرد: هدر، منو، پاورقی، نوار کناری و محتوا.</p> <h2>چرا یادگیری نحوه استفاده از برچسب ها مهم است؟</h2> <p>موتورهای جستجو Yandex و Google به طرح بندی حساس هستند <a href="https://bar812.ru/fa/na-etoi-stranice-proizoshla-oshibka-scenariya-kak-ustranit-oshibki.html">اسناد HTML</a>بررسی اعتبار آنها آنها به دنبال کلمات کلیدی محصور شده در توصیفگرهای خاص و غیره می گردند. اما این بخش در مورد آن نیست. این در مورد ارتقاء (SEO) صدق می کند.</p> <h2>چگونه تمام تگ های HTML را یاد بگیریم؟</h2> <p>بله، تگ های زیادی وجود دارد. اما نیازی به آموزش خاص آنها نیست. در حالی که نوشتن چیزی را تمرین می‌کنید، همه توصیف‌گرها، جفت و مجرد، به راحتی به خاطر می‌آیند. البته با گذشت زمان.</p> <p><b>تگ های HTML</b>اساس زبان HTML است. از تگ ها برای تعیین حد شروع و پایان عناصر در نشانه گذاری استفاده می شود.</p> <p>هر سند HTML از درختی از عناصر و متن HTML تشکیل شده است. هر عنصر HTML با یک تگ شروع (باز کردن) و یک پایان (بستن) مشخص می شود. تگ های شروع و پایان حاوی نام تگ هستند.</p> <p>تمام عناصر HTML به پنج نوع تقسیم می شوند:</p> <ul><li><b>عناصر خالی</b> — <area> , <base> , <br> , <col> , <embed> , <hr> , <img> , <input> , <link> , <menuitem> , <meta> , <param> , <source> , <track> , <wbr> ;</li> <li><b>عناصر متن ساده</b> — <script> , <style> ;</li> <li><b>элементы, выводящие неформатированный текст </b> — <textarea> , <title> ;</li> <li><b>элементы из другого пространства имён </b> — MathML и SVG;</li> <li><b>обычные элементы </b> — все остальные элементы.</li> </ul><p>В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5. Экспериментальные и устаревшие теги исключены. Элементы, добавленные в спецификацию HTML5, выделены бирюзовым цветом.</p> <h2>Полный список HTML-элементов</h2> <table class="t3"> Таблица 1. HTML-элементы <tr><th style="width: 20%;">Тег </th> <th>Описание </th> </tr><tr><td> <!--...--> </td> <td>Используется для добавления комментариев. </td> </tr><tr><td> <!DOCTYPE> </td> <td>Объявляет тип документа и предоставляет основную информацию для браузера — его язык и версия. </td> </tr><tr><td> <a> </td> <td>Создаёт гипертекстовые ссылки. </td> </tr><tr><td> <abbr> </td> <td>Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title . </td> </tr><tr><td> <address> </td> <td>Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом. </td> </tr><tr><td> <area> </td> <td>Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь тега <map> . </td> </tr><tr><td> <article> </td> <td>Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий. </td> </tr><tr><td> <aside> </td> <td>Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта. </td> </tr><tr><td> <audio> </td> <td>Загружает звуковой контент на веб-страницу. </td> </tr><tr><td> <b> </td> <td>Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному. </td> </tr><tr><td> <base> </td> <td>Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде. </td> </tr><tr><td> <bdi> </td> <td>Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста. </td> </tr><tr><td> <bdo> </td> <td>Отображает текст в направлении, указанном в атрибуте dir , переопределяя текущее направление написания текста. </td> </tr><tr><td> <blockquote> </td> <td>Выделяет текст как цитату, применяется для описания больших цитат. </td> </tr><tr><td> <body> </td> <td>Представляет тело документа (содержимое, не относящееся к метаданным документа). </td> </tr><tr><td> <br> </td> <td>Перенос текста на новую строку. </td> </tr><tr><td> <button> </td> <td>Создает интерактивную кнопку. Внутрь тега можно поместить содержимое — текст или изображение. </td> </tr><tr><td> <canvas> </td> <td>Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript. </td> </tr><tr><td> <caption> </td> <td>Добавляет подпись к таблице. Вставляется сразу после тега <table> . </td> </tr><tr><td> <cite> </td> <td>Используется для указания источника цитирования. Отображается курсивом. </td> </tr><tr><td> <code> </td> <td>Представляет фрагмент программного кода, отображается шрифтом семейства monospace . </td> </tr><tr><td> <col> </td> <td>Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа. </td> </tr><tr><td> <colgroup> </td> <td>Создает структурную группу столбцов, выделяющую множество логически однородных ячеек. </td> </tr><tr><td> <data> </td> <td>Элемент используется для связывания значения атрибута value , которое представлено в машиночитаемом формате и может быть обработано компьютером, с содержимым тега. </td> </tr><tr><td> <datalist> </td> <td>Элемент-контейнер для выпадающего списка элемента <input> . Варианты значений помещаются в элементы <option> . </td> </tr><tr><td> <dd> </td> <td>Используется для описания термина из тега <dt> . </td> </tr><tr><td> <del> </td> <td>Помечает текст как удаленный, перечёркивая его. </td> </tr><tr><td> <details> </td> <td>Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в тег <summary> . </td> </tr><tr><td> <dfn> </td> <td>Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина. </td> </tr><tr><td> <dialog> </td> <td>Интерактивный элемент, с которым взаимодействует пользователь для выполнения задачи, например, диалоговое окно, инспектор или окно. Без атрибута open не виден для пользователя. </td> </tr><tr><td> <div> </td> <td>Тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями. </td> </tr><tr><td> <dl> </td> <td>Тег-контейнер, внутри которого находятся термин и его описание. </td> </tr><tr><td> <dt> </td> <td>Используется для задания термина. </td> </tr><tr><td> <em> </td> <td>Выделяет важные фрагменты текста, отображая их курсивом. </td> </tr><tr><td> <embed> </td> <td>Тег-контейнер для встраивания внешнего интерактивного контента или плагина. </td> </tr><tr><td> <fieldset> </td> <td>Группирует связанные элементы в форме, рисуя рамку вокруг них. </td> </tr><tr><td> <figcaption> </td> <td>Заголовок/подпись для элемента <figure> . </td> </tr><tr><td> <figure> </td> <td>Самодостаточный тег-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью. </td> </tr><tr><td> <footer> </td> <td>Определяет завершающую область (нижний колонтитул) документа или раздела. </td> </tr><tr><td> <form> </td> <td>Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action . </td> </tr><tr><td> <h1-h6> </td> <td>Создают заголовки шести уровней для связанных с ними разделов. </td> </tr><tr><td> <head> </td> <td>Элемент-контейнер для метаданных HTML-документа, таких как <title> , <meta> , <script> , <link> , <style> . </td> </tr><tr><td> <header> </td> <td>Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе. </td> </tr><tr><td> <hr> </td> <td>Горизонтальная линия для тематического разделения параграфов. </td> </tr><tr><td> <html> </td> <td>Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов. </td> </tr><tr><td> <i> </td> <td>Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент. </td> </tr><tr><td> <iframe> </td> <td>Создает встроенный фрейм, загружая в текущий HTML-документ другой документ. </td> </tr><tr><td> <img> </td> <td>Встраивает изображения в HTML-документ с помощью атрибута src , значением которого является адрес встраиваемого изображения. </td> </tr><tr><td> <input> </td> <td>Создает многофункциональные поля формы, в которые пользователь может вводить данные. </td> </tr><tr><td> <ins> </td> <td>Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ. </td> </tr><tr><td> <kbd> </td> <td>Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace. </td> </tr><tr><td> <meta> </td> <td>Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке <head> может быть несколько тегов <meta> , так как в зависимости от используемых атрибутов они несут разную информацию. </td> </tr><tr><td> <meter> </td> <td>Индикатор измерения в заданном диапазоне. </td> </tr><tr><td> <nav> </td> <td>Раздел документа, содержащий навигационные ссылки по сайту. </td> </tr><tr><td> <noscript> </td> <td>Определяет секцию, не поддерживающую сценарий (скрипт). </td> </tr><tr><td> <object> </td> <td>Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег <param> . </td> </tr><tr><td> <ol> </td> <td>Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная. </td> </tr><tr><td> <optgroup> </td> <td>Контейнер с заголовком для группы элементов <option> . </td> </tr><tr><td> <option> </td> <td>Определяет вариант/опцию для выбора в раскрывающемся списке <select> , <optgroup> или <datalist> . </td> </tr><tr><td> <output> </td> <td>Поле для вывода результата вычисления, рассчитанного с помощью скрипта. </td> </tr><tr><td> <p> </td> <td>Параграфы в тексте. </td> </tr><tr><td> <param> </td> <td>Определяет параметры для плагинов, встраиваемых с помощью элемента <object> . </td> </tr><tr><td> <picture> </td> <td>Элемент-контейнер, содержащий один элемент <img> и ноль или несколько элементов <source> . Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение. </td> </tr><tr><td> <pre> </td> <td>Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д. </td> </tr><tr><td> <progress> </td> <td>Индикатор выполнения задачи любого рода. </td> </tr><tr><td> <q> </td> <td>Определяет краткую цитату. </td> </tr><tr><td> <ruby> </td> <td>Контейнер для Восточно-Азиатских символов и их расшифровки. </td> </tr><tr><td> <rb> </td> <td>Определяет вложенный в него текст как базовый компонент аннотации. </td> </tr><tr><td> <rt> </td> <td>Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе <ruby> , выводится уменьшенным шрифтом. </td> </tr><tr><td> <rtc> </td> <td>Отмечает вложенный в него текст как дополнительную аннотацию. </td> </tr><tr><td> <rp> </td> <td>Выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>. </td> </tr><tr><td> <s> </td> <td>Отображает текст, не являющийся актуальным, перечеркнутым. </td> </tr><tr><td> <samp> </td> <td>Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом. </td> </tr><tr><td> <script> </td> <td>Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src . </td> </tr><tr><td> <section> </td> <td>Определяет логическую область (раздел) страницы, обычно с заголовком. </td> </tr><tr><td> <select> </td> <td>Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в <option> . </td> </tr><tr><td> <small> </td> <td>Отображает текст шрифтом меньшего размера. </td> </tr><tr><td> <source> </td> <td>Указывает местоположение и тип альтернативных медиаресурсов для элементов <picture> , <video> , <audio> . </td> </tr><tr><td> <span> </td> <td>Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов. </td> </tr><tr><td> <strong> </td> <td>Расставляет акценты в тексте, выделяя полужирным. </td> </tr><tr><td> <style> </td> <td>Подключает встраиваемые таблицы стилей. </td> </tr><tr><td> <sub> </td> <td>Задает подстрочное написание символов, например, индекса элемента в химических формулах. </td> </tr><tr><td> <summary> </td> <td>Создаёт видимый заголовок для тега <details> . Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка. </td> </tr><tr><td> <sup> </td> <td>Задает надстрочное написание символов. </td> </tr><tr><td> <table> </td> <td>Тег для создания таблицы. </td> </tr><tr><td> <tbody> </td> <td>Определяет тело таблицы. </td> </tr><tr><td> <td> </td> <td>Создает ячейку таблицы. </td> </tr><tr><td> <template> </td> <td>Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом. </td> </tr><tr><td> <textarea> </td> <td>Создает большие поля для ввода текста. </td> </tr><tr><td> <tfoot> </td> <td>Определяет нижний колонтитул таблицы. </td> </tr><tr><td> <th> </td> <td>Создает заголовок ячейки таблицы. </td> </tr><tr><td> <thead> </td> <td>Определяет заголовок таблицы. </td> </tr><tr><td> <time> </td> <td>Определяет дату/время. </td> </tr><tr><td> <title> </td> <td>Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия. </td> </tr><tr><td> <tr> </td> <td>Создает строку таблицы. </td> </tr><tr><td> <track> </td> <td>Добавляет субтитры для элементов <audio> и <video> . </td> </tr><tr><td> <u> </td> <td>Выделяет отрывок текста подчёркиванием, без дополнительного акцента. </td> </tr><tr><td> <ul> </td> <td>Создает маркированный список. </td> </tr><tr><td> <var> </td> <td>Выделяет переменные из программ, отображая их курсивом. </td> </tr><tr><td> <video> </td> <td>Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg. </td> </tr><tr><td> <wbr> </td> <td>Указывает браузеру возможное место разрыва длинной строки. </td> </tr></table><h3>Таблица-шпаргалка с тегами</h3> <p>Для удобства пользования я сгруппировала теги по тематическим разделам, добавив значения свойства display для каждого тега. Чтобы перейти к таблице, кликните по рисунку.</p> <i> </i><p>HTML элемент - это основная структурная единица веб-страницы, написанная на языке HTML.</p> <h2>Парные и одиночные теги HTML</h2> <p>Синтаксис HTML элементов, состоящих из парных тегов:</p> <ul><li>Элемент начинается с открывающего тега.</li> <li>Элемент заканчивается закрывающим тегом.</li> <li>Содержимым элемента является все, что находится между открывающим и закрывающим тегами. Содержимое может быть текстом и/или другим HTML элементом.</li> </ul><p>Примечание: не забывайте в закрывающем теге ставить символ "<b>/ </b>", он указывает браузеру, что ваш элемент закончился и что то, что будет написано после него, является уже другим элементом. Если не поставить символ "<b>/ </b>" в закрывающем теге, то браузер примет его за новый элемент, вложенный в предыдущий, который по мнению браузера всё ещё не закрыт.</p> <p>Синтаксис HTML элементов, состоящих из одиночных тегов:</p> <p><img src='https://i1.wp.com/puzzleweb.ru/images/teacher/html_elements2.png' height="212" width="237" loading=lazy loading=lazy></p> <ul><li>Элемент состоит только из открывающего тега.</li> </ul><p>Элементы, состоящие из одиночных тегов называются пустыми . Всего в HTML 16 одиночных тегов:</p> <table id="em_el"><tr><td style="width: 50%;"> </td> <td> </td> </tr></table><h2>Вложенные элементы</h2> <p>HTML элементы, состоящие из парных тегов, могут либо содержать в себе любые другие элементы, либо сами могут быть вложены в другие элементы, при этом глубина вложенности элементов не ограничена.</p> <p>Следующий пример состоит из трех элементов, два из которых вложенные:</p><p> <html> <body> <p>Мой первый абзац</p> </body> </html> </p><p>Когда один элемент располагается внутри другого, нужно следить за тем, чтобы вложенный элемент начинался и заканчивался внутри одного и того же элемента. Так, например, следующий код является неверным:</p><p> <p>Это <em>очень</p> интересно</em> </p><p>Здесь элемент <em> выходит за пределы элемента <p><img src='https://i1.wp.com/puzzleweb.ru/images/puzzleweb/nested2.png' height="90" width="171" loading=lazy loading=lazy></p> <p>Пример с правильной вложенностью:</p><p> <p>Это <em>очень</em> интересно</p> </p><p>Здесь элемент <em> правильно вложен - он находится полностью в элементе <p><img src='https://i1.wp.com/puzzleweb.ru/images/puzzleweb/nested1.png' height="79" width="162" loading=lazy loading=lazy></p> <h2>Пробельные символы</h2> <p>Браузер игнорирует пробельные символы в HTML-коде, поэтому их можно использовать с пользой для себя, придавая коду удобочитаемый вид. К пробельным символам относятся: символы табуляции, перенос строки и обычные пробелы, их можно использовать в любом количестве. Пример кода, в котором используются пробельные символы:</p><p> <html> <head> <title>Заголовок

Мой первый заголовок

Мой первый абзац

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

Заголовок

Мой первый заголовок

Мой первый абзац

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