Komentarze w HTML

Komentarze w HTML są narzędziem, które pozwala programistom na dodawanie notatek i wyjaśnień w kodzie, nie wpływając przy tym na działanie samej strony internetowej. Są one niezbędne dla lepszego zrozumienia kodu, zarówno przez autora w przyszłości, jak i przez innych programistów, którzy mogą pracować nad projektem. W tej lekcji przyjrzymy się, jak używać komentarzy w HTML, aby poprawić czytelność i utrzymanie kodu.

Podstawowe użycie komentarzy

Komentarze w HTML są otoczone specjalnymi znacznikami <!-- i -->. Wszystko, co znajduje się pomiędzy tymi znacznikami, jest ignorowane przez przeglądarkę.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład użycia komentarzy w HTML</title>
</head>
<body>
    <!-- To jest komentarz, który nie będzie widoczny na stronie -->
    <p>Ten tekst zostanie wyświetlony na stronie.</p>
    <!-- Możesz używać komentarzy do tymczasowego wyłączenia kodu -->
    <!-- <p>Ten tekst nie zostanie wyświetlony na stronie.</p> -->
</body>
</html>

Zastosowania komentarzy

Komentarze mogą być wykorzystywane w różnych celach, takich jak:

  • Wyjaśnienie kodu: Użycie komentarzy do objaśnienia, co robi dana część kodu lub dlaczego została dodana.
  • Organizacja kodu: Komentarze mogą pomóc w organizacji kodu, dzieląc go na sekcje lub wskazując na początki i końce bloków kodu.
  • Tymczasowe wyłączanie kodu: Możesz użyć komentarzy do tymczasowego wyłączenia pewnych części kodu, które na chwilę obecną nie chcesz, aby były interpretowane przez przeglądarkę.

Przykład użycia komentarzy do wyjaśnienia kodu

W poniższym przykładzie użyto komentarzy do wyjaśnienia, dlaczego pewne style CSS zostały zastosowane do elementów strony.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wyjaśnienie kodu za pomocą komentarzy</title>
    <style>
        /* Centrowanie tekstu na stronie */
        .text-center {
            text-align: center;
        }
        /* Stylizacja kontenera flex, aby centrować elementy */
        .flex-container {
            display: flex;
            justify-content: center; /* Centruje elementy poziomo */
            align-items: center; /* Centruje elementy pionowo */
            height: 200px;
            border: 1px solid #000;
        }
        .flex-item {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="text-center">Tekst wyśrodkowany poziomo</div>
    <div class="flex-container">
        <div class="flex-item"></div>
    </div>
</body>
</html>

Podsumowanie

Komentarze w HTML są potężnym narzędziem dla programistów, pozwalającym na lepsze zrozumienie, organizację i utrzymanie kodu. Umożliwiają one dodawanie notatek i wyjaśnień bez wpływu na działanie strony, co czyni je niezwykle użytecznymi zarówno podczas początkowego tworzenia kodu, jak i jego późniejszej modyfikacji lub debugowania.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top