Szablon HTML: nowoczesny start objaśniony linia po linii

Generator szablonu HTML

Szablon HTML: szablon z objaśnieniami i generator | We.Inc

Nowoczesny szablon HTML5 objaśniony linia po linii oraz generator tytułu, opisu, języka, Open Graph, favicon, koloru motywu i linków do CSS lub JS. Skopiuj lub pobierz index.html.

Minimalny szablon HTML5 potrzebuje doctype, elementu html z atrybutem lang, sekcji head z kodowaniem UTF-8, znacznikiem meta viewport, tytułem i opisem, a następnie body. CSS podłącz znacznikiem link w head, a JavaScript znacznikiem script z defer. Wygeneruj swój szablon poniżej i pobierz index.html.

Linie, których potrzebuje każda strona

Linia
Po co

<!doctype html>
Włącza tryb standardów

<html lang="en">
Język dla czytników ekranu i tłumaczenia

<meta charset="utf-8">
Poprawne znaki i symbole

<meta name="viewport" ...>
Właściwe skalowanie na telefonach

<title>
Tekst karty i nagłówek w wynikach wyszukiwania

Generator tworzy kompletny, poprawny plik index.html na podstawie kilku przełączników: tytułu i opisu strony, języka, znaczników Open Graph do podglądów linków, zestawu favicon, koloru motywu, wskazówek preconnect oraz linków do arkusza stylów i skryptu z wybranym sposobem ładowania. Każda linia, którą może wygenerować, jest objaśniona w szablonie z komentarzami poniżej.

Wpisz tytuł, opis i język, a potem włącz dodatki, których chcesz.
Wybierz sposób ładowania skryptu: defer, module lub async. Podgląd pliku aktualizuje się na bieżąco.
Skopiuj kod lub pobierz go jako index.html, gotowy do otwarcia w przeglądarce lub edytorze.
Przeczytaj wersję z objaśnieniami poniżej, aby zrozumieć każdą linię przed publikacją.

Umieść meta charset w pierwszych 1024 bajtach pliku. Najprościej mieć pewność, wstawiając go jako pierwszy w head.
Napisz unikalny tytuł i opis dla każdej strony. Wyszukiwarki często pokazują je jako nagłówek i fragment wyniku.
Unikaj maximum-scale=1 i user-scalable=no w znaczniku viewport. Blokowanie powiększania szkodzi czytelnikom, którzy potrzebują większego tekstu.
Ładuj skrypty z defer w head zamiast na końcu body. Plik pobiera się wcześnie, a i tak uruchamia się po parsowaniu.
Używaj bezwzględnych adresów URL dla og:image. Serwisy społecznościowe pobierają obraz z własnych serwerów i nie rozwiążą ścieżki względnej.

Najczęściej zadawane pytania

Jak podłączyć plik CSS do HTML?

Dodaj <link rel="stylesheet" href="styles.css"> wewnątrz head. href jest względny wobec pliku HTML, więc css/styles.css wskazuje na folder css obok niego. Arkusze stylów w head na chwilę blokują renderowanie i jest to zamierzone: zapobiega to mignięciu treści bez stylów.

Gdzie powinien znaleźć się znacznik script?

W head z defer, na przykład <script src="app.js" defer></script>. Przeglądarka pobiera go równolegle z parsowaniem i uruchamia po sparsowaniu dokumentu, po kolei. Skrypty type="module" są odraczane automatycznie. async używaj tylko dla niezależnych skryptów, takich jak analityka.

Czy potrzebuję znacznika meta X-UA-Compatible?

Nie. Wpływał tylko na stare wersje Internet Explorera, którego Microsoft już nie wspiera. Aktualne szablony go pomijają.

Których plików favicon naprawdę potrzebuję?

favicon.ico w katalogu głównym strony dla starych narzędzi i robotów, ikona SVG dla nowoczesnych przeglądarek oraz PNG apple-touch-icon o wymiarach 180 na 180 pikseli dla ekranów głównych iOS wystarczą niemal w każdym przypadku. Manifest aplikacji internetowej dodaje większe ikony, jeśli chcesz umożliwić instalację.

Czym różni się defer od async?

Oba pobierają skrypt bez blokowania parsera. defer czeka na koniec parsowania i zachowuje kolejność skryptów w dokumencie. async uruchamia każdy skrypt w chwili, gdy dotrze, w dowolnej kolejności, co może zepsuć skrypty zależne od siebie nawzajem lub od DOM.

Co należy do head

