9 błędów, których nie powinieneś popełniać, budując stronę internetową

Reklama

Tworzenie strony internetowej za pomocą HTML i CSS jest całkiem proste Jak zrobić stronę internetową: dla początkującychDzisiaj przeprowadzę Cię przez proces tworzenia kompletnej strony internetowej od zera. Nie martw się, jeśli będzie to trudne. Poprowadzę cię przez to na każdym kroku. Czytaj więcej . Ale łatwo jest popełniać błędy i jest kilka rzeczy, o których możesz nie pomyśleć. W większości przypadków te małe błędy nie mają większego znaczenia.

Ale na dłuższą metę mogą utrudnić ci życie. Tych dziewięć błędów można łatwo popełnić, ale jeśli usuniesz je wcześniej, a nie później, Twoja strona będzie wyglądać lepiej, będzie łatwiejsza w utrzymaniu i będzie funkcjonować tak, jak chcesz.

1. Stylizacja w linii

Jedną z wielkich zalet HTML i CSS jest to, że możesz sformatować dowolny wiersz tekstu - naprawdę każde słowo - w dowolnym momencie. Ale to nie znaczy, że powinieneś skorzystać z tej możliwości.

Oto przykład stylu wbudowanego, którego można użyć, aby akapit był większy niż otaczające go akapity i wyróżnić go innym kolorem:

Twój tekst tutaj.

To daje akapit a Styl CSS Naucz się HTML i CSS dzięki tym samouczkom krok po krokuCiekawi Cię HTML, CSS i JavaScript? Jeśli uważasz, że masz talent do nauki tworzenia stron internetowych od podstaw - oto kilka świetnych samouczków, które warto wypróbować. Czytaj więcej która kończy się wnioskiem akapitu. Wydaje się dość wydajny, prawda?

Jest z tym jeden duży problem: jeśli chcesz zmienić wiele rzeczy w swojej witrynie, musisz znaleźć i znaleźć każdy przypadek wbudowanego stylu i go zmienić. Jeśli masz 100 różnych akapitów o rozmiarze 120% i kolorze niebieskim, musisz znaleźć wszystkie 100 i zmienić je na format, który według Ciebie jest lepszy.

Zamiast tego użyj arkusza stylów CSS. Oto styl, którego użyłbyś w powyższym akapicie:

p. ważne {rozmiar: 120%; kolor niebieski; }

Teraz zamiast używać stylu wbudowanego, możesz po prostu użyć tej linii:

Twój tekst tutaj.

A twój akapit będzie duży i niebieski. A kiedy zmienisz „ważną” klasę w swoim CSS, wszystkie się zmienią.

2. Tabele dla układu

Ludzie często używali tabel do formatowania układu strony. Korzystając z tabeli, możesz porządkować elementy na stronie w kolumnach i wierszach, a także stosować różne wyrównania i style. Nawet tabele jednokomórkowe zostałyby wykorzystane do prawidłowego wyrównania zawartości. Ale to użycie tabel jest na ogół marne.

Podobnie jak w przypadku stylów wbudowanych, łatwiej jest utrzymać układ CSS zamiast tabel HTML. Ponownie, jeśli chcesz wprowadzić zmiany na dziesiątkach lub setkach stron, łatwiej jest edytować arkusz stylów niż przeglądać każdą stronę i poprawiać tabele.

Oprócz łatwiejszej konserwacji czytanie układów CSS jest zwykle znacznie łatwiejsze niż czytanie tabel HTML. Zwłaszcza jeśli skończysz zagnieżdżanie wielu poziomów tabel w sobie. Przejście między dokumentem HTML a arkuszem stylów może nie być bardzo łatwe, aby zobaczyć dokładnie, co się dzieje, ale zawartość strony będzie wyraźniejsza i łatwiejsza do edycji.

Używanie tabel tu i tam do dzielenia stron na kolumny nie jest grzechem śmiertelnym. Czasami jest to łatwiejsze i szybsze niż rozwiązywanie problemów z CSS. Ale jeśli tworzysz gigantyczne, wielopoziomowe stoły, powinieneś rozważyć przeformatowanie za pomocą CSS.

3. Przestarzały HTML

Jak każdy język, HTML zmienia się regularnie. Oficjalnie uznane tagi zmieniają się, a niektóre stają się przestarzałe. Nawet jeśli te tagi nadal działają, najlepiej ich unikać.

Na przykład, jeśli jesteś przyzwyczajony do korzystania z znacznik dla pogrubienia i oznacz kursywą, opóźniasz się. i (dla „wyróżnienia”) są teraz standardowymi tagami.

, , , , a inne są również przestarzałe.

