14 Popularnych Błędów Początkujących w HTML i CSS

Stawiając pierwsze kroki w programowaniu i nauce tworzenia stron internetowych, często popełniamy różne błędy. Nie ma w tym nic złego, każdy kiedyś zaczynał i popełniał wiele błędów. Natomiast warto cały czas się rozwijać i z czasem wystrzegać się tych błędów, dzięki czemu staniemy się lepszymi w swoim fachu. W tym artykule pokaże Ci, jakie są najczęstsze błędy początkujących osób, którzy tworzą pierwsze strony internetowe w HTMLu i CSSie, a także opiszę jak ich unikać. Jeżeli chcesz być dobrym programistą i nie popełniać podstawowych błędów, to koniecznie przeczytaj ten artykuł do końca.

14 Popularnych Błędów Poczatkujacych w HTML i CSS

14 Popularnych Błędów Poczatkujacych w HTML i CSS

Błąd 1. Używanie tabeli jako szkielet (layout) witryny.

Pamiętaj proszę, że tabela powinna służyć tylko do przedstawienia danych w takim formacie. Niektórzy początkujący próbują czasem z tabeli robić taki szkielet całej strony, taki layout swojej strony, żeby łatwiej było im umieszczać elementy w odpowiednich miejscach i żeby to było skalowalne. Natomiast to jest zła praktyka. Do odpowiedniego pozycjonowania elementów są lepsze sposoby, na przykład poprzez zastosowanie flexboxa lub grida, które przybliżę Ci też w kolejnych artykułach. Jest to też dużo łatwiejsze.

Błąd 2. Złe używanie nagłówków na stronie.

W HTML możemy używać nagłówków od h1 do h6. Używaj zawsze tych nagłówków zgodnie z przeznaczeniem. Na 1 podstronie nie powinno być więcej niż jeden nagłówek h1. Używaj tych nagłówków zgodnie z semantyką, czyli h1 to jest tekst najważniejszy na stronie, h2 trochę mniej ważny i tak aż do h6, który jest najmniej ważny. Oczywiście nie każdy tekst na stronie będzie też nagłówkiem.

Błąd 3. Złe formatowaniu kodu HTML.

Pamiętaj o odpowiednim formatowaniu znaczników HTML. Stosuje odpowiednie wcięcia i odstępy pionowe jeżeli trzeba. Dzięki temu Twój kod będzie bardziej czytelny zarówno dla Ciebie, jak i dla innych programistów. Visual Studio Code również w tym zakresie Ci pomaga. Wystarczy zainstalować odpowiednie rozszerzenie np. prettier i poprawiać formatowanie przy zapisie.

Błąd 4. Umieszczanie styli CSS inline lub bezpośrednio w head.

Pamiętaj, żeby style w CSS zawsze umieszczać w osobnym pliku. Jasne, że mogą zdarzyć się wyjątki, ale to jest najlepsza praktyka i przede wszystkim staraj się jej trzymać. Najgorzej jak deklarujesz style w różnych miejscach, np. część stylów masz w osobnym pliku, część inline w znacznikach, a jeszcze inne w headzie. W takim kodzie jest się później ciężko odnaleźć i nikt nie chce go ruszać. Style CSS zawsze umieszczamy w osobnym pliki i linkujemy tylko do niego w headzie.

Błąd 5. Brak uzupełniania atrybutu "alt" dla obrazków.

Pamiętaj, żeby zawsze do zdjęcia dodawać i uzupełniać poprawnie atrybut alt. Dzięki temu, jeżeli z jakiegoś powodu zdjęcie nie zostanie wyświetlone, to zostanie wyświetlony ten tekst. Poza tym informacje w tym atrybucie są również istotne w kontekście SEO np. dla wyszukiwarki google. Nie możesz pomijać tego atrybutu.

Błąd 6. Używanie znacznika "<br />" niezgodnie z jego przeznaczeniem.

Nie nadużywaj znacznika br, ten znacznik służy tylko do robienia odstępu pionowego w tekście. Nie rób odstępów np. pomiędzy 2 obrazkami, czy dowolnymi elementami w pionie za pomocą tego znacznika. Takie rzeczy robimy za pomocą marginesów.

Błąd 7. Używanie wszędzie divów.

Pamiętaj o semantyce znaczników. Nie możesz używać wszędzie divów, tylko powinieneś używać odpowiednich znaczników. Często spotykam się z zapisem, gdzie zamiast stworzyć znacznik header oraz np. footer, programista stosuje divy i nadaje im klasy kolejno header i footer, także to jest złe podejście. Czegoś takiego unikaj. Po to powstały różne znacznika, aby używać ich zgodnie z przeznaczeniem. Oczywiście, w obu przypadkach Twoja strona będzie wyświetlała się identycznie, natomiast jest to złe, ponieważ w HTML ważna jest semantyka, stosowanie dobrych wzorców i używanie znaczników zgodnie z ich przeznaczeniem.

