freecourses.digital
Lesson progress: 0 of 3 activities done
All lessons in HTML Basics for Beginners Lesson 2.3 of 34

Module 1: Introduction to HTML

  1. 1.1What is HTML?
  2. 1.2How websites work: HTML, CSS, and JavaScript
  3. 1.3HTML elements, tags, and attributes
  4. 1.4Setting up your first HTML file

Module 2: HTML Document Structure

  1. 2.1The basic HTML document
  2. 2.2DOCTYPE, html, head, and body explained
  3. 2.3The page title and metadata
  4. 2.4Writing your first webpage

Module 3: Text and Content Elements

  1. 3.1HTML headings: h1 to h6
  2. 3.2Paragraphs and line breaks
  3. 3.3Bold, emphasis, and text formatting
  4. 3.4Ordered and unordered lists

Module 4: Links and Navigation

  1. 4.1Creating links with the a tag
  2. 4.2Relative URLs and absolute URLs
  3. 4.3Linking to sections within a page
  4. 4.4Building basic website navigation

Module 5: Images and Embedded Content

  1. 5.1Adding images with the img tag
  2. 5.2Image paths and file locations
  3. 5.3Alternative text and image accessibility
  4. 5.4Embedding videos and external content

Module 6: Tables and Data

  1. 6.1Creating HTML tables
  2. 6.2Table rows, headers, and cells
  3. 6.3Organizing tabular data accessibly

Module 7: Forms and User Input

  1. 7.1Understanding HTML forms
  2. 7.2Text fields, email fields, and text areas
  3. 7.3Labels, buttons, and required fields
  4. 7.4Basic form structure and submission

Module 8: Semantic HTML and Accessibility

  1. 8.1What is semantic HTML?
  2. 8.2header, nav, main, section, and footer
  3. 8.3Using HTML to improve accessibility

Module 9: HTML for SEO

  1. 9.1HTML title tags and meta descriptions
  2. 9.2Heading hierarchy and content structure
  3. 9.3Canonical links, robots directives, and basic metadata

Module 10: Practice Project and Validation

  1. 10.1Build a simple HTML website

The page title and metadata

What we will go through

  • How the <title> tag shows in tabs and Google
  • The meta description
  • The viewport meta tag for mobile
  • Favicons and Open Graph tags for social shares

Short answer

The <title> tag names your page in the browser tab, bookmarks, and Google results. Meta tags are void elements in the head that give extra details, like a page summary or how to fit phone screens. Open Graph tags control how your link looks when shared on Facebook or Messenger.

The <title> tag

<title>Pili Tart Delivery in Legazpi | Mayon Bakeshop</title>

The title appears in the browser tab, in bookmarks, and usually as the blue headline in Google search results. Each page needs its own unique title. You will write SEO titles properly in Lesson 9.1.

Meta description and viewport

<meta name="description" content="Order fresh pili tarts in Legazpi City. Same day delivery, ₱25 per piece.">
<meta name="viewport" content="width=device-width, initial-scale=1">
  • The meta description is a short summary. Google may show it under your title.
  • The viewport meta tag tells phones to use the device width. Without it, mobile browsers shrink a desktop-size page and text becomes tiny.

Favicon

<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

A favicon is the small icon in the browser tab. It helps people find your tab and builds brand recognition. Google also shows it next to mobile results.

Open Graph tags for sharing

Most Filipino customers share links on Facebook and Messenger. Open Graph meta tags control the preview card:

<meta property="og:title" content="Fresh Pili Tarts in Legazpi">
<meta property="og:description" content="Same day delivery around Albay.">
<meta property="og:image" content="https://example.com/share.jpg">
<meta property="og:url" content="https://example.com/">

Use a share image of 1200 by 630 pixels. Without these tags, Facebook guesses, and it often picks the wrong image.

Try it: write a head

Fill in a title and a meta description for a carinderia in your town. The preview shows only the body, so check your title in the code.

Live preview

Quick quiz

1. Where does the title tag show?
2. What does the viewport tag fix?
3. Which tags control Facebook link previews?
4. Should every page have the same title?

Common mistakes

  • Missing viewport tag. Your page will look zoomed out on phones.
  • Copying one title to every page. Duplicate titles confuse visitors and Google.
  • Tiny share images. Small og:image files look blurry or get skipped.

Your action

Tick each item when you can do it. Your progress saves on this device.

Key terms

<title>
The page name shown in tabs and search results.
Meta description
A short page summary in a meta tag.
Viewport meta tag
Tells mobile browsers how to size the page.
Favicon
The small icon shown in the browser tab.
Open Graph
Meta tags that control social media share previews.

Questions beginners ask

Does the meta description help rankings?

Not directly, but a clear one can earn more clicks.

Where do I test Facebook previews?

Use the Facebook Sharing Debugger at developers.facebook.com/tools/debug.

Is a favicon required?

No, but browsers request one anyway. Adding it avoids a 404 error and looks more professional.

Related lessons

Need a website built or fixed while you practice? The team at Remar Digital can help.