Większość przestarzałych tagów zastąpiono CSS, więc aby uzyskać ten sam efekt, musisz użyć stylów (najlepiej nie wbudowanych). Jeśli nie wiesz, jak zastąpić przestarzały tag lub jeśli określony tag jest nadal w użyciu, sprawdź oficjalna dokumentacja HTML lub po prostu uruchom szybkie wyszukiwanie.

4. Wbudowany JavaScript

Niektóre strony internetowe używają JavaScript do dodaj dodatkową funkcjonalność JavaScript i tworzenie stron WWW: przy użyciu modelu obiektowego dokumentuW tym artykule zapoznasz się ze szkieletem dokumentu, z którym JavaScript współpracuje. Mając praktyczną wiedzę na temat tego abstrakcyjnego modelu obiektu dokumentu, możesz pisać JavaScript, który działa na dowolnej stronie internetowej. Czytaj więcej . Może sprawiać, że strony internetowe są interaktywne, sprawdzać poprawność wprowadzanego tekstu, dodawać animacje, udzielać odpowiedzi na działania użytkowników i tak dalej. Krótko mówiąc, może sprawić, że strona będzie bardziej użyteczna, zapewniając dodatkowe zachowanie.

Podobnie jak CSS, możesz dodać wbudowany JavaScript do swojego HTML. Podobnie jak CSS, jest to ogólnie odradzane. Oprócz tego, że jest potencjalnie trudniejszy w utrzymaniu, istnieje kilka innych powodów, które uzasadniają to upomnienie.

Inline JavaScript może wykorzystywać większą przepustowość niż skrypt połączony z innego pliku. Proces zwany minimalizacją kompresuje HTML i CSS przed wysłaniem go do użytkownika, wymagając mniejszej przepustowości w połączeniach szerokopasmowych lub mobilnych. Jednak wbudowanego JavaScript nie można zminimalizować. Nie będzie też buforowany, podczas gdy osobny plik JavaScript mogą być w pamięci podręcznej.

Wszystkie te rzeczy powodują, że wbudowany JavaScript wymaga większej przepustowości.

Trudniej jest też debugować, ponieważ można użyć walidatora JavaScript dla pliku JavaScript... ale nie działa on na wbudowanym skrypcie. I znowu sprawia, że ​​HTML jest czystszy i łatwiejszy w utrzymaniu.

5. Wiele znaczników H1

Tagi nagłówkowe są świetne. Ułatwiają przeglądanie stron, zwiększają SEO i podkreślają pewne punkty.

Ale z jakiegoś powodu istnieje sześć poziomów znaczników nagłówka. Na twojej stronie powinien znajdować się tylko jeden tag H1. I to często tytuł strony (szczególnie na blogach i podobnych stronach). Możesz pomyśleć, że umieszczenie kilku słów kluczowych w tagach H1 zwiększy prawdopodobieństwo, że Google je podniesie i umieści witrynę wyżej w wynikach.

Ale tak naprawdę sprawia, że ​​twoja strona jest bardziej zagmatwana i trudniejsza do odczytania. Które i tak negują wszelkie korzyści związane z SEO.

Użyj H2, H3 i pozostałych tagów nagłówka, aby lepiej obrysować stronę. Poziom nagłówka powinien dać czytelnikowi pojęcie o tym, jak ważna jest ta sekcja. Jeśli ich wprowadziłeś w błąd, będą o tym wiedzieć i nie będą szczęśliwi.

6. Pomiń alty obrazu

Każdemu obrazowi można nadać atrybut „alt”, który wyświetla określony wiersz tekstu, jeśli nie można go wyświetlić. To może nie wydawać się wielkim problemem, szczególnie w przypadku nowoczesnych przeglądarek (zarówno stacjonarnych, jak i mobilnych), które mogą wyświetlać prawie wszystko.

Ale nie dodawanie atrybutów alt jest dużym błędem, szczególnie w dobie ciągłego przeglądania mobilnego. Połączenia mobilne nie zawsze są świetne, a jeśli przeglądarka nie może załadować obrazu, czytelnik nie ma pojęcia, co powinien tam zobaczyć. Atrybut alt może to naprawić.

A jeśli ktoś używa czytnik ekranu VoiceOver sprawia, że ​​urządzenia Apple są bardziej dostępne niż kiedykolwiekPrezes amerykańskiej Fundacji Niewidomych uważa, że ​​„Apple zrobiło więcej w zakresie dostępności niż jakakolwiek inna firma do tej pory” - i VoiceOver odegrał w tym dużą rolę. Czytaj więcej lub inną funkcję ułatwień dostępu, ten atrybut alt może być wszystkim, co uzyskają z obrazu.

