Article czy section: zły wybór psuje strukturę i SEO

2026-10-19T17:57:58Z

Archie6985: Die Seite wurde neu angelegt: „Najczęstszy błąd to zła nazwa. System może dopisać ukryte rozszerzenie i plik nazywa się w rzeczywistości index.html.txt. Sprawdź nazwę w oknie właściwości albo włącz wyświetlanie rozszerzeń w menedżerze plików. Druga pułapka to kodowanie znaków — jeśli w pliku są polskie litery, a zapisano go w innym kodowaniu niż zadeklarowane w nagłówku, strona pokaże krzaki. Zapisuj w UTF-8 i pilnuj zgodności z deklaracją w sekcji head.<…“

Najczęstszy błąd to zła nazwa. System może dopisać ukryte rozszerzenie i plik nazywa się w rzeczywistości index.html.txt. Sprawdź nazwę w oknie właściwości albo włącz wyświetlanie rozszerzeń w menedżerze plików. Druga pułapka to kodowanie znaków — jeśli w pliku są polskie litery, a zapisano go w innym kodowaniu niż zadeklarowane w nagłówku, strona pokaże krzaki. Zapisuj w UTF-8 i pilnuj zgodności z deklaracją w sekcji head. Mobile first albo desktop first — wybierz jeden kierunek Podejście mobile first polega na tym, że najpierw piszesz style dla wąskiego ekranu, a potem dodajesz media queries z min-width dla coraz szerszych widoków. To prostsze w utrzymaniu, bo mniej nadpisywania. Desktop first działa odwrotnie: bazowe style są dla szerokiego ekranu, a max-width stopniowo je zawęża. Oba podejścia są poprawne, ale mieszanie ich w jednym projekcie to typowy błąd. Wybierz jedno i trzymaj się go konsekwentnie. W pionowym układzie strony marginesy sąsiadujących elementów blokowych nie sumują się. Górny margines jednego akapitu i dolny margines następnego stykają się i przeglądarka wybiera większą z tych wartości. Jeśli nad akapitem stoi 24 piksele odstępu, a pod nim 16, między nimi będzie 24, a nie 40. Mechanizm nazywa się zapadaniem marginesów i dotyczy wyłącznie kierunku pionowego. Poziome odstępy zawsze się sumują. Podstawowa składnia wygląda tak: @media (min-width: 768px) { ... }. W nawiasie podajesz warunek, w nawiasach klamrowych zwykłe reguły CSS. Warto rozumieć różnicę między min-width i max-width. min-width oznacza „od tego rozmiaru w górę", max-width — „do tego rozmiaru w dół". Mieszanie obu bez planu prowadzi do konfliktów, w których trudno przewidzieć, która reguła wygra. Media queries to reguły CSS, które decydują, które style zostaną zastosowane w zależności od właściwości ekranu. Najczęściej chodzi o szerokość okna przeglądarki, ale można sprawdzać też orientację, rozdzielczość czy możliwość hover. Mechanizm jest prosty: piszesz warunek, a przeglądarka przy każdej zmianie rozmiaru okna sprawdza, czy jest spełniony. Jeśli tak — stosuje style z wnętrza bloku. Jeśli nie — ignoruje je całkowicie. Nie ustawiaj breakpointów pod konkretne modele telefonów czy tabletów. Rynek zmienia się zbyt szybko, a ty skończysz z dziesiątkami warunków. Lepiej wyznaczyć punkty graniczne tam, gdzie twoja treść faktycznie zaczyna się łamać — gdy tekst robi się zbyt wąski, gdy elementy przestają się mieścić w rzędzie. Testuj, zmniejszając okno przeglądarki powoli i obserwując, w którym momencie układ wygląda źle. To ten moment jest twoim breakpointem. Praktyczna zasada: najpierw napisz treść i zastanów się, czy dany fragment mógłby trafić na osobną stronę lub do innego serwisu. Jeśli tak, to article. Jeśli istnieje tylko jako część większej opowieści i bez niej nie ma sensu, to section. Gdy masz wątpliwość, użyj diva, a nie na siłę wciskaj semantyczny element tam, gdzie nie pasuje. Kolejny częsty problem to sztywne wartości. Jeśli ustawisz kontenerowi stałą szerokość w pikselach, media queries niewiele pomogą. Używaj jednostek względnych i elastycznych układów — max-width, procentów, fr w gridzie. Media queries mają korygować układ, a nie ratować sztywną strukturę. Warto też pamiętać o jednostkach viewportu: vw i vh bywają wygodne, ale na telefonach potrafią sprawić niespodziankę przy paskach przewijania, więc nie opieraj na nich całego layoutu. Sprawdź strukturę, wyłączając style w przeglądarce. Zobaczysz wtedy czysty tekst z nagłówkami i od razu ocenisz, czy hierarchia jest logiczna. Jeśli po h2 pojawia się h2 bez powodu, prawdopodobnie brakuje ci poziomu pośredniego albo rozbijasz treść zbyt płasko. Popraw to, zanim opublikujesz, bo późniejsza zmiana nagłówków psuje istniejące odnośniki i wyniki wyszukiwania. Sprawdzaj też, czy twoje media queries nie wykluczają się nawzajem. Dwie reguły z tym samym warunkiem to proszenie się o kłopoty — o wyniku decyduje kolejność w pliku, a nie intencja autora. Zamiast pisać coraz więcej warunków, najpierw uporządkuj bazowe style. Często okazuje się, że połowa media queries jest niepotrzebna, gdy elementy są elastyczne od początku. Dobrze zaplanowane reguły dla wąskiego i szerokiego ekranu to nie mnożenie breakpointów, lecz świadome decydowanie, co naprawdę musi się zmienić. Osobny problem to strony osadzane w ramkach. Jeśli witryna jest wyświetlana w iframe na innym serwisie, znacznik viewport z dokumentu nadrzędnego nie działa. Trzeba zadbać o to, żeby dokument wewnątrz ramki miał własny poprawny meta viewport. W przeciwnym razie telefon potraktuje całą ramkę jak szeroką stronę i znów pokaże miniature. Article to samodzielna całość, która ma sens także po wyjęciu z kontekstu strony: wpis, komentarz, karta produktu. Section to fragment większej historii, tematycznie spójny, ale zależny od reszty. W praktyce oznacza to, że article może mieć własny h1, jeśli jest główną treścią dokumentu. Section nigdy nie zaczyna się od h1, bo to poziom zarezerwowany dla tytułu całej strony.

Benutzer:Archie6985

2026-10-19T17:57:56Z

Archie6985: Die Seite wurde neu angelegt: „Miłośnik urządzania mieszkań od kilku lat. Dzielę się tym, jak wycisnąć maksimum z małego metrażu. Najchętniej opisuję pomysły, które nie rujnują budżetu.“

Miłośnik urządzania mieszkań od kilku lat. Dzielę się tym, jak wycisnąć maksimum z małego metrażu. Najchętniej opisuję pomysły, które nie rujnują budżetu.

Rettungsdienst-Wiki - Benutzerbeiträge [de]

Article czy section: zły wybór psuje strukturę i SEO

Benutzer:Archie6985