Przewodnik po stylach HTML
Spójny, czysty i uporządkowany kod HTML ułatwia innym czytanie i zrozumienie Twojego kodu.
Oto kilka wskazówek i wskazówek dotyczących tworzenia dobrego kodu HTML.
Zawsze deklaruj typ dokumentu
Zawsze deklaruj typ dokumentu jako pierwszy wiersz w dokumencie.
Prawidłowy typ dokumentu dla HTML to:
<!DOCTYPE html>
Użyj nazw elementów pisanych małymi literami
HTML pozwala na mieszanie wielkich i małych liter w nazwach elementów.
Zalecamy jednak używanie nazw elementów pisanych małymi literami, ponieważ:
- Mieszanie nazw wielkich i małych wygląda źle
- Deweloperzy zwykle używają małych liter
- Małe litery wyglądają czyściej
- Łatwiej jest pisać małymi literami
Dobry:
<body>
<p>This is a paragraph.</p>
</body>Zły:
<BODY>
<P>This is a paragraph.</P>
</BODY>Zamknij wszystkie elementy HTML
W HTML nie musisz zamykać wszystkich elementów (na przykład <p>elementu).
Jednak zdecydowanie zalecamy zamknięcie wszystkich elementów HTML, takich jak:
Dobry:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>Zły:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>Użyj małych liter w nazwach atrybutów
HTML pozwala na mieszanie wielkich i małych liter w nazwach atrybutów.
Zalecamy jednak używanie nazw atrybutów pisanych małymi literami, ponieważ:
- Mieszanie nazw wielkich i małych wygląda źle
- Deweloperzy zwykle używają małych liter
- Małe litery wyglądają czyściej
- Łatwiej pisać małymi literami
Dobry:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Zły:
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Zawsze cytuj wartości atrybutów
HTML zezwala na wartości atrybutów bez cudzysłowów.
Zalecamy jednak cytowanie wartości atrybutów, ponieważ:
- Deweloperzy zwykle cytują wartości atrybutów
- Podane wartości są łatwiejsze do odczytania
- MUSISZ używać cudzysłowów, jeśli wartość zawiera spacje
Dobry:
<table
class="striped">Zły:
<table class=striped>Bardzo źle:
To nie zadziała, ponieważ wartość zawiera spacje:
<table class=table striped>Zawsze określaj alt, szerokość i wysokość dla obrazów
Zawsze określaj altatrybut dla obrazów. Ten atrybut jest ważny, jeśli obraz z jakiegoś powodu nie może zostać wyświetlony.
Ponadto zawsze definiuj widthi
heightobrazów. Zmniejsza to migotanie, ponieważ przeglądarka może zarezerwować miejsce na obraz przed załadowaniem.
Dobry:
<img
src="html5.gif" alt="HTML5" style="width:128px;height:128px">Zły:
<img
src="html5.gif">Spacje i znaki równości
HTML dopuszcza spacje wokół znaków równości. Ale bez przestrzeni jest łatwiejszy do odczytania i lepiej grupuje jednostki.
Dobry:
<link rel="stylesheet" href="styles.css">Zły:
<link
rel = "stylesheet" href = "styles.css">Unikaj długich linii kodu
Podczas korzystania z edytora HTML NIE jest wygodne przewijanie w prawo iw lewo w celu odczytania kodu HTML.
Staraj się unikać zbyt długich linii kodu.
Puste linie i wcięcia
Nie dodawaj pustych linii, spacji ani wcięć bez powodu.
Aby zapewnić czytelność, dodaj puste wiersze, aby oddzielić duże lub logiczne bloki kodu.
Aby zapewnić czytelność, dodaj dwie spacje wcięć. Nie używaj klawisza Tab.
Dobry:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the
center of the Greater Tokyo Area,
and the most
populous metropolitan area in the world.
It is the
seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>
</body>
Zły:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>
Tokyo is the capital of Japan, the
center of the Greater Tokyo Area,
and the most
populous metropolitan area in the world.
It is the
seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>
</body>
Przykład dobrej tabeli:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
Przykład dobrej listy:
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
Nigdy nie pomijaj elementu <title>
Element <title>jest wymagany w HTML.
Treść tytułu strony jest bardzo ważna dla optymalizacji wyszukiwarek (SEO)! Tytuł strony jest używany przez algorytmy wyszukiwarki do określenia kolejności umieszczania stron w wynikach wyszukiwania.
Element <title>:
- definiuje tytuł na pasku narzędzi przeglądarki
- zapewnia tytuł strony po dodaniu jej do ulubionych
- wyświetla tytuł strony w wynikach wyszukiwania
Postaraj się więc, aby tytuł był jak najbardziej dokładny i znaczący:
<title>HTML
Style Guide and Coding Conventions</title>
Pomijasz <html> i <body>?
Strona HTML zostanie zweryfikowana bez tagów <html>i
:<body>
Przykład
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Jednak zdecydowanie zalecamy, aby zawsze dodawać tagi <html>i
!<body>
Pominięcie <body>może spowodować błędy w starszych przeglądarkach.
Pominięcie <html>i <body>
może również spowodować awarię oprogramowania DOM i XML.
Pomijasz <head>?
Znacznik HTML <head> można również pominąć.
Przeglądarki dodadzą wszystkie elementy przed <body>, do elementu domyślnego <head>
.
Przykład
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Zalecamy jednak korzystanie z <head>tagu.
Zamknąć puste elementy HTML?
W HTML zamykanie pustych elementów jest opcjonalne.
Dozwolony:
<meta
charset="utf-8">
Również dozwolone:
<meta charset="utf-8" />
Jeśli oczekujesz, że oprogramowanie XML/XHTML będzie uzyskiwać dostęp do Twojej strony, zachowaj zamykający ukośnik (/), ponieważ jest on wymagany w XML i XHTML.
Dodaj język Atrybut
Powinieneś zawsze dołączyć langatrybut wewnątrz <html>tagu, aby zadeklarować język strony WWW. Ma to pomóc wyszukiwarkom i przeglądarkom.
Przykład
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Metadane
Aby zapewnić właściwą interpretację i poprawne indeksowanie w wyszukiwarkach, zarówno język, jak i kodowanie znaków powinny być zdefiniowane jak najwcześniej w dokumencie HTML:<meta charset="charset">
<!DOCTYPE html>
<html
lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
Ustawianie rzutni
Widoczny obszar to widoczny dla użytkownika obszar strony internetowej. Różni się w zależności od urządzenia – na telefonie komórkowym będzie mniejszy niż na ekranie komputera.
Powinieneś umieścić następujący <meta>element na wszystkich swoich stronach internetowych:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Daje to przeglądarce instrukcje dotyczące kontrolowania wymiarów i skalowania strony.
Część width=device-widthustawia szerokość strony zgodnie z szerokością ekranu urządzenia (która będzie się różnić w zależności od urządzenia).
Część initial-scale=1.0ustawia początkowy poziom powiększenia, gdy strona jest ładowana po raz pierwszy przez przeglądarkę.
Oto przykład strony internetowej bez metatagu viewport i tej samej strony internetowej z metatagiem viewport:
Wskazówka: jeśli przeglądasz tę stronę za pomocą telefonu lub tabletu, możesz kliknąć dwa poniższe łącza, aby zobaczyć różnicę.
Komentarze HTML
Krótkie komentarze powinny być napisane w jednej linii, tak:
<!-- This is a comment -->
Komentarze, które obejmują więcej niż jedną linię, powinny być napisane w ten sposób:
<!--
This is a long comment example. This is
a long comment example.
This is a
long comment example. This is a long comment example.
-->
Długie komentarze są łatwiejsze do zauważenia, jeśli są wcięte dwiema spacjami.
Korzystanie z arkuszy stylów
Use simple syntax for linking to style sheets (the
type attribute is not necessary):
<link rel="stylesheet" href="styles.css">
Short CSS rules can be written compressed, like this:
p.intro {font-family:Verdana;font-size:16em;}
Long CSS rules should be written over multiple lines:
body {
background-color: lightgrey;
font-family: "Arial
Black", Helvetica, sans-serif;
font-size: 16em;
color:
black;
}
- Place the opening bracket on the same line as the selector
- Use one space before the opening bracket
- Use two spaces of indentation
- Use semicolon after each property-value pair, including the last
- Only use quotes around values if the value contains spaces
- Place the closing bracket on a new line, without leading spaces
Loading JavaScript in HTML
Use simple syntax for loading external scripts (the
type attribute is not necessary):
<script src="myscript.js">
Accessing HTML Elements with JavaScript
Using "untidy" HTML code can result in JavaScript errors.
These two JavaScript statements will produce different results:
Example
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML
= "Hello";
Visit the JavaScript Style Guide.
Use Lower Case File Names
Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".
Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg".
If you use a mix of uppercase and lowercase, you have to be aware of this.
If you move from a case-insensitive to a case-sensitive server, even small errors will break your web!
To avoid these problems, always use lowercase file names!
File Extensions
HTML files should have a .html extension (.htm is allowed).
CSS files should have a .css extension.
JavaScript files should have a .js extension.
Differences Between .htm and .html?
There is no difference between the .htm and .html file extensions!
Both will be treated as HTML by any web browser and web server.
Default Filenames
When a URL does not specify a filename at the end (like "https://www.w3schools.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".
If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".
However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.