Header, main, footer, nav: błąd, który psuje semantykę
Mechanizm jest prosty: kontener flex tworzy kontekst formatowania flex. Dzieci takiego kontenera stają się elementami flex i tracą część właściwości blokowych. Domyślna wartość flex-direction to row, więc elementy układają się w rzędzie, a nie w kolumnie. Dodatkowo flex-shrink pozwala im się kurczyć poniżej naturalnej szerokości, a brak jawnego flex-basis sprawia, że szerokość zależy od zawartości. Dlatego akapit z długim tekstem potrafi zniknąć w wąskim pasku albo rozciągnąć się ponad miarę.<br>
<br>
<br>
<br>
Pierwsza rzecz, którą warto zapamiętać: podwójne kliknięcie otwiera plik w trybie lokalnym, a nie na serwerze. Oznacza to, że wszelkie odwołania do innych plików działają tylko wtedy, gdy ścieżki są poprawne względem położenia index.html. Jeśli przeniesiesz sam plik HTML bez folderu z obrazkami, zobaczysz pusty prostokąt zamiast grafiki. Druga rzecz: przeglądarka nie odświeży automatycznie zmian. Po zapisaniu edycji w edytorze trzeba wrócić do przeglądarki i nacisnąć klawisz odświeżania.<br>
<br>
<br>
<br>
Jak sprawdzić, czy otwarcie działa poprawnie Otwórz plik dwuklikiem i spójrz na pasek adresu. Zobaczysz ścieżkę zaczynającą się od file://, a nie od http://. To normalne. Jeśli zamiast strony pojawia się kod źródłowy albo pytanie o program do otwarcia, system nie ma przypisanej przeglądarki do plików HTML. Naprawisz to, wybierając przeglądarkę jako domyślną dla tego rozszerzenia w ustawieniach systemu. Trzecia rzecz: JavaScript i arkusze stylów dołączone z sieci nie zadziałają, jeśli nie masz połączenia. Lokalne pliki CSS i JS powinny leżeć w tym samym folderze lub w podfolderach i być podpięte poprawnymi ścieżkami relatywnymi.<br>
<br>
<br>
<br>
Praktyczna zasada jest jedna i skuteczna. Najpierw zaplanuj całość, potem zdecyduj, gdzie postawić granice. Wypisz punkty, które chcesz przekazać, a następnie pogrupuj je w bloki, które da się opisać jednym zdaniem. Jeśli bloków jest dwa lub trzy i każdy zamyka się w rozsądnej objętości, napisz osobne, samodzielne artykuły i połącz je odnośnikami. Jeśli bloków jest więcej i wynikają z siebie logicznie, zrób jeden większy materiał podzielony na sekcje. Granica między tymi rozwiązaniami nie jest sztywna — ważne, żeby czytelnik zawsze wiedział, gdzie jest i co dalej.<br>
<br>
<br>
<br>
Plik index.html to zwykły plik tekstowy z rozszerzeniem .html, który przeglądarka potrafi zinterpretować jako stronę. Gdy klikniesz go dwukrotnie, system sprawdza skojarzenie rozszerzenia i uruchamia domyślną przeglądarkę, przekazując jej ścieżkę do pliku w postaci adresu lokalnego, zaczynającego się od file://. Nie potrzebujesz do tego serwera ani internetu. Wystarczy edytor tekstu i przeglądarka.<br>
<br>
<br>
<br>
Pisanie tekstu do publikacji w sieci sprowadza się często do jednego dylematu: stworzyć zamknięty, samodzielny artykuł czy potraktować go jako sekcję większej całości, czyli część rozdziału, cyklu albo obszernego materiału. Różnica nie jest kosmetyczna. Wpływa na strukturę nagłówków, długość tekstu, sposób linkowania wewnętrznego i to, jak odbiorca trafi na treść oraz jak długo przy niej zostanie. Wybór zależy od intencji autora i od tego, czy dany temat da się domknąć w jednym tekście, czy wymaga rozwinięcia w serię powiązanych fragmentów.<br>
<br>
<br>
<br>
Flex-shrink działa tylko w osi głównej kontenera. Jeśli ustawisz flex-direction na row, kurczenie dotyczy szerokości; przy column — wysokości. Wartość 0 całkowicie blokuje zmniejszanie. Wartość większa niż 1 sprawia, że element kurczy się szybciej niż sąsiedzi, a ułamki między 0 a 1 pozwalają na łagodniejsze proporcje. Sam flex-shrink nie decyduje jednak o wszystkim — liczy się razem z flex-basis i flex-grow, dlatego pojedyncze ustawienie width bez zmiany tych parametrów często daje efekt inny od oczekiwanego.<br>
<br>
<br>
<br>
Wielu twórców stron internetowych wciąż traktuje znaczniki <br>
<br>
, <br>
<br>
, <br>
<br>
i <br>
<br>
jako zwykłe dekoracje, które można zastąpić uniwersalnym <br>
<br>
. To poważny błąd. Elementy semantyczne nie tylko porządkują kod, ale przede wszystkim przekazują informację przeglądarkom, wyszukiwarkom i technologiom asystującym, jak zbudowana jest strona. Bez nich nawigacja klawiaturą czy czytnikiem ekranu staje się koszmarem, a roboty wyszukiwarek mają trudność z rozpoznaniem najważniejszych treści.<br>
<br>
<br>
<br>
Typowe błędy przy podziale są łatwe do przewidzenia. Pierwszy to nierówne części — jedna rozdmuchana, druga zdawkowa. Drugi to przecinanie tekstu w losowym miejscu, na przykład w połowie wywodu, przez co żadna z części nie jest kompletna. Trzeci to powtarzanie tych samych informacji w kilku sekcjach, co sztucznie zwiększa objętość, ale niczego nie wnosi. Czwarty błąd dotyczy stron samodzielnych: autorzy często próbują wcisnąć w jeden tekst wszystko, co wiedzą na dany temat, i kończą z materiałem, którego nikt nie czyta do końca.<br>
<br>
<br>
<br>
Samodzielny artykuł ma jedną wyraźną zaletę: można go przeczytać od początku do końca bez zaglądania gdziekolwiek indziej. Ma własny tytuł, własne wprowadzenie i własne zakończenie. Nadaje się do tematów, które da się wyczerpać w jednym podejściu — na przykład wyjaśnienie jednego pojęcia, opis jednej metody, odpowiedź na jedno pytanie. Uwaga praktyczna: jeśli w trakcie pisania łapiesz się na tym, że wciąż dopisujesz wątki poboczne, to znak, że temat jest za szeroki na jeden tekst. Wtedy lepiej rozbić go na części, zamiast rozdymać akapit do granic czytelności.