HTML Toate tagurile HTML

</code> în HTML</h1> <div class="invata-badges"> <a class="invata-badge invata-badge--lang" href="https://www.dexblog.ro/invata/html/#linkuri-si-multimedia">Linkuri și multimedia</a> <span class="invata-badge">HTML 4.0+</span> </div> <p class="invata-lead">Încorporează un alt document HTML în interiorul paginii curente (videoclipuri YouTube, hărți, widget-uri).</p> </header> <div class="invata-syntax"> <span class="invata-syntax-label">Sintaxă tag</span> <pre><code><iframe src="https://harta.ro" width="600" height="400" title="Harta sediului"></iframe></code></pre> </div> <div class="entry-content"> <h2>Ce face <code><iframe></code></h2> <p>Tagul <code><iframe></code> (inline frame) decupează o fereastră în pagina curentă în care este încărcată o altă pagină web sau o resursă externă.</p> <p>Este modalitatea standard prin care se inserează videoclipuri de pe YouTube sau Vimeo, hărți Google Maps, butoane de social media sau formulare de plată securizate.</p> <p>Din motive de securitate și performanță, este recomandat să adaugi întotdeauna atributul <code>loading="lazy"</code> și un <code>title</code> descriptiv pentru accesibilitate.</p> <h2>Atribute</h2> <table class="invata-params"> <thead> <tr> <th>Atribut</th> <th>Descriere</th> </tr> </thead> <tbody> <tr> <td><code>src</code></td> <td>Adresa URL a paginii sau resursei încorporate.</td> </tr> <tr> <td><code>title</code></td> <td>Descrierea conținutului iframe-ului (obligatorie pentru cititoarele de ecran).</td> </tr> <tr> <td><code>width</code></td> <td>Lățimea cadrului în pixeli.</td> </tr> <tr> <td><code>height</code></td> <td>Înălțimea cadrului în pixeli.</td> </tr> <tr> <td><code>loading</code></td> <td>„lazy” pentru a descărca iframe-ul doar când devine vizibil la derulare.</td> </tr> <tr> <td><code>sandbox</code></td> <td>Aplică restricții suplimentare de securitate asupra conținutului extern.</td> </tr> </tbody> </table> <h2>Exemple</h2> <h3>Exemplul 1: Încorporarea unui videoclip YouTube optimizat</h3> <p>Include titlu pentru nevăzători și lazy loading.</p> <pre><code><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" title="Videoclip demonstrativ de programare" loading="lazy" allowfullscreen> </iframe></code></pre> <p><span class="invata-output-label">Ce afișează browserul</span></p> <pre class="invata-output"><code>Un cadru interactiv YouTube integrat perfect în pagină, gata de redare.</code></pre> <h2>Greșeli frecvente</h2> <ul> <li>Omiterea atributului title, o greșeală gravă de accesibilitate raportată de toate uneltele de audit Lighthouse.</li> <li>Încărcarea mai multor iframe-uri grele fără loading=”lazy”, ceea ce încetinește dramatic încărcarea site-ului.</li> </ul> <h2>Comenzi înrudite</h2> <ul> <li><a href="/invata/html/video/" data-wpel-link="internal"><code><video></code></a>: Redă conținut video direct în browser, fără pluginuri externe, cu butoane native de redare și volum.</li> <li><a href="/invata/html/a/" data-wpel-link="internal"><code><a></code></a>: Creează un hyperlink către o altă pagină web, un fișier, o adresă de email, un număr de telefon sau o ancoră din pagină.</li> </ul> </div> <nav class="invata-pager" aria-label="Tagul anterior / Tagul următor"> <a class="invata-pager-prev" href="https://www.dexblog.ro/invata/html/audio/"> <span>← Tagul anterior</span> <code><audio></code> </a> <a class="invata-pager-next" href="https://www.dexblog.ro/invata/html/ul/"> <span>Tagul următor →</span> <code><ul></code> </a> </nav> </article> </div> <aside class="site-sidebar invata-sidebar"> <div class="sidebar-sticky"> <div class="widget"> <h3 class="widget-title"> <a href="https://www.dexblog.ro/invata/html/"> <span class="invata-mark invata-mark--sm">HTML</span> Toate tagurile HTML </a> </h3> <label class="invata-filter"> <span class="screen-reader-text">Filtrează tagurile</span> <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="2"/><path d="m20 20-3.5-3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> <input type="search" data-invata-filter placeholder="Filtrează tagurile…" autocomplete="off" spellcheck="false"> </label> <div class="invata-sidebar-commands" data-invata-list data-invata-unu="element" data-invata-multi="elemente"> <div class="invata-sidebar-section" data-invata-group> <p class="invata-sidebar-group">Structura documentului</p> <ul> <li data-invata-item data-category="Structura documentului"> <a href="https://www.dexblog.ro/invata/html/doctype/"><code><!DOCTYPE html></code></a> </li> <li data-invata-item data-category="Structura documentului"> <a href="https://www.dexblog.ro/invata/html/html/"><code><html></code></a> </li> <li data-invata-item data-category="Structura documentului"> <a href="https://www.dexblog.ro/invata/html/head/"><code><head></code></a> </li> <li data-invata-item data-category="Structura documentului"> <a href="https://www.dexblog.ro/invata/html/title/"><code><title></code></a> </li> <li data-invata-item data-category="Structura documentului"> <a href="https://www.dexblog.ro/invata/html/meta/"><code><meta></code></a> </li> <li data-invata-item data-category="Structura documentului"> <a href="https://www.dexblog.ro/invata/html/link/"><code><link></code></a> </li> <li data-invata-item data-category="Structura documentului"> <a href="https://www.dexblog.ro/invata/html/style/"><code><style></code></a> </li> <li data-invata-item data-category="Structura documentului"> <a href="https://www.dexblog.ro/invata/html/script/"><code><script></code></a> </li> <li data-invata-item data-category="Structura documentului"> <a href="https://www.dexblog.ro/invata/html/body/"><code><body></code></a> </li> </ul> </div> <div class="invata-sidebar-section" data-invata-group> <p class="invata-sidebar-group">Text și formatare</p> <ul> <li data-invata-item data-category="Text și formatare"> <a href="https://www.dexblog.ro/invata/html/h1-h6/"><code><h1> – <h6></code></a> </li> <li data-invata-item data-category="Text și formatare"> <a href="https://www.dexblog.ro/invata/html/p/"><code><p></code></a> </li> <li data-invata-item data-category="Text și formatare"> <a href="https://www.dexblog.ro/invata/html/strong-em/"><code><strong> și <em></code></a> </li> <li data-invata-item data-category="Text și formatare"> <a href="https://www.dexblog.ro/invata/html/span/"><code><span></code></a> </li> <li data-invata-item data-category="Text și formatare"> <a href="https://www.dexblog.ro/invata/html/br-hr/"><code><br> și <hr></code></a> </li> <li data-invata-item data-category="Text și formatare"> <a href="https://www.dexblog.ro/invata/html/blockquote/"><code><blockquote></code></a> </li> <li data-invata-item data-category="Text și formatare"> <a href="https://www.dexblog.ro/invata/html/code-pre/"><code><code> și <pre></code></a> </li> <li data-invata-item data-category="Text și formatare"> <a href="https://www.dexblog.ro/invata/html/mark-small/"><code><mark> și <small></code></a> </li> </ul> </div> <div class="invata-sidebar-section" data-invata-group> <p class="invata-sidebar-group">Linkuri și multimedia</p> <ul> <li data-invata-item data-category="Linkuri și multimedia"> <a href="https://www.dexblog.ro/invata/html/a/"><code><a></code></a> </li> <li data-invata-item data-category="Linkuri și multimedia"> <a href="https://www.dexblog.ro/invata/html/img/"><code><img></code></a> </li> <li data-invata-item data-category="Linkuri și multimedia"> <a href="https://www.dexblog.ro/invata/html/picture/"><code><picture></code></a> </li> <li data-invata-item data-category="Linkuri și multimedia"> <a href="https://www.dexblog.ro/invata/html/figure/"><code><figure> și <figcaption></code></a> </li> <li data-invata-item data-category="Linkuri și multimedia"> <a href="https://www.dexblog.ro/invata/html/video/"><code><video></code></a> </li> <li data-invata-item data-category="Linkuri și multimedia"> <a href="https://www.dexblog.ro/invata/html/audio/"><code><audio></code></a> </li> <li data-invata-item data-category="Linkuri și multimedia" class="is-current"> <a href="https://www.dexblog.ro/invata/html/iframe/" aria-current="page"><code><iframe></code></a> </li> </ul> </div> <div class="invata-sidebar-section" data-invata-group> <p class="invata-sidebar-group">Liste</p> <ul> <li data-invata-item data-category="Liste"> <a href="https://www.dexblog.ro/invata/html/ul/"><code><ul></code></a> </li> <li data-invata-item data-category="Liste"> <a href="https://www.dexblog.ro/invata/html/ol/"><code><ol></code></a> </li> <li data-invata-item data-category="Liste"> <a href="https://www.dexblog.ro/invata/html/li/"><code><li></code></a> </li> <li data-invata-item data-category="Liste"> <a href="https://www.dexblog.ro/invata/html/dl/"><code><dl>, <dt> și <dd></code></a> </li> </ul> </div> <div class="invata-sidebar-section" data-invata-group> <p class="invata-sidebar-group">Tabele</p> <ul> <li data-invata-item data-category="Tabele"> <a href="https://www.dexblog.ro/invata/html/table/"><code><table></code></a> </li> <li data-invata-item data-category="Tabele"> <a href="https://www.dexblog.ro/invata/html/thead-tbody/"><code><thead>, <tbody> și <tfoot></code></a> </li> <li data-invata-item data-category="Tabele"> <a href="https://www.dexblog.ro/invata/html/tr/"><code><tr></code></a> </li> <li data-invata-item data-category="Tabele"> <a href="https://www.dexblog.ro/invata/html/th/"><code><th></code></a> </li> <li data-invata-item data-category="Tabele"> <a href="https://www.dexblog.ro/invata/html/td/"><code><td></code></a> </li> </ul> </div> <div class="invata-sidebar-section" data-invata-group> <p class="invata-sidebar-group">Formulare și introducere date</p> <ul> <li data-invata-item data-category="Formulare și introducere date"> <a href="https://www.dexblog.ro/invata/html/form/"><code><form></code></a> </li> <li data-invata-item data-category="Formulare și introducere date"> <a href="https://www.dexblog.ro/invata/html/input/"><code><input></code></a> </li> <li data-invata-item data-category="Formulare și introducere date"> <a href="https://www.dexblog.ro/invata/html/label/"><code><label></code></a> </li> <li data-invata-item data-category="Formulare și introducere date"> <a href="https://www.dexblog.ro/invata/html/button/"><code><button></code></a> </li> <li data-invata-item data-category="Formulare și introducere date"> <a href="https://www.dexblog.ro/invata/html/textarea/"><code><textarea></code></a> </li> <li data-invata-item data-category="Formulare și introducere date"> <a href="https://www.dexblog.ro/invata/html/select/"><code><select> și <option></code></a> </li> <li data-invata-item data-category="Formulare și introducere date"> <a href="https://www.dexblog.ro/invata/html/fieldset/"><code><fieldset> și <legend></code></a> </li> </ul> </div> <div class="invata-sidebar-section" data-invata-group> <p class="invata-sidebar-group">Structură semantică (Layout)</p> <ul> <li data-invata-item data-category="Structură semantică (Layout)"> <a href="https://www.dexblog.ro/invata/html/header/"><code><header></code></a> </li> <li data-invata-item data-category="Structură semantică (Layout)"> <a href="https://www.dexblog.ro/invata/html/nav/"><code><nav></code></a> </li> <li data-invata-item data-category="Structură semantică (Layout)"> <a href="https://www.dexblog.ro/invata/html/main/"><code><main></code></a> </li> <li data-invata-item data-category="Structură semantică (Layout)"> <a href="https://www.dexblog.ro/invata/html/article/"><code><article></code></a> </li> <li data-invata-item data-category="Structură semantică (Layout)"> <a href="https://www.dexblog.ro/invata/html/section/"><code><section></code></a> </li> <li data-invata-item data-category="Structură semantică (Layout)"> <a href="https://www.dexblog.ro/invata/html/aside/"><code><aside></code></a> </li> <li data-invata-item data-category="Structură semantică (Layout)"> <a href="https://www.dexblog.ro/invata/html/footer/"><code><footer></code></a> </li> <li data-invata-item data-category="Structură semantică (Layout)"> <a href="https://www.dexblog.ro/invata/html/div/"><code><div></code></a> </li> </ul> </div> <div class="invata-sidebar-section" data-invata-group> <p class="invata-sidebar-group">Elemente interactive</p> <ul> <li data-invata-item data-category="Elemente interactive"> <a href="https://www.dexblog.ro/invata/html/details/"><code><details> și <summary></code></a> </li> <li data-invata-item data-category="Elemente interactive"> <a href="https://www.dexblog.ro/invata/html/dialog/"><code><dialog></code></a> </li> <li data-invata-item data-category="Elemente interactive"> <a href="https://www.dexblog.ro/invata/html/template/"><code><template></code></a> </li> </ul> </div> <p class="invata-filter-empty" data-invata-empty hidden>Niciun tag găsit.</p> </div> </div> <div class="widget"> <h3 class="widget-title">Alte secțiuni</h3> <ul class="invata-sidebar-languages"> <li class="invata-lang-css"> <a href="https://www.dexblog.ro/invata/css/"> <span class="invata-mark invata-mark--sm">CSS</span> CSS </a> </li> <li class="invata-lang-php"> <a href="https://www.dexblog.ro/invata/php/"> <span class="invata-mark invata-mark--sm">PHP</span> PHP </a> </li> <li class="invata-lang-javascript"> <a href="https://www.dexblog.ro/invata/javascript/"> <span class="invata-mark invata-mark--sm">JS</span> JavaScript </a> </li> <li class="invata-lang-mysql"> <a href="https://www.dexblog.ro/invata/mysql/"> <span class="invata-mark invata-mark--sm">SQL</span> MySQL </a> </li> <li class="invata-lang-typescript"> <a href="https://www.dexblog.ro/invata/typescript/"> <span class="invata-mark invata-mark--sm">TS</span> TypeScript </a> </li> <li class="invata-lang-python"> <a href="https://www.dexblog.ro/invata/python/"> <span class="invata-mark invata-mark--sm">PY</span> Python </a> </li> <li class="invata-lang-cpp"> <a href="https://www.dexblog.ro/invata/cpp/"> <span class="invata-mark invata-mark--sm">C++</span> C++ </a> </li> <li class="invata-lang-ai"> <a href="https://www.dexblog.ro/invata/ai/"> <span class="invata-mark invata-mark--sm">AI</span> Inteligența Artificială – AI </a> </li> <li class="invata-lang-go"> <a href="https://www.dexblog.ro/invata/go/"> <span class="invata-mark invata-mark--sm">GO</span> Go </a> </li> <li class="invata-lang-rust"> <a href="https://www.dexblog.ro/invata/rust/"> <span class="invata-mark invata-mark--sm">RS</span> Rust </a> </li> <li class="invata-lang-java"> <a href="https://www.dexblog.ro/invata/java/"> <span class="invata-mark invata-mark--sm">JAVA</span> Java </a> </li> <li class="invata-lang-kotlin"> <a href="https://www.dexblog.ro/invata/kotlin/"> <span class="invata-mark invata-mark--sm">KT</span> Kotlin </a> </li> <li class="invata-lang-dart"> <a href="https://www.dexblog.ro/invata/dart/"> <span class="invata-mark invata-mark--sm">DART</span> Dart </a> </li> </ul> </div> </div> </aside> </div> </main> <footer class="site-footer"> <div class="footer-container"> <div class="footer-brand"> <a class="footer-logo" href="https://www.dexblog.ro/">dexblog.ro</a> <p>Totul despre IT</p> </div> <nav class="footer-links" aria-label="Linkuri subsol"> <a href="https://www.dexblog.ro/">Acasă</a> <a href="https://www.dexblog.ro/invata/">Învață programare</a> </nav> </div> <div class="footer-bottom"> <p>© 2026 dexblog.ro. Toate drepturile rezervate.</p> </div> </footer> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/"},{"not":{"href_matches":["/wp-.php","/wp-admin/","/wp-content/uploads/","/wp-content/","/wp-content/plugins/","/wp-content/themes/dexblogtheme/","/\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3928528413748829" crossorigin="anonymous"></script> <script id="invata-js" src="https://www.dexblog.ro/wp-content/themes/dexblogtheme/js/invata.js?ver=1792657749"></script> </body> </html>