Błąd 8. Złe definiowanie kolorów.

Dla definiowania kolorów używaj wartości szesnastkowych lub rgba, gdy wymagana jest przeźroczystość. Nie używaj bezpośrednio nazw kolorów, ponieważ rodzi to kilka problemów. Takie kolory nie zawsze są jednoznaczne i niektóre przeglądarki mogą je inaczej interpretować, dużo lepiej używać dokładnie określonych kolorów. A możesz to robić tak jak wspomniałem np. za pomocą wartości szesnastkowych.

Błąd 9. Złe nazewnictwo.

Wszystkie nazwy klas, czy identyfikatorów powinny być w języku angielskim. Jeżeli nazwy są wieloczłonowe, to oddzielaj je myślnikami. W niektórych firmach możesz spotkać się z innymi konwencjami nazewniczymi i to jest ok, ale w takim przypadku pamiętaj, żeby zawsze nazwy były spójne dla całego projektu. Oprócz tego zalecam stosowanie nazewnictwa zgodnego z metodologią BEM, czyli Blok Element Modyfikator.

Błąd 10. Brak znajomości wszystkich jednostek.

Pamiętaj, że oprócz px mamy mnóstwo innych jednostek i często inne mogą być bardziej odpowiednie w danej sytuacji. Warto nauczyć się używać jednostek w zależności od sytuacji. Oprócz px, które również są przydatne w niektórych sytuacjach, warto rozważyć użycie bardziej responsywnych jednostek takich jak remy, procenty czy viewporty.

Błąd 11. Stosowanie nieodpowiednich komponentów na formularzach.

Bardzo częsty błąd początkujących, czyli właśnie stosowanie komponentów niezgodnie z ich przeznaczeniem. Jeżeli oczekujesz na formularzu wpisania hasła to użyj input z typem password, czyli tzw. passwordboxa, jeżeli potrzebujesz koloru to użyj input o typie color, jeżeli oczekujesz podania daty od użytkowników, to zastosuj input z typem date itd. Każdy typ danych ma odpowiadający dla siebie komponent i tak powinniśmy z nich korzystać. Jasne, że mógłbyś obsłużyć wszystko na inpucie z typem text, ale nie o to chodzi. Chcemy ułatwiać sobie życie i korzystać z dedykowanych kontrolek. Jeżeli użytkownik ma podać kolor, to nie każmy mu wpisywać dokładnej wartości w polu, lecz pozwólmy mu wybrać odpowiedni kolor z interfejsu użytkownika. Podobnie z datami, niech użytkownik wybierze sobie odpowiednią datę z kalendarza, a nie wpisuje jej z reki. Hasło również powinno być ukrywane na interfejsie użytkownika i podobnie jest z innymi komponentami. Także podsumowując, używaj komponentów dedykowanych dla ich typów. Często początkujący programiści o tym zapominają, co jest ogromnym błędem.

Błąd 12. Ustawianie 0 wraz z jednostką.

Jeżeli chcesz ustawić wartość 0px, lub 0 z dowolną inną jednostką, to możesz w zapisie pominąć tę jednostkę. Wystarczy zapisać samo 0 i jest to jednoznaczny zapis. Nie ma potrzeby tutaj używać zbędnych znaków.

Błąd 13. Nieumiejętne próby wyśrodkowania elementów w pionie i poziomie.

Jeżeli chcesz ustawić element idealnie na środku, to możesz to zrobić bardzo łatwo za pomocą flexboxa. Widziałem już różne próby wyśrodkowania elementów, dodawanie mnóstwo kodu, a tak naprawdę wystarczy użyć flexboxa. Wystarczy wtedy ustawić właściwość display na flex, justify-content na center i align-items na center i element wewnątrz kontenera będzie idealnie wyśrodkowany. Bez flexboxa jest to dużo trudniejsze i inaczej robiło się to w zależności od elementów w środku. Także pamiętaj o tym sposobie.

Błąd 14. Brak atrybutu "name" dla pól na formularzu.

Każde pole na formularzu, czyli input powinien mieć ustawiony atrybut name, dzięki temu będziesz mógł wysłać poprawnie wszystkie dane na serwer.

To wszystkie na dzisiaj. Jeżeli taki artykuł Ci się spodobał, to koniecznie dołącz do mojej społeczności – darmowe zapisy, gdzie będziesz również miał dostęp do dodatkowych materiałów i przede wszystkim bonusów. Do zobaczenia w kolejnym artykule.

Poprzedni artykuł - 8 Najgorszych Nawyków Programistów