Co można wstawić na stronę HTML?

Na stronie HTML można umieszczać bardzo różnorodne elementy — od prostych tekstów i nagłówków po zaawansowane multimedia, formularze i interaktywne komponenty. Poniżej znajdziesz szczegółowy przewodnik na temat tego, co dokładnie można wstawić do dokumentu HTML — wraz z praktycznymi przykładami zastosowań i kodu.

Podstawowe elementy HTML

• Tekst i nagłówki –
  Pozwalają na strukturyzację zawartości;
  Przykład:

<h1>Tytuł strony</h1>
<p>To jest akapit tekstu na stronie.</p>

• Listy uporządkowane i nieuporządkowane –
  Pomagają w prezentowaniu zbiorów informacji;
  Przykład:

<ul>
   <li>Pierwszy punkt</li>
   <li>Drugi punkt</li>
</ul>
<ol>
   <li>Pierwszy krok</li>
   <li>Drugi krok</li>
</ol>

• Obrazy –
  Dodają atrakcyjności wizualnej i ilustrują treść;
  Przykład:

<img src="przyklad.jpg" alt="Opis obrazu">

• Linki (hiperłącza) –
  Umożliwiają nawigowanie po stronie lub do innych zasobów;
  Przykład:

<a href="https://twojastrona.pl">Odwiedź nas</a>

Zaawansowane elementy HTML

• Multimedia (audio i wideo) –
  Pozwalają osadzić materiał dźwiękowy i filmowy;
  Przykład:

<audio controls>
   <source src="muzyka.mp3" type="audio/mpeg">
   Twoja przeglądarka nie obsługuje odtwarzacza audio.
</audio>
<video controls width="320" height="240">
   <source src="film.mp4" type="video/mp4">
   Twoja przeglądarka nie obsługuje odtwarzacza wideo.
</video>

• Tabele –
  Służą do przedstawiania danych w uporządkowany sposób;
  Przykład:

<table>
   <tr>
      <th>Imię</th>
      <th>Nazwisko</th>
   </tr>
   <tr>
      <td>Jan</td>
      <td>Kowalski</td>
   </tr>
</table>

• Formularze –
  Pozwalają użytkownikowi wprowadzać dane, np. do wysyłki wiadomości;
  Przykład:

<form>
   <label for="imie">Imię:</label>
   <input type="text" id="imie" name="imie">
   <input type="submit" value="Wyślij">
</form>

Elementy kontenerowe i strukturalne

• Sekcje, nagłówki, stopki –
  Porządkują strukturę strony;
  Przykład:

<header>
   <h1>Nagłówek strony</h1>
</header>
<section>
   <h2>Sekcja główna</h2>
   <p>Opis sekcji</p>
</section>
<footer>
   <p>Prawa autorskie &copy; 2025</p>
</footer>

• Div i span –
  Kontenery ogólnego przeznaczenia do grupowania i stylizacji elementów;
  Przykład:

<div class="blok">
   <span class="wyróżniony">Tekst wyróżniony</span>
</div>

Osadzanie zewnętrznych skryptów i styli

• Style CSS –
  Można dodać bezpośrednio do HTML lub przez zewnętrzny plik, aby zmieniać wygląd elementów;
  Przykład:

<style>
   body { background: #f1f1f1; }
   h1 { color: #003366; }
</style>

• Skrypty JavaScript –
  Pozwalają na dodawanie interaktywności, np. walidacja formularzy, animacje;
  Przykład:

<script>
   alert("Witamy na stronie!");
</script>

Dane strukturalne i mikroformaty

Elementy pozwalające dodać dane Schema.org lub mikroformaty, które ułatwiają wyszukiwarkom rozumienie zawartości strony. Przykład użycia danych strukturalnych:

<div itemscope itemtype="http://schema.org/Person">
   <span itemprop="name">Anna Nowak</span>
</div>

Osadzanie innych stron i serwisów

• Iframe –
  Umożliwia wstawianie zawartości innych stron (np. Map Google, filmy YouTube);
  Przykład:

<iframe src="https://www.youtube.com/embed/przyklad" width="560" height="315"></iframe>

Elementy puste i specjalne

• Linia pozioma i znacznik przerwy –
  Tworzą odstępy lub oddzielają sekcje wizualnie;
  Przykład:

<hr>
<br>

Podsumowanie – co można wstawić na stronę HTML

• tekst, nagłówki, akapity,
• listy i tabele,
• obrazy, multimedia (audio, video),
• formularze i interaktywne komponenty,
• linki, przyciski i elementy nawigacji,
• style CSS i skrypty JavaScript,
• dane strukturalne (Schema.org, mikroformaty),
• osadzone zewnętrzne zasoby (iframe),
• kontenery i sekcje układu strony,
• elementy specjalne (np. <hr>, <br>).

Stosując powyższe elementy, możesz tworzyć zarówno proste strony wizytówki, jak i zaawansowane, interaktywne serwisy internetowe z rozbudowaną funkcjonalnością i nowoczesnym wyglądem. Każdy rodzaj elementu HTML pozwala rozwijać witrynę i dostosowywać ją do potrzeb użytkownika.