4 lis 2025

HTML template

Uniwersalny template

<!DOCTYPE html>
<html lang="pl">
<head>
  <title>your_title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <meta name="title" content="your_title">
  <meta name="description" content="your_description">
  <meta name="keywords" content="your_keywords">
  <meta name="robots" content="index, follow">
  <meta name="language" content="Polish">
  <meta name="author" content="Karol Skolasiński">
  <meta name="copyright" content="Karol Skolasiński">

  <meta property="og:title" content="your_og_title">
  <meta property="og:description" content="your_og_title">
  <meta property="og:type" content="website">
  <meta property="og:image" content="og-image.webp">
  <meta property="og:image:type" content="image/webp">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:url" content="https://www.your_site.pl">
  <meta property="og:locale" content="pl_PL">
  <meta property="og:site_name" content="your_site_name">

  <!--STYLES-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;900&display=swap">
  <link rel="icon" type="image/x-icon" href="./favicon.ico">
  <link rel="stylesheet" href="./style.css">

  <!--SCRIPTS-->
  <script type="module"
    src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/shoelace.js">
  </script>
  <script src="/static/js/script.js"></script>
</head>

<body>
  <header>
    <nav>NAV</nav>
  </header>

  <main>
    <aside>ASIDE</aside>

    <section>SECTION</section>
  </main>

  <footer>FOOTER</footer>
</body>
</html>

Meta tags

<!DOCTYPE html> - dokument w formacie HTML5. element ten określa typ bieżącego dokumentu: DTD (Document Type Definition). Konieczne jest, aby przeglądarka rozumiała, według jakiego standardu HTML ma wyświetlać stronę internetową. Jak widać, jest to jeden z tagów, które nie są sparowane. Czy używać lower case czy capitalize? Nie ma to znaczenia (źródło). In other words is case-insensitively (źródło).
<html> - znacznik wskazuje, że jest to dokument HTML
lang=“pl” - używany przez stronę język
<head> - znacznik jest przeznaczony do przechowywania elementów, które pomagają przeglądarkom i wyszukiwarkom w pracy z danymi
charset=“UTF-8” - zestaw znaków używany na stronie, sposób kodowania znaków (zapis index.html bez BOM). Jeśli atrybut nie zostanie określony, niektóre przeglądarki mogą wyświetlać niejasne znaki zamiast tekstu
name=“description” - opis strony w wyszukiwarce (150 - 160 znaków)
name=“keywords” - słowa kluczowe
http-equiv=“X-UA-Compatible” content=“IE=edge” - prawidłowe wyświetlanie w przeglądarkach IE (źródło)
dołączając skrypty w HTML4, musieliśmy im ustawiać atrybut type=“text/javascript”. W nowym HTML atrybut ten domyślnie ma taką wartość więc nie musimy go podawać.

Open graph

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

og:url The canonical URL of your object that will be used as its permanent ID in the graph

Źródła:

https://ogp.me/

https://lumo.pl/blog/open-graph/

Semantic HTML

A semantic element clearly describes its meaning to both the browser and the developer.

Źródło:

https://internetingishard.netlify.app/html-and-css/semantic-html/index.html#summary