Sekcja head zawiera informacje o stronie, a nie jej treść: kodowanie znaków, viewport, tytuł, opis, linki do arkuszy stylów, ikony i znaczniki podglądu w serwisach społecznościowych. Nic z niej nie jest wyświetlane w body strony.
Kolejność ma pewne znaczenie. Najpierw charset, potem viewport, następnie tytuł i opis. Wskazówki preconnect umieść przed arkuszami stylów, które ich potrzebują, aby połączenie rozpoczęło się jak najwcześniej.

Open Graph i podglądy linków

Gdy ktoś udostępnia Twój adres URL w komunikatorze lub serwisie społecznościowym, karta podglądu pochodzi z og:title, og:description, og:image i og:url. Bez nich platformy zgadują, często źle.
Obraz o wymiarach 1200 na 630 pikseli działa we wszystkich głównych serwisach. twitter:card ustawione na summary_large_image prosi X o dużą wersję karty.

Szablon linia po linii

Kompletny nowoczesny index.html

Wszystko, czego zwykle potrzebuje strona produkcyjna, i nic ponadto. Tabela poniżej objaśnia każdą linię.

Co robi każda linia

Linia
Co robi
Wymagana?

<!doctype html>
Każe przeglądarce używać trybu standardów zamiast trybu quirks
Tak

<html lang="en">
Deklaruje język strony dla technologii asystujących, dzielenia wyrazów i tłumaczenia
Tak

<meta charset="utf-8">
Kodowanie znaków, dzięki któremu akcenty, symbole i emoji wyświetlają się poprawnie
Tak

<meta name="viewport" content="width=device-width, initial-scale=1">
Sprawia, że telefony nie renderują pomniejszonej strony desktopowej
Tak

<title>
Karta przeglądarki, zakładki i zwykle nagłówek w wynikach wyszukiwania
Tak

<meta name="description">
Często używany jako fragment w wynikach wyszukiwania
Zdecydowanie zalecana

<link rel="canonical">
Preferowany adres URL, gdy strona jest dostępna pod kilkoma
Zalecana

<meta name="theme-color">
Barwi pasek narzędzi w niektórych przeglądarkach mobilnych
Opcjonalna

<link rel="icon"> i apple-touch-icon
Ikona karty i ikona na ekranie głównym
Zalecana

Znaczniki meta og: i twitter:
Tytuł, tekst i obraz dla podglądów udostępnianych linków
Zalecana

<link rel="preconnect">
Otwiera połączenie z innym źródłem, zanim będzie potrzebne
Opcjonalna

<link rel="stylesheet">
Ładuje Twój CSS
Jeśli masz CSS

<script defer>
Ładuje JavaScript bez blokowania parsowania, uruchamia go po nim
Jeśli masz JS

<main>
Oznacza główną treść dla technologii asystujących
Zalecana

Podłączanie CSS do HTML

Trzy sposoby dodania CSS

Zewnętrzny plik to standard, ponieważ przeglądarka zapisuje go w pamięci podręcznej dla wszystkich stron. Blok style pasuje do reguł specyficznych dla strony, a atrybut style do jednorazowych wartości.

Ścieżki względne w praktyce

Większość niedziałających arkuszy stylów to błędna ścieżka. Sprawdź w panelu sieci narzędzi deweloperskich, czy nie ma błędu 404.

Poprawne podłączanie JavaScriptu

Opcje ładowania skryptów

Kod
Blokuje parsowanie?
Uruchamia się
Zachowuje kolejność?

<script src="a.js">
Tak
Od razu po napotkaniu
Tak

<script src="a.js" defer>
Nie
Po parsowaniu, przed DOMContentLoaded
Tak

<script src="a.js" async>
Nie (na chwilę wstrzymuje, aby się uruchomić)
Gdy tylko się pobierze
Nie

<script type="module" src="a.js">
Nie
Jak defer
Tak

Zalecane znaczniki script

Moduły dostają tryb ścisły, własny zakres i obsługę import. nomodule pozwala serwować wersję zapasową bardzo starym przeglądarkom, jeśli nadal tego potrzebujesz.

Generator szablonu

Tytuł strony

Kod języka

en, fr, es-MX

Opis

Adres URL strony (canonical i og:url)

Ścieżka arkusza stylów (puste, jeśli brak)

Ścieżka skryptu (puste, jeśli brak)

Ładowanie skryptu

Znaczniki Open Graph i Twitter

Zestaw favicon

Preconnect do Google Fonts

og:image (bezwzględny URL)

Kolor motywu

Kopiuj HTML

Pobierz index.html

Zacznij za darmo · Bez karty kredytowej

Powiązane: Poradniki

Produkt

Dla kogo

Funkcje

Zasoby

Firma

Mapa strony