What belongs in the document head?
An HTML page has a head for information about the document and a body for the content people see on the page. The head is where you place the page title and the metadata declarations covered here. These details do not replace headings or text in the body: a visitor still needs a visible page heading and useful content.
You can practice with a plain-text editor and a modern web browser; no library or particular tool version is required. Save a file with an .html extension and open it in the browser. Give it a standard HTML document structure, including a head and a body. Then add the three items below to the head. You can inspect the file in your editor and refresh the browser after each change.
Give each page a useful title
The title element names the document. Browsers commonly show it in the tab, and it can be used when someone bookmarks the page. Search services may also use it when presenting a result, although they can choose different text. A title is not the same as the visible heading in the body, so include both.
For a page explaining a contact form, a useful title might be “Contact Form Guide | Hello World Workshop.” That tells a reader what the page covers and identifies the site. “Home” or “Untitled” offers much less help when several tabs are open. Make the title specific to the page, keep it readable, and avoid packing it with repeated keywords. If you create another page, give that page its own title rather than copying the first one unchanged.
In the HTML file, put the text between an opening title tag and a closing title tag inside the head. To check your work, save the file, refresh it, and look at the browser tab. If the tab still shows a filename or an unexpected title, check that you edited the file you opened and that the title is inside the head.
Declare UTF-8 character encoding
Character encoding tells software how to interpret the bytes that make up your text. UTF-8 is a practical choice for new HTML pages because it can represent characters from many writing systems, as well as common punctuation and symbols. Declare it with a meta element whose charset attribute is set to UTF-8. Place that declaration near the start of the head so the browser can find it early.
The declaration and the saved file need to agree. Most current text editors can save a file as UTF-8, but an editor may offer other encoding choices. If accented letters or other characters appear as strange symbols, confirm both the file’s saved encoding and its charset declaration. Changing the declaration alone does not necessarily convert a file that was saved using a different encoding.
For a quick check, add a word with an accented character to the body, save the file as UTF-8, and refresh the browser. If it displays as intended, you have checked one simple case. A successful check does not guarantee every character in a larger project is correct, but it helps catch an obvious mismatch.
Set the viewport, then build a layout that can adapt
On mobile devices, the viewport setting helps determine the width the browser uses to lay out the page. A common declaration is a meta element with name set to viewport and content set to width=device-width, initial-scale=1. Put it in the head alongside the other metadata. This asks the browser to use the device’s width as the layout viewport and start at a normal zoom level.
The viewport declaration does not make a page responsive by itself. A wide, fixed-width container or an image that cannot shrink may still force horizontal scrolling. Use flexible widths where appropriate, let images fit within their containers, and test the page at narrow and wide window sizes. In a browser, you can resize the window or use its device-view tools to spot overflow; checking on an actual phone can reveal issues those tools miss.
Before calling the page finished, make a short pass through the head: does the title identify this particular page, is the UTF-8 declaration near the beginning, and is there one clear viewport declaration? Then check the rendered page separately. Metadata sets useful conditions for the browser, but the visible content and layout still need their own attention.
