HTML dla .NET Developera — Czym Jest i Jak Działa w Kontekście ASP.NET Core

Kąt widzenia: HTML nie jako temat dla początkujących, ale jako warstwa wyjściowa Twojego backendu .NET — co przeglądarka dostaje od Twojego serwera i co z tym robi
Przykład przewodni: co dzieje się między żądaniem HTTP a stroną widoczną w przeglądarce

Dlaczego .NET developer musi rozumieć HTML

Jeśli piszesz Razor Pages, MVC Views albo Blazor Server — Twój backend produkuje HTML. To nie jest coś, co robi “ktoś inny od frontendu”. Każdy return View(), każdy @Model.ProductName w .cshtml — to wszystko tłumaczy się na HTML wysłany do przeglądarki.

Żeby pisać poprawne Razor Pages, musisz wiedzieć co piszesz. Żeby zrozumieć błędy renderowania — musisz rozumieć jak przeglądarka interpretuje to, co dostała. Żeby pisać dostępne formularze z walidacją — musisz wiedzieć jakie atrybuty HTML mają znaczenie.

HTML nie jest domeną front-endowców. Jest częścią kontraktu między Twoim .NET backendem a przeglądarką.

Co robi Twój serwer ASP.NET Core

Kiedy przeglądarka wysyła żądanie GET /products, Twój kontroler lub Razor Page:

1. Pobiera dane (EF Core, repozytorium)
2. Przekazuje je do widoku (.cshtml)
3. Razor Engine przetwarza plik — zastępuje @Model.Xxx prawdziwymi wartościami
4. Wynik to czysty HTML — string — wysłany w odpowiedzi HTTP z nagłówkiem Content-Type: text/html

Przeglądarka dostaje ten string. Nie widzi C#. Nie widzi Razor. Widzi tylko HTML.

// ASP.NET Core MVC — co robi return View(products)?
[HttpGet]
public async Task<IActionResult> Index()
{
    var products = await _repository.GetAllAsync();
    return View(products); // ← Razor Engine przetwarza Index.cshtml z modelem products
}

<!-- Views/Products/Index.cshtml — po przetworzeniu przez Razor Engine -->
<!-- @foreach (var p in Model) staje się: -->

<div class="product-card">
    <h2>Klawiatura mechaniczna</h2>
    <span class="price">299,00 zł</span>
    <a href="/products/42">Szczegóły</a>
</div>
<div class="product-card">
    <h2>Monitor 27"</h2>
    <span class="price">1 299,00 zł</span>
    <a href="/products/43">Szczegóły</a>
</div>

To jest to, co dostaje przeglądarka. Czysty HTML — zero C#, zero Razor.

Czym jest HTML

HTML (HyperText Markup Language) to język opisujący strukturę i treść dokumentu. Nie jest językiem programowania — nie ma pętli, zmiennych ani logiki (te rzeczy daje JavaScript lub Razor po stronie serwera).

HTML opisuje co jest na stronie — nagłówek, akapit, lista, formularz, obraz. CSS opisuje jak to wygląda. JavaScript opisuje jak się zachowuje. Trzy warstwy, trzy różne technologie.

Plik HTML to zwykły plik tekstowy z rozszerzeniem .html. Przeglądarka go parsuje i renderuje na ekranie.

Krótka historia — dlaczego HTML nie jest jak XML

Jeśli znasz XML (i jako .NET developer prawdopodobnie znasz — LINQ to XML, SOAP, konfiguracje), możesz zakładać że HTML działa podobnie. Nie działa.

HTML powstał wcześniej niż XML i ma kilka istotnych różnic:

• Nie rozróżnia wielkości liter — <DIV> to to samo co <div> (konwencja: małe litery)
• Toleruje błędy — przeglądarka naprawi brakujący tag zamykający zamiast rzucić wyjątek
• Nie wszystkie elementy wymagają zamknięcia — <img>, <input>, <br> nigdy nie mają treści
• Niektóre elementy nie mogą być samozamykające — <script></script> zamiast <script/>

XML jest ścisły i determinityczny. HTML jest tolerancyjny i historycznie obciążony decyzjami z lat 90. Razem tworzą XHTML (HTML zgodny z regułami XML) — ale to osobny temat.

Document Object Model (DOM)

Przeglądarka parsuje HTML i tworzy z niego drzewo obiektów — DOM (Document Object Model). To nie jest string — to żywa hierarchia obiektów w pamięci przeglądarki, z którą możesz wchodzić w interakcje przez JavaScript.

