Το HTML είναι απλό αρχείο κειμένουμε επέκταση .htm (html). Για τη δημιουργία η πιο απλή σελίδαστην αρχή, όταν απλώς προπονείστε, χρειάζεστε μόνο ένα σημειωματάριο. Ανοίξτε το σημειωματάριο και γράψτε το κείμενο.
Κάθε στοιχείο HTML είναι μια ετικέτα που περιβάλλεται από<>αγκύλες. Οποιοδήποτε αρχείο, σελίδα html ξεκινά με μια ετικέτα και τελειώνει με την ετικέτα.
Εδώ είναι η ετικέτα απλά λέει στο πρόγραμμα περιήγησης (που είναι το πρόγραμμα στο οποίο περιηγείστε στον Ιστό) ότι αυτό το έγγραφοείναι ένα έγγραφο σήμανσης html.
Ετικέτα - σημαίνει την αρχή του εγγράφου html και- η ετικέτα κλεισίματος σημαίνει το τέλος του εγγράφου html.
Μέσα σε αυτές τις ετικέτες, υπάρχουν πολλές άλλες σημαντικές ετικέτες. Αμέσως μετά την ετικέτα υπάρχουν ετικέτες που σημαίνουν τον τίτλο της σελίδας και το σώμα της σελίδας.
Η πρώτη μου σελίδα HTML
Ετικέτα
σημαίνει τον τίτλο του τίτλου του παραθύρου όταν εμφανίζεται αυτή η σελίδα. <br>Τώρα μπορείτε να δημιουργήσετε ένα νέο <a href="https://bar812.ru/el/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/el/grafika-na-web-stranice-v-html-dobavlyaem-izobrazheniya-na-web-stranicu-a-eshche.html">σελίδες html</a>, το οποίο περιλαμβάνει <a href="https://bar812.ru/el/kak-podbirat-klyuchevye-slova-dlya-kontekstnoi-reklamy-klyuchevye.html">λέξεις-κλειδιά</a>για μηχανές αναζήτησης <a href="https://bar812.ru/el/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/el/metall-v-fotoshope-bystryi-sposob-sozdaniya-metallicheskogo.html">γρήγορη δημιουργία</a>τοποθεσίες, αλλά για να εφαρμοστούν και να χρησιμοποιηθούν τέτοιες ρουτίνες και πρότυπα, απαιτείται ακόμα μια ελάχιστη γνώση αυτών των συνεδριών.</p>
<p><b>Ετικέτα</b> (<i>pl. ετικέτες, μερικές φορές tag</i>) είναι ένα στοιχείο <a href="https://bar812.ru/el/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/el/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=»сайт»>Ο ίδιος Webmaster</a>
</b></li>
</ol><p>Για παράδειγμα, έδωσα δύο εντελώς διαφορετικές ετικέτες. Πρώτα <img>ενιαίο - υπεύθυνο για την εμφάνιση εικόνων, χαρακτηριστικό - <b>src="logo.jpg"</b>. Δεύτερος <a>…</a>το ζεύγος είναι υπεύθυνο για τη δημιουργία συνδέσμων, το χαρακτηριστικό είναι <b>href="site"</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/el/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/el/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/el/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>Заголовок
Мой первый заголовок
Мой первый абзац
