W języku HTML tagi
, , i pełnią różne, kluczowe funkcje związane ze strukturą i prezentacją strony internetowej. Poniżej znajdziesz szczegółowe wyjaśnienie każdego z nich wraz z praktycznymi przykładami zastosowań.
Tag <h1> – nagłówek pierwszego poziomu
Tag
służy do wyznaczania najważniejszego nagłówka na stronie, takiego jak tytuł artykułu lub główny temat sekcji. Jest to element semantyczny, co oznacza, że przekazuje przeglądarkom i wyszukiwarkom informację o strukturze treści. Nagłówek
jest zwykle największy wizualnie, ale jego wygląd można dostosować za pomocą CSS.
- Przykład użycia –;
<h1>Jak działa tag H1 w HTML?</h1>
W powyższym przykładzie „Jak działa tag H1 w HTML?” będzie wyróżnionym tytułem sekcji lub całej strony.
- Znaczenie praktyczne –;
powinien występować tylko raz na główną podstronę, ponieważ jest traktowany jako nadrzędny dla całej treści. Poprawne użycie tagu H1 wpływa na pozycjonowanie strony (SEO) oraz ułatwia użytkownikom orientację na stronie.
Tag <a href=”…”> – link (odnośnik)
Tag <a> w połączeniu z atrybutem href tworzy hiperłącze, czyli odnośnik prowadzący do innej strony, pliku, maila lub sekcji na tej samej stronie.
- Przykład użycia –;
<a href="https://przykladowa-strona.pl">Odwiedź naszą stronę</a>
Po kliknięciu w tekst „Odwiedź naszą stronę”, użytkownik zostanie przeniesiony pod wskazany adres.
- Inne zastosowania –;
- odnośnik do pliku:
html <a href="dokument.pdf">Pobierz PDF</a>,
- link do sekcji na tej samej stronie:
html <a href="#kontakt">Przejdź do kontaktu</a>,
- link mailto:
html <a href="mailto:[email protected]">Napisz do nas</a>.
Tag <body> – zawartość strony
Tag <body> wyznacza główną, widoczną część strony internetowej. Wszystkie elementy, które mają być wyświetlane użytkownikom (teksty, obrazy, linki, nagłówki), umieszcza się właśnie wewnątrz <body>.
- Przykład użycia –;
<body>
<h1>Witamy na stronie!</h1>
<p>Tutaj znajdziesz najważniejsze informacje.</p>
<a href="kontakt.html">Kontakt</a>
</body>
W tym przykładzie wyświetli się nagłówek, akapit oraz link do podstrony kontaktowej.
- Znaczenie praktyczne –;
Kod znajdujący się poza tagiem (ale nie w tagu ) nie jest widoczny dla użytkownika, dlatego wszystko, co ma być częścią treści strony, powinno znajdować się wewnątrz tego znacznika.
Tag <head> – metadane dokumentu
Tag <head> służy do przechowywania metadanych strony, czyli informacji, które nie są bezpośrednio wyświetlane użytkownikom, lecz są wykorzystywane przez przeglądarki i roboty wyszukiwarek. W
umieszcza się m.in.: tytuł strony, definicje stylów, kod skryptów JavaScript, informacje o kodowaniu znaków oraz inne elementy wpływające na działanie i wyświetlanie strony.
- Przykład użycia –;
<head>
<title>Poradnik HTML – najważniejsze tagi</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="skrypt.js"></script>
</head>
W powyższym przykładzie:
definiuje tytuł wyświetlany na karcie przeglądarki,</li>
<li><meta charset="UTF-8"> określa zestaw znaków strony,</li>
<li><link rel="stylesheet" href="style.css"> dołącza zewnętrzny arkusz stylów (CSS),</li>
<li><script src="skrypt.js"></script> podłącza zewnętrzny plik z JavaScript.</li>
<li><strong>Znaczenie praktyczne</strong> –;<br />
Zawartość <head> jest niezbędna do prawidłowego działania i indeksowania strony. <strong>Tytuł strony (<title>) ma również istotny wpływ na SEO i sposób prezentowania strony w wynikach wyszukiwania.</strong>
</li>
</ul>
<h2>Przykładowa struktura dokumentu HTML z użyciem omawianych tagów</h2>
<pre><code class="html language-html">
<!DOCTYPE html>
<html>
<head>
<title>Poradnik HTML</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Najważniejsze tagi HTML</h1>
<p>Poznaj najważniejsze znaczniki wykorzystywane w języku HTML.</p>
<a href="https://przykladowa-strona.pl">Więcej informacji</a>
</body>
</html>
</code></pre>
<p>W powyższym przykładzie stworzono kompletną stronę z <strong>tytułem, nagłówkiem, tekstem i linkiem</strong>. </strong>Tag <head></strong> zawiera dane wykorzystywane przez przeglądarkę (tytuł, kodowanie znaków), zaś <strong>tag <body> – treść widoczną dla użytkownika.</strong></p>
<h2>Podsumowanie funkcji tagów</h2>
<ul>
<li><strong><h1></strong> – tytuł/nagłówek pierwszego poziomu, najważniejszy temat strony lub sekcji;</li>
<li><strong><a href=”…”></strong> – odnośnik do innej strony, pliku, e-maila lub sekcji;</li>
<li><strong><body></strong> – cała zawartość widoczna dla użytkownika;</li>
<li><strong><head></strong> – metadane strony, niewidoczne bezpośrednio na stronie, kluczowe dla działania, stylu i indeksowania.</li>
</ul>
<p><strong>Poprawne stosowanie tych tagów jest fundamentem tworzenia przejrzystych, funkcjonalnych i zgodnych ze standardami stron internetowych.</strong></p>
</div>
<section class="author-box">
<div class="author-box-avatar">
<img alt='' src='https://creativecoding.pl/wp-content/uploads/dariusz-nazar_avatar-75x75.png' srcset='https://creativecoding.pl/wp-content/uploads/dariusz-nazar_avatar-150x150.png 2x' class='avatar avatar-75 photo' height='75' width='75' decoding='async'/> </div>
<div class="author-box-meta">
<div class="h4 author-box-title">
<a href="https://creativecoding.pl/author/cc/" class="url fn n" rel="author">
Dariusz Nazar
</a>
</div>
<div class="author-box-content">
Programista i twórca serwisu Creative Coding, absolwent Politechniki Warszawskiej (WEiTI). Od 10+ lat łączy front‑end, grafikę generatywną i narzędzia dla twórców; opublikował 120+ projektów i artykułów, prowadził warsztaty dla 2 000+ uczestników. Pracuje z JavaScriptem, Three.js, P5.js i GLSL, bada wydajność i dokumentuje procesy, tworząc praktyczne przewodniki dla osób łączących kod z obrazem, dźwiękiem i interakcją. </div>
<div class="more-posts-button">
<a href="https://creativecoding.pl/author/cc/" class="bloglo-btn btn-text-1" role="button"><span>View All Posts</span></i></a>
</div>
</div><!-- END .author-box-meta -->
</section>
<section class="post-nav" role="navigation">
<h2 class="screen-reader-text">Post navigation</h2>
<div class="nav-previous"><h6 class="nav-title">Poprzedni</h6><a href="https://creativecoding.pl/jaka-jest-roznica-pomiedzy-html-a-xhtml/" rel="prev"><div class="nav-content"> <span>Jaka jest różnica pomiędzy HTML a XHTML?</span></div></a></div><div class="nav-next"><h6 class="nav-title">Następny</h6><a href="https://creativecoding.pl/co-robi-znacznik-br-w-html/" rel="next"><div class="nav-content"><span>Co robi znacznik w HTML?</span> </div></a></div>
</section>
</article><!-- #post-293 -->
<a href="#" id="bloglo-comments-toggle" class="bloglo-btn btn-large btn-fw btn-left-icon">
<svg class="bloglo-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M512 160h-96V64c0-35.3-28.7-64-64-64H64C28.7 0 0 28.7 0 64v160c0 35.3 28.7 64 64 64h32v52c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L224 288h128c35.3 0 64-28.7 64-64v-32h96c17.6 0 32 14.4 32 32v160c0 17.6-14.4 32-32 32h-64v49.6l-80.2-45.4-7.3-4.2H256c-17.6 0-32-14.4-32-32v-96l-32 18.1V384c0 35.3 28.7 64 64 64h96l108.9 61.6c2.2 1.6 4.7 2.4 7.1 2.4 6.2 0 12-4.9 12-12v-52h32c35.3 0 64-28.7 64-64V224c0-35.3-28.7-64-64-64zm-128 64c0 17.6-14.4 32-32 32H215.6l-7.3 4.2-80.3 45.4V256H64c-17.6 0-32-14.4-32-32V64c0-17.6 14.4-32 32-32h288c17.6 0 32 14.4 32 32v160z" /></svg> <span>Zostaw komentarz</span>
</a>
<section id="comments" class="comments-area">
<div class="comments-title-wrapper center-text">
<h3 class="comments-title">
Komentarze </h3><!-- END .comments-title -->
<p class="no-comments">Brak komentarzy. Dlaczego nie rozpoczniesz dyskusji?</p>
</div>
<ol class="comment-list">
</ol>
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">Dodaj komentarz <small><a rel="nofollow" id="cancel-comment-reply-link" href="/co-oznaczaja-w-jezyku-html-tagi-h1-a-href-body-head/#respond" style="display:none;">Anuluj pisanie odpowiedzi</a></small></h3><form action="https://creativecoding.pl/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Twój adres e-mail nie zostanie opublikowany.</span> <span class="required-field-message">Wymagane pola są oznaczone <span class="required">*</span></span></p><p class="comment-textarea"><textarea name="comment" id="comment" cols="44" rows="8" class="textarea-comment" placeholder="Napsiz komentarz…" required="required"></textarea></p><p class="comment-form-author"><label for="author">Nazwa <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" /></p>
<p class="comment-form-email"><label for="email">Adres e-mail <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p>
<p class="comment-form-url"><label for="url">Witryna internetowa</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" autocomplete="url" /></p>
<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Zapamiętaj moje dane w tej przeglądarce podczas pisania kolejnych komentarzy.</label></p>
<p class="form-submit"><span class="bloglo-submit-form-button"><input name="submit" type="submit" id="comment-submit" class="bloglo-btn primary-button" value="Dodaj komentarz" /></span> <input type='hidden' name='comment_post_ID' value='293' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p></form> </div><!-- #respond -->
</section><!-- #comments -->
</main><!-- #content .site-content -->
</div><!-- #primary .content-area -->
<aside id="secondary" class="widget-area bloglo-sidebar-container" role="complementary">
<div class="bloglo-sidebar-inner">
<div id="block-8" class="bloglo-sidebar-widget bloglo-widget bloglo-entry widget widget_block widget_media_image"><div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://strefakursow.pl/jezyki_programowania.html?ref=28082" target="_blank" rel=" noreferrer noopener nofollow"><img loading="lazy" decoding="async" width="336" height="280" src="https://creativecoding.pl/wp-content/uploads/opanuj-programowanie.png" alt="Oglądaj, słuchaj, ćwicz - zdobywaj nowe umiejętności online" class="wp-image-489" srcset="https://creativecoding.pl/wp-content/uploads/opanuj-programowanie.png 336w, https://creativecoding.pl/wp-content/uploads/opanuj-programowanie-300x250.png 300w" sizes="auto, (max-width: 336px) 100vw, 336px" /></a></figure>
</div></div><div id="block-7" class="bloglo-sidebar-widget bloglo-widget bloglo-entry widget widget_block widget_recent_entries"><ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="https://creativecoding.pl/testowanie-kodu-javascript-wprowadzenie-do-unit-testing-i-narzedzi-jest/">Testowanie kodu JavaScript – wprowadzenie do Unit Testing i narzędzi Jest</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://creativecoding.pl/najpopularniejsze-frameworki-javascript-react-angular-i-vue/">Najpopularniejsze frameworki JavaScript – React, Angular i Vue</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://creativecoding.pl/komunikacja-z-api-w-javascript-ajax-xml-i-nowoczesne-metody/">Komunikacja z API w JavaScript – AJAX, XML i nowoczesne metody</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://creativecoding.pl/programowanie-w-python-czym-jest-i-jak-dziala/">Czym jest Python?</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://creativecoding.pl/this-w-javascript-jak-dziala-kontekst-wywolania-funkcji/">This w JavaScript – jak działa kontekst wywołania funkcji?</a></li>
</ul></div>
</div>
</aside><!--#secondary .widget-area -->
</div><!-- END .bloglo-container -->
<div id="pyml" >
<div class="bloglo-pyml-slider">
<div class="bloglo-pyml-container bloglo-container">
<div class="bloglo-flex-row">
<div class="col-xs-12">
<div class="pyml-slider-items">
<div class="h4 widget-title">
<span>Przeczytaj koniecznie</span>
</div>
<div class="bloglo-flex-row gy-4">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="pyml-slide-item">
<div class="pyml-slider-backgrounds">
<a href="https://creativecoding.pl/testowanie-kodu-javascript-wprowadzenie-do-unit-testing-i-narzedzi-jest/">
<div class="pyml-slide-bg"> </div>
</a>
<div class="post-category">
<span class="cat-links"><span class="screen-reader-text">Posted in</span><span><a href="https://creativecoding.pl/kategoria/javascript/" rel="category">JavaScript</a></span></span> </div>
</div><!-- END .pyml-slider-items -->
<div class="slide-inner">
<h6><a href="https://creativecoding.pl/testowanie-kodu-javascript-wprowadzenie-do-unit-testing-i-narzedzi-jest/">Testowanie kodu JavaScript – wprowadzenie do Unit Testing i narzędzi Jest</a></h6>
<div class="entry-meta">
<div class="entry-meta-elements">
<span class="post-author">
<span class="posted-by vcard author">
<span class="screen-reader-text">Posted by</span>
<span class="author-avatar">
<img alt='' src='https://creativecoding.pl/wp-content/uploads/dariusz-nazar_avatar-30x30.png' class='avatar avatar-30 photo' height='30' width='30' loading='lazy' /> </span>
<span>
By <a class="url fn n" title="View all posts by Dariusz Nazar" href="https://creativecoding.pl/author/cc/" rel="author">
<span class="author-name">
Dariusz Nazar </span>
</a>
</span>
</span>
</span>
<span class="posted-on"><time class="entry-date published updated" datetime="2026-03-08T08:18:00+01:00">2026-03-08</time></span> </div>
</div><!-- END .entry-meta -->
</div><!-- END .slide-inner -->
</div><!-- END .pyml-slide-item -->
</div><!-- END .pyml-slider-item-wrapper -->
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="pyml-slide-item">
<div class="pyml-slider-backgrounds">
<a href="https://creativecoding.pl/najpopularniejsze-frameworki-javascript-react-angular-i-vue/">
<div class="pyml-slide-bg"> </div>
</a>
<div class="post-category">
<span class="cat-links"><span class="screen-reader-text">Posted in</span><span><a href="https://creativecoding.pl/kategoria/javascript/" rel="category">JavaScript</a></span></span> </div>
</div><!-- END .pyml-slider-items -->
<div class="slide-inner">
<h6><a href="https://creativecoding.pl/najpopularniejsze-frameworki-javascript-react-angular-i-vue/">Najpopularniejsze frameworki JavaScript – React, Angular i Vue</a></h6>
<div class="entry-meta">
<div class="entry-meta-elements">
<span class="post-author">
<span class="posted-by vcard author">
<span class="screen-reader-text">Posted by</span>
<span class="author-avatar">
<img alt='' src='https://creativecoding.pl/wp-content/uploads/dariusz-nazar_avatar-30x30.png' class='avatar avatar-30 photo' height='30' width='30' loading='lazy' /> </span>
<span>
By <a class="url fn n" title="View all posts by Dariusz Nazar" href="https://creativecoding.pl/author/cc/" rel="author">
<span class="author-name">
Dariusz Nazar </span>
</a>
</span>
</span>
</span>
<span class="posted-on"><time class="entry-date published updated" datetime="2026-03-01T10:11:00+01:00">2026-03-01</time></span> </div>
</div><!-- END .entry-meta -->
</div><!-- END .slide-inner -->
</div><!-- END .pyml-slide-item -->
</div><!-- END .pyml-slider-item-wrapper -->
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="pyml-slide-item">
<div class="pyml-slider-backgrounds">
<a href="https://creativecoding.pl/komunikacja-z-api-w-javascript-ajax-xml-i-nowoczesne-metody/">
<div class="pyml-slide-bg"> </div>
</a>
<div class="post-category">
<span class="cat-links"><span class="screen-reader-text">Posted in</span><span><a href="https://creativecoding.pl/kategoria/javascript/" rel="category">JavaScript</a></span></span> </div>
</div><!-- END .pyml-slider-items -->
<div class="slide-inner">
<h6><a href="https://creativecoding.pl/komunikacja-z-api-w-javascript-ajax-xml-i-nowoczesne-metody/">Komunikacja z API w JavaScript – AJAX, XML i nowoczesne metody</a></h6>
<div class="entry-meta">
<div class="entry-meta-elements">
<span class="post-author">
<span class="posted-by vcard author">
<span class="screen-reader-text">Posted by</span>
<span class="author-avatar">
<img alt='' src='https://creativecoding.pl/wp-content/uploads/dariusz-nazar_avatar-30x30.png' class='avatar avatar-30 photo' height='30' width='30' loading='lazy' /> </span>
<span>
By <a class="url fn n" title="View all posts by Dariusz Nazar" href="https://creativecoding.pl/author/cc/" rel="author">
<span class="author-name">
Dariusz Nazar </span>
</a>
</span>
</span>
</span>
<span class="posted-on"><time class="entry-date published updated" datetime="2026-02-21T17:52:00+01:00">2026-02-21</time></span> </div>
</div><!-- END .entry-meta -->
</div><!-- END .slide-inner -->
</div><!-- END .pyml-slide-item -->
</div><!-- END .pyml-slider-item-wrapper -->
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="pyml-slide-item">
<div class="pyml-slider-backgrounds">
<a href="https://creativecoding.pl/programowanie-w-python-czym-jest-i-jak-dziala/">
<div class="pyml-slide-bg"> </div>
</a>
<div class="post-category">
<span class="cat-links"><span class="screen-reader-text">Posted in</span><span><a href="https://creativecoding.pl/kategoria/python/" rel="category">Python</a></span></span> </div>
</div><!-- END .pyml-slider-items -->
<div class="slide-inner">
<h6><a href="https://creativecoding.pl/programowanie-w-python-czym-jest-i-jak-dziala/">Czym jest Python?</a></h6>
<div class="entry-meta">
<div class="entry-meta-elements">
<span class="post-author">
<span class="posted-by vcard author">
<span class="screen-reader-text">Posted by</span>
<span class="author-avatar">
<img alt='' src='https://creativecoding.pl/wp-content/uploads/dariusz-nazar_avatar-30x30.png' class='avatar avatar-30 photo' height='30' width='30' loading='lazy' /> </span>
<span>
By <a class="url fn n" title="View all posts by Dariusz Nazar" href="https://creativecoding.pl/author/cc/" rel="author">
<span class="author-name">
Dariusz Nazar </span>
</a>
</span>
</span>
</span>
<span class="posted-on"><time class="entry-date published updated" datetime="2026-02-20T17:03:00+01:00">2026-02-20</time></span> </div>
</div><!-- END .entry-meta -->
</div><!-- END .slide-inner -->
</div><!-- END .pyml-slide-item -->
</div><!-- END .pyml-slider-item-wrapper -->
</div>
</div>
</div>
</div><!-- END .pyml-slider-items -->
</div>
</div><!-- END .bloglo-pyml-slider -->
</div><!-- END #pyml -->
</div><!-- #main .site-main -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div id="bloglo-copyright" class="fw-separator">
<div class="bloglo-container">
<div class="bloglo-flex-row">
<div class="col-xs-12 center-xs col-md flex-basis-auto start-md"><div class="bloglo-copyright-widget__text bloglo-copyright-widget bloglo-all"><span>Copyright 2026 — Creative Coding. Wszelkie prawa zastrzeżone.</span></div><!-- END .bloglo-copyright-widget --></div>
<div class="col-xs-12 center-xs col-md flex-basis-auto end-md"></div>
</div><!-- END .bloglo-flex-row -->
</div>
</div><!-- END #bloglo-copyright -->
</footer><!-- #colophon .site-footer -->
</div><!-- END #page -->
<a href="#" id="bloglo-scroll-top" class="bloglo-smooth-scroll" title="Scroll to Top" >
<span class="bloglo-scroll-icon" aria-hidden="true">
<svg class="bloglo-icon top-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M24.958 18.491l-8.008-8.008a1.29 1.29 0 00-1.868 0l-8.008 8.008c-.534.534-.534 1.335 0 1.868s1.335.534 1.868 0l7.074-7.074 7.074 7.074c.267.267.667.4.934.4s.667-.133.934-.4a1.29 1.29 0 000-1.868z" /></svg> <svg class="bloglo-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M24.958 18.491l-8.008-8.008a1.29 1.29 0 00-1.868 0l-8.008 8.008c-.534.534-.534 1.335 0 1.868s1.335.534 1.868 0l7.074-7.074 7.074 7.074c.267.267.667.4.934.4s.667-.133.934-.4a1.29 1.29 0 000-1.868z" /></svg> </span>
<span class="screen-reader-text">Scroll to Top</span>
</a><!-- END #bloglo-scroll-to-top -->
<div id="bloglo-cursor-dot" class="bloglo-cursor bloglo-js-cursor">
<div class="bloglo-cursor-wrapper">
<div class="bloglo-cursor--follower bloglo-js-follower"></div>
<div class="bloglo-cursor--label bloglo-js-label"></div>
<div class="bloglo-cursor--icon bloglo-js-icon"></div>
</div>
</div><!-- END #bloglo-cursor-dot -->
<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/blogvi/*","/wp-content/themes/bloglo/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script>
! function() {
var e = -1 < navigator.userAgent.toLowerCase().indexOf("webkit"),
t = -1 < navigator.userAgent.toLowerCase().indexOf("opera"),
n = -1 < navigator.userAgent.toLowerCase().indexOf("msie");
(e || t || n) && document.getElementById && window.addEventListener && window.addEventListener("hashchange", function() {
var e, t = location.hash.substring(1);
/^[A-z0-9_-]+$/.test(t) && (e = document.getElementById(t)) && (/^(?:a|select|input|button|textarea)$/i.test(e.tagName) || (e.tabIndex = -1), e.focus())
}, !1)
}();
</script>
<script src="https://creativecoding.pl/wp-includes/js/comment-reply.min.js?ver=6.9.4" id="comment-reply-js" async data-wp-strategy="async" fetchpriority="low"></script>
<script src="https://creativecoding.pl/wp-includes/js/imagesloaded.min.js?ver=5.0.0" id="imagesloaded-js"></script>
<script id="bloglo-js-extra">
var bloglo_vars = {"ajaxurl":"https://creativecoding.pl/wp-admin/admin-ajax.php","nonce":"d31831cb7a","responsive-breakpoint":"1024","sticky-header":{"enabled":false,"hide_on":[""]},"dark_mode":"","strings":{"comments_toggle_show":"Zostaw komentarz","comments_toggle_hide":"Hide Comments"}};
//# sourceURL=bloglo-js-extra
</script>
<script src="https://creativecoding.pl/wp-content/themes/bloglo/assets/js/bloglo.min.js?ver=1.1.23" id="bloglo-js"></script>
<script id="wp-emoji-settings" type="application/json">
{"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://creativecoding.pl/wp-includes/js/wp-emoji-release.min.js?ver=6.9.4"}}
</script>
<script type="module">
/*! This file is auto-generated */
const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))});
//# sourceURL=https://creativecoding.pl/wp-includes/js/wp-emoji-loader.min.js
</script>
</body>
</html>
jest zwykle największy wizualnie, ale jego wygląd można dostosować za pomocą CSS.
- Przykład użycia –;
<h1>Jak działa tag H1 w HTML?</h1>
<h1>Jak działa tag H1 w HTML?</h1>
powinien występować tylko raz na główną podstronę, ponieważ jest traktowany jako nadrzędny dla całej treści. Poprawne użycie tagu H1 wpływa na pozycjonowanie strony (SEO) oraz ułatwia użytkownikom orientację na stronie.
<a href="https://przykladowa-strona.pl">Odwiedź naszą stronę</a>
html <a href="dokument.pdf">Pobierz PDF</a>,html <a href="#kontakt">Przejdź do kontaktu</a>,html <a href="mailto:[email protected]">Napisz do nas</a>.
<body>
<h1>Witamy na stronie!</h1>
<p>Tutaj znajdziesz najważniejsze informacje.</p>
<a href="kontakt.html">Kontakt</a>
</body>
Kod znajdujący się poza tagiem (ale nie w tagu ) nie jest widoczny dla użytkownika, dlatego wszystko, co ma być częścią treści strony, powinno znajdować się wewnątrz tego znacznika.
<head>
<title>Poradnik HTML – najważniejsze tagi</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="skrypt.js"></script>
</head>