Co się stanie, gdy section i article zamienią się miejscami

Najwięcej problemów pojawia się, gdy mieszasz typy bez świadomości konsekwencji. Element block wewnątrz inline jest niepoprawny semantycznie i przeglądarka może go naprawiać po swojemu. Z kolei display: inline-block na rodzicu nie sprawi, że dzieci będą w jednej linii — to zależy od ich własnego display. Jeśli elementy mają tworzyć siatkę, lepiej użyć flex lub grid niż walczyć z inline-block i whitespace. Do prostych przypadków — pojedynczy przycisk obok tekstu, ikona z podpisem — inline-block wciąż jest najszybszym rozwiązaniem.

Siatka kart zwykle zaczyna się od pytania: ile kolumn na jakim ekranie? Potem pojawiają się media query dla trzech, czterech, pięciu szerokości, a i tak przy dziwnej szerokości okna coś się rozjeżdża. Można to rozwiązać inaczej — za pomocą trzech właściwości CSS: repeat(), minmax() i auto-fill. Kontener sam decyduje, ile kart zmieści się w wierszu, a ty nie piszesz ani jednego zapytania o media.

Uważaj też na sytuację odwrotną: w . Jest poprawna, gdy tematy naprawdę się rozdzielają, ale gdy tworzysz kilka poziomów tylko po to, by dopasować się do wyglądu, lepszym rozwiązaniem jest . Pamiętaj, że znaczniki niosą informację dla czytników ekranu i robotów indeksujących; nadmiar sekcji bez nagłówków tę informację zaburza.

Warto najpierw sprawdzić, czy to naprawdę wina białych znaków. Otwórz narzędzia deweloperskie, zaznacz element i obejrzyj jego pole. Jeśli odstęp nie ma koloru marginesu ani paddingu, a mimo to istnieje, sprawa jest jasna. Pomaga też szybki test: ustaw oba elementy dokładnie obok siebie w kodzie, bez żadnego znaku między znacznikami, i odśwież podgląd. Gdy przerwa zniknie, masz potwierdzenie.

Kolejna opcja to ujemny margines dopasowany do szerokości spacji. To rozwiązanie kruche — wartość zależy od użytego fontu i rozmiaru tekstu, więc przy zmianie kroju pisma odstęp wróci albo elementy zaczną się nachodzić. Jeśli zależy ci na trwałym efekcie, rozważ rezygnację z inline-block na rzecz flexboxa. Kontener z display: flex układa dzieci w rzędzie bez żadnych przerw, a odstępy ustawiasz świadomie przez gap. To obecnie najczystsze podejście i nie wymaga żadnych sztuczek z białymi znakami.

Zanim dwuklik zadziała, sprawdź, czy plik naprawdę nazywa się index.html, a nie index.html.txt. Systemy często ukrywają rozszerzenia znane, więc w edytorze tekstu zapiszesz „index.html", a otrzymasz „index.html.txt". Wtedy dwuklik otworzy notatnik albo edytor, nie przeglądarkę. Włącz wyświetlanie rozszerzeń w opcjach folderów i popraw nazwę. Druga pułapka to brak przypisania: jeśli .html nie jest skojarzone z żadną przeglądarką, system zapyta, czym otworzyć plik — wybierz przeglądarkę i zaznacz opcję stałego przypisania.

Co działa, a co nie działa z pliku lokalnego Strona otwarta przez file:// może wyświetlać tekst, obrazy, style CSS i skrypty JavaScript, jeśli leżą w tym samym folderze i są podlinkowane ścieżkami względnymi. Nie zadziałają natomiast mechanizmy wymagające serwera: pobieranie danych z zewnętrznych adresów przez zapytania sieciowe, moduły JavaScript ładowane z plików lokalnych w niektórych przeglądarkach, pliki cookie w pełnym zakresie czy odwołania do ścieżek zaczynających się od ukośnika. Jeśli strona korzysta z takich funkcji, dwuklik nie wystarczy — potrzebny będzie lokalny serwer uruchamiany z katalogu projektu.

Zasada praktyczna jest jedna: najpierw pytasz, czy dany fragment ma sens samodzielnie, poza kontekstem. Jeśli tak — to . Jeśli nie, a jedynie grupuje treść wokół wspólnego tematu — to . Kolejność zagnieżdżenia wynika z tej odpowiedzi, a nie z tego, który znacznik jest „ważniejszy".

Zanim zmienisz display, sprawdź w narzędziach deweloperskich, jak element zachowuje się domyślnie. Często wystarczy drobna korekta, a nie przepisywanie całego układu. Pamiętaj też, że display: none usuwa element z przepływu, a visibility: hidden tylko go ukrywa, zostawiając puste miejsce. Te dwie właściwości mylone są nagminnie i potrafią zepsuć zarówno układ, jak i dostępność strony.

Na koniec drobiazg, który ratuje układ: grid-auto-rows: 1fr wyrówna wysokość kart w wierszu, a align-items: stretch sprawi, że przyciski i stopki wewnątrz kart wylądują na tej samej linii. Całość sprowadza się do trzech linijek CSS i jednego przemyślanego minmax(). Media query nie znikają z projektu całkowicie, ale przy siatce kart przestają być potrzebne.

Plik index.html to zwykły plik tekstowy z kodem HTML. Kiedy klikniesz go dwukrotnie, system odczytuje przypisanie rozszerzenia .html i uruchamia domyślną przeglądarkę, przekazując jej ścieżkę do pliku. Przeglądarka renderuje kod tak samo jak stronę z internetu, z tą różnicą, że adres zaczyna się od file:// zamiast http:// lub https://. To wygodne przy testowaniu prostych stron, które nie wymagają serwera.