The meta Tag and Viewport in HTML

The <meta> tag provides metadata about the document that isn't displayed on the page itself, but is read by browsers, search engines, and social platforms.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Learn HTML from scratch with hands-on examples.">
  <meta name="author" content="Jane Doe">
  <meta name="robots" content="index, follow">
</head>

charset="UTF-8" — declares the character encoding, ensuring accented characters and non-Latin scripts (like Bangla) render correctly instead of showing garbled symbols. This should always be one of the very first lines in <head>.
viewport — critical for mobile responsiveness. Without it, mobile browsers render the page at a fixed desktop-like width and then zoom out, making text tiny and unreadable. width=device-width matches the page width to the device's screen width; initial-scale=1.0 sets the starting zoom level.
description — a short summary often shown directly under your page's title in search results. Keep it under roughly 155-160 characters.
robots — controls whether search engine crawlers should index the page and follow its links (noindex hides a page from search results entirely, useful for admin/staging pages).

Missing the viewport tag is one of the most common beginner mistakes — a page can look perfect on desktop and completely broken on a phone simply because this one line is missing.