Oczywiście istnieją również potencjalne korzyści SEO. Wyszukiwarki mogą indeksować krótkie, opisowe atrybuty alt. Ale największą korzyścią jest pomoc czytelnikom.

7. Tagi nie zamykające

Istnieje kilka tagów HTML, których można uniknąć, np. Nie zamykając się

i

. Przeglądarki wiedzą, że kiedy zaczynasz kolejny akapit lub element listy, poprzedni kończy się. Ale to nie znaczy, że powinieneś pominąć tagi zamykające.

Przede wszystkim, pomimo postępów w technologii przeglądarki, istnieje możliwość, że przeglądarka wyświetli niepoprawnie twoje treści, jeśli nie zamkniesz tagów. A stosowanie stylów może przynieść nieprzewidywalne rezultaty Użytkownik robertc z Stack Exchange demonstruje.

Sprowadza się to do tego, że przeglądarki oczekują zamykania tagów. Nie potrzebują ich absolutnie… ale na pewno skorzystają z poprawnego kodu HTML, gdy próbują wyświetlić Twoją stronę.

Na szczęście zamknięcie tagów nie zajmuje wiele, zwłaszcza jeśli używasz dobrego edytora HTML.

8. Nie w tym DOCTYPE

Na początku dokumentów HTML zazwyczaj zobaczysz deklarację DOCTYPE, taką jak ta:

Jest to coś, o czym nie mówi się często, ale jest ważnym elementem na Twojej stronie. Deklaracja DOCTYPE informuje przeglądarkę, jakiego typu HTML używasz. Pozwala to poprawnie renderować HTML.

Jeśli pominiesz deklarację DOCTYPE, strona będzie renderowana w „trybie dziwactw”. Jest to obrona współczesnej przeglądarki przed przestarzałymi stronami internetowymi. I zmienia sposób wyświetlania strony. Szybkie spojrzenie na Tryb dziwactwa Firefoksa pokazuje, że zmiany wielkości liter są rozróżniane, właściwości czcionek nie dziedziczą w tabelach, rozmiary czcionek są obliczane inaczej, a obrazy bez atrybutów alt czasami wyświetlają się niepoprawnie.

Większość z tych rzeczy jest stosunkowo niewielka. Ale jeśli chcesz, aby strona wyświetlała się poprawnie, upewnij się, że przeglądarka ma włączony tryb pełnych standardów.

Aby to zrobić, potrzebujesz DOCTYPE. (Jeśli nie wiesz, czego użyć, po prostu użyj .)

9. Zlekceważ znaczniki schematu

Znaczniki schematu pomagają wyszukiwarkom lepiej zrozumieć, co znajduje się na Twojej stronie. Mówiąc ściślej, znaczniki te mówią wyszukiwarkom, o czym piszesz w każdej sekcji.

Na przykład w artykule można użyć znaczników schematu, aby przekazać wyszukiwarce tytuł, autora, datę, wydawcę i inne przydatne informacje o artykule.

Istnieją schematy filmów, książek, organizacji, ludzi, restauracji, produktów, miejsc, akcji, różnych typów danych, muzyki, rzeźby, rezerwacji, usług, bankomatów, browarów i wszystkiego, co tylko możesz wymyślić. To jest niesamowite.

Możesz zdecydowanie uciec bez korzystania ze znaczników schematu. Twoja strona wyświetli się bez niej poprawnie. Twoi czytelnicy nawet nie wiedzą, że tam jest. Ale dzięki temu znacznikowi można wiele zyskać. Wyszukiwarki będą w stanie dostarczyć znacznie bardziej szczegółowe i przydatne informacje o Twojej stronie, w tym fragmenty rozszerzone.

A dzięki narzędziu znaczników schematu Google proces ten jest dość łatwy.

Przyzwyczaj się do najlepszych praktyk HTML

Przyzwyczajenie się do tych najlepszych praktyk może chwilę potrwać. A czasem może się wydawać, że poświęcasz dużo czasu na coś, co nie daje ci zbyt wiele. Ale upewniając się, że twój HTML i CSS Naucz się HTML i CSS dzięki tym samouczkom krok po krokuCiekawi Cię HTML, CSS i JavaScript? Jeśli uważasz, że masz talent do nauki tworzenia stron internetowych od podstaw - oto kilka świetnych samouczków, które warto wypróbować. Czytaj więcej są dobrze rozplanowane, łatwe w obsłudze i łatwe w utrzymaniu zaoszczędzi Ci dużo czasu na dłuższą metę.

Jakie inne dobre nawyki okazały się przydatne podczas tworzenia stron internetowych? Czy nie zgadzasz się z którąkolwiek z powyższych praktyk? Podziel się swoimi przemyśleniami w komentarzach poniżej!