Document
└── html
    ├── head
    │   ├── title ("Sklep")
    │   └── meta (charset="UTF-8")
    └── body
        ├── header
        │   └── nav
        │       └── ul
        │           ├── li → a ("Produkty")
        │           └── li → a ("Koszyk")
        ├── main
        │   └── div.product-card
        │       ├── h2 ("Klawiatura")
        │       └── span.price ("299 zł")
        └── footer
            └── p ("© 2026")

Każdy węzeł w tym drzewie to obiekt z właściwościami i metodami. JavaScript może: dodawać węzły, usuwać je, zmieniać atrybuty, reagować na kliknięcia. To jest mechanizm interaktywności w przeglądarce.

Dla .NET developera: Blazor WebAssembly manipuluje tym samym DOM — tylko zamiast JavaScriptu używa skompilowanego kodu C# uruchamianego w WebAssembly. Mechanizm jest ten sam.

HTML a Razor Pages — co Razor dodaje do HTML

Pliki .cshtml to HTML z wplecioną składnią Razor. Razor Engine przetwarza je po stronie serwera. Przeglądarka nigdy nie widzi Razor.

<!-- Products/Index.cshtml — co pisze developer -->
@model IEnumerable<Product>

<!DOCTYPE html>
<html lang="pl">
<head>
    <title>Produkty — Sklep</title>
</head>
<body>
    <h1>Nasze produkty</h1>
    
    @foreach (var product in Model)
    {
        <div class="product-card" data-id="@product.Id">
            <h2>@product.Name</h2>
            <span class="price">@product.Price.ToString("C2")</span>
            @if (product.IsOnSale)
            {
                <span class="badge">PROMOCJA</span>
            }
        </div>
    }
</body>
</html>

<!-- Co dostaje przeglądarka — czyste HTML -->
<!DOCTYPE html>
<html lang="pl">
<head>
    <title>Produkty — Sklep</title>
</head>
<body>
    <h1>Nasze produkty</h1>
    
    <div class="product-card" data-id="42">
        <h2>Klawiatura mechaniczna</h2>
        <span class="price">299,00 zł</span>
        <span class="badge">PROMOCJA</span>
    </div>
    <div class="product-card" data-id="43">
        <h2>Monitor 27"</h2>
        <span class="price">1 299,00 zł</span>
    </div>
</body>
</html>

@foreach, @if, @product.Name — to Razor. <div>, <h2>, <span>, atrybuty class i data-id — to HTML, który Razor wstawia do wyjścia.

Jak przeglądarka przetwarza HTML

Przepływ po odebraniu odpowiedzi HTTP:

1. Parsing — przeglądarka czyta HTML bajt po bajcie i buduje DOM
2. Zasoby — gdy trafia na <link> do CSS lub <script> — pobiera je (potencjalnie blokując renderowanie)
3. Style — CSS jest nakładany na DOM → powstaje CSSOM (CSS Object Model)
4. Layout — przeglądarka oblicza rozmiary i pozycje elementów (reflow)
5. Paint — rysuje piksele na ekranie
6. JavaScript — modyfikuje DOM → może spowodować ponowny layout i paint

To jest powód, dla którego <script> zwykle umieszcza się na końcu <body> lub z atrybutem defer — żeby nie blokować renderowania. To nie jest arbitralna konwencja — to wynik tego, jak działa przeglądarka.

HTML w kontekście różnych podejść .NET

Rozumienie HTML jest kluczowe w trzech pierwszych scenariuszach. W czwartym — odpowiedzialność leży po stronie front-end developera, ale API developer nadal musi rozumieć, co klient wyśle (formularze, nagłówki HTTP).

Podsumowanie

HTML to nie osobny świat dla front-endowców — to warstwa wyjściowa Twojego .NET backendu. Razor Pages i MVC Views produkują HTML. Blazor manipuluje DOM przez C#. Przeglądarka pracuje tylko z HTML, CSS i JavaScript — C# nigdy nie trafia do klienta.

DOM to drzewo obiektów powstałe z HTML — żywa struktura, którą JavaScript (i Blazor WebAssembly) modyfikuje w czasie rzeczywistym. Rozumienie tego modelu jest podstawą świadomego pisania widoków w .NET.

Następny post: Anatomia znacznika HTML — składnia, atrybuty i DOM — jak dokładnie wyglądają elementy HTML, co to są atrybuty, czym różnią się tagi void od zwykłych i jak czytać HTML w DevTools przeglądarki.