HTML5 boilerplate — the complete starting template
Every HTML page starts with this. DOCTYPE, html, head with meta tags, body. Copy-paste this as your starting point.
<!DOCTYPE html> — tells the browser this is HTML5 (not HTML 4 or XHTML). Always first line. <html lang='en'> — the root element. lang helps screen readers + search engines. <head> — metadata the browser doesn't render: charset, viewport, title, CSS links. <meta charset='UTF-8'> — character encoding. Without it, special chars (é, →, emoji) break. <meta name='viewport' ...> — CRITICAL for mobile. Without it, phones show a tiny zoomed-out version. <meta name='description'> — what Google shows in search results. 150 chars max. <title> — appears in the browser tab + search results. Keep under 60 chars. <link rel='stylesheet'> — load CSS. Always in the head. <link rel='icon'> — the favicon (tiny icon in the browser tab). <script> — load JavaScript. Put at the END of body so the page renders first. Comments: <!-- text --> — invisible in the browser, visible in 'View Source'.
-
Change lang="en" to lang="es"→ screen readers switch to Spanish pronunciation -
Change the title to 'My Cool App — Dashboard'→ browser tab text changes -
Remove the viewport meta tag→ on mobile, the page becomes tiny and zoomed out -
Add <meta name="theme-color" content="#a0c000">→ mobile browser address bar turns green -
Change charset from UTF-8 to ISO-8859-1→ special characters may break