HTML은 일반 텍스트 파일.htm(html) 확장자로. 생성을 위해 가장 간단한 페이지처음에는 훈련만 하면 노트북만 있으면 됩니다. 메모장을 열고 텍스트를 작성합니다.

각 HTML 요소는 다음으로 둘러싸인 태그입니다.<>괄호. 모든 파일, html 페이지는 태그로 시작 그리고 태그로 끝남.

여기 태그가 있습니다 단순히 브라우저(웹을 탐색하는 프로그램)에 이 문서 HTML 마크업 문서입니다.

꼬리표 - html 문서의 시작을 의미하고,- 닫는 태그는 html 문서의 끝을 의미합니다.


이러한 태그 내에는 몇 가지 다른 중요한 태그가 있습니다. 태그 바로 뒤에 페이지 제목과 페이지 본문을 의미하는 태그가 있습니다.

내 첫 번째 HTML 페이지



꼬리표 이 페이지가 표시될 때 창 제목의 제목을 의미합니다. <br>이제 새 항목을 만들 수 있습니다. <a href="https://bar812.ru/ko/sozdanie-kompleksnyh-dokumentov-v-tekstovom-redaktore-ms-word.html">텍스트 문서</a>메모장에서 위의 텍스트를 복사하여 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/ko/grafika-na-web-stranice-v-html-dobavlyaem-izobrazheniya-na-web-stranicu-a-eshche.html">HTML 페이지</a>, 포함 <a href="https://bar812.ru/ko/gugl-advords-sbor-klyuchevyh-slov-planirovshchik-klyuchevyh-slov-google-adwords.html">키워드</a>검색 엔진용 <a href="https://bar812.ru/ko/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/ko/metall-v-fotoshope-bystryi-sposob-sozdaniya-metallicheskogo.html">빠른 생성</a>그러나 이러한 루틴과 템플릿을 적용하고 사용하려면 이러한 세션에 대한 최소한의 지식이 여전히 필요합니다.</p> <p><b>꼬리표</b> (<i>pl. 태그, 때때로 태그</i>)은 요소입니다 <a href="https://bar812.ru/ko/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의 각 태그는 특별한 의미를 가지며 특정 데이터를 표시하는 역할을 합니다. 태그 이름의 대소문자는 중요하지 않습니다(예: tag <b><p> </b>…<b></p> </b>및 태그 <b><P> </b>…<b><b></P> </b> </b>- 이것은 동일합니다. 즉, 태그는 소문자와 <a href="https://bar812.ru/ko/propisnoi-shrift-css-delaem-zaglavnye-bukvy-css-stilyami-s.html">대문자</a>. 이전에는 모든 태그를 대문자로 작성하여 태그를 일반 텍스트와 구별하는 것이 일반적이었습니다. 많은 편집기에 구문 강조 표시가 있으므로 이제 이것은 필요하지 않습니다.</p> <h2>태그 분류</h2> <p>HTML에는 90개 이상의 태그가 있습니다. 일반적으로 하나의 태그는 문서의 일부에만 영향을 미칩니다(예: 첫 번째 수준 제목 태그) <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="로고.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/ko/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/ko/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/ko/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-документа со временем становится больше и усложняется, становится видно, что использование пробельных символов действительно улучшает читабельность кода.