<title>
tag and the
<h1>
tag, and why should they not be identical?<title>
tag lives in
<head>
and appears in the browser tab and as the clickable blue link in search results — it is written for search result pages, targeting the keyword a user would search for. The
<h1>
lives in the page body and is the first thing a visitor reads after clicking through — it is written for the human already on your page. Differentiating them lets you target a broader range of keywords and gives users a better experience.
<title>
tag is the single strongest on-page ranking signal. The
<meta name="description">
does not directly affect ranking but determines the text shown below your link in search results — the text that convinces a user to click. Together they are the first impression of every page you publish.<h1>
through
<h6>)
signal the topic hierarchy of your page to search engines — the same way a table of contents signals a book's structure to a reader. Search engines weight content in higher headings more heavily. A single, clear
<h1>
that names the page topic, followed by
<h2>
headings for major sections, gives both users and crawlers a clear map.<article>
is weighted as primary content. Content in
<aside>
is treated as supplementary. Image
alt
text is indexed and affects image search rankings.
<a href>
links in
<nav>
signal which pages are important enough to link to from every page. Bad or absent HTML structure does not just hurt accessibility — it actively hides your content from search engines.<title>
— the most important tag — This is what appears as the clickable blue headline in Google search results and in the browser tab. Keep it under 60 characters — longer titles are truncated in search results. Put the most important keyword near the beginning. Include your brand name at the end after a dash or pipe. Write it for someone who has not seen your page yet and needs to decide whether to click: "HTML Forms Tutorial – Learn Web Development | Acme" tells them exactly what they will get.
<meta name="description"> — This text appears below your title link in search results. It does not directly affect your ranking, but it determines your click-through rate — how many people who see your link actually click it. A compelling, accurate description of 150–160 characters that answers "why should I click this?" improves your effective traffic even without changing your position. Google sometimes overrides it with text from the page if it thinks the page text is more relevant to the specific query.
<h1>
per page, then ordered hierarchy — The
<h1>
names the page topic for both humans and search engines. Multiple
<h1>
tags on one page dilute its signal — search engines cannot tell which one is primary. From there, use
<h2>
for major sections and
<h3>
for sub-sections within those. The goal is a heading outline that reads like a clear table of contents even without the body text.
lang
on
<html>
and
<meta charset> — The
lang="en"
attribute tells search engines which language the page is in — critical for appearing in the right regional search results and for screen readers to use the correct pronunciation engine. The
<meta charset="UTF-8">
ensures special characters display correctly in every browser and language. Both belong on every page you publish, and both must be the first things inside
<head>.
<link rel="canonical"> — If the same content appears at multiple URLs (http vs https, with and without trailing slash, paginated versions), search engines may treat them as competing copies and split their ranking between them. The canonical link tells search engines: "this is the authoritative URL for this content — credit all others to this one." Always point canonical to the clean, preferred URL of each page.
<h1>
and logical
<h2>
structure is among the most reliable ways to help a search engine understand what your page is primarily about.<article>
is treated as primary. Alt text on images is indexed for image search. Links in
<nav>
signal site structure. Everything in this course contributes to search ranking — there is no separate "SEO step" if you write correct HTML from the start.<meta name="viewport" content="width=device-width, initial-scale=1.0">
is the HTML signal that tells the browser to scale the layout to the device width. Without it, mobile users see a desktop-sized page shrunk to fit — and Google notices.<head>
into ChatGPT and ask: "Is this title under 60 characters, keyword-first, and does the meta description accurately summarise the page in under 160 characters?" It is good at length checks and suggesting stronger keyword placement. Be cautious if it suggests adding
<meta name="keywords">
— that tag has been ignored by Google since 2009 and is not worth adding.
<title>
for a page about HTML forms. Put the main keyword first, keep it under 60 characters, and end with your site name. Then check the length in a plain text editor — count manually or use a free title tag preview tool.<meta name="description">
for the same page. It should be 150–160 characters, answer "what will I get from this page?", and include a natural keyword without repeating the title word for word.document.querySelectorAll('h1,h2,h3,h4,h5,h6')
to list every heading on the page. Confirm there is one
h1,
the hierarchy is unbroken, and the heading text describes each section accurately.lang="en"
to your
<html>
tag and
<meta charset="UTF-8">
as the first element in
<head>
on every page you have built so far if it is not already there.<title>
on every page — often "Home" or the site name alone. Search engines treat duplicate titles as low-quality signals and cannot distinguish your pages from each other. Every page must have a unique, descriptive title that matches that page's specific content.<title>
over 60 characters. Google truncates long titles with an ellipsis in search results — your most important words may be cut off. Put the keyword first so even a truncated title still communicates the page topic.<h1>
on a page. Modern HTML technically allows it, but practically it dilutes the topic signal. A search engine presented with three
<h1>
tags — "Services", "About Us", "Contact" — cannot determine which one defines the page. Use one
<h1>
and
<h2>
for everything else.<head>.<title>
under 60 characters and a compelling
<meta name="description">
under 160 characters for any page — use one
<h1>,
maintain an ordered heading hierarchy, and explain how semantic HTML structure directly contributes to search engine ranking.
Welcome back to Jit4All