ITC Lesson 12 Notes | Simple HTML Personal Webpage

L12

Lesson overview

Building a basic personal webpage with HTML

A personal webpage usually begins with a simple but clear HTML structure. Even without complex styling or scripts, a well organized layout using headings, paragraphs, and lists can already introduce who you are and what you do. The goal is to group related information and make the content easy to scan.

Basic HTML page skeleton

Every HTML page starts with a few basic tags. The <!DOCTYPE html> declaration tells the browser that the page uses HTML5. The <html> element wraps the entire document.

Inside the <head> section, you place the <title> tag, which sets the text that appears on the browser tab. You can also include metadata and links to CSS files here. The visible content that users see on the page goes inside the <body> tag.

Headings and paragraphs

Headings, written as <h1> to <h6>, create the hierarchy of your content. A personal webpage usually has your name inside an <h1>. Section titles such as "About Me", "Skills", or "Projects" can use <h2> and below.

Paragraphs use the <p> tag and are ideal for short descriptions. For example, under the "About Me" heading, a paragraph can describe your course, interests, and goals. Clear headings plus short paragraphs help readers quickly understand what each section is about.

Lists for skills and contact details

Lists help you present information in a quick and scannable way. An unordered list, written with <ul> and <li>, is perfect for skills, hobbies, or tools you use. An ordered list, written with <ol> and <li>, is useful when order matters, such as step by step instructions.

You can also use lists to organize contact information, such as email, social media links, or portfolio profiles, so that everything stays aligned under a heading like "Contact".

Example of a simple structure

A very simple structure might look like this:

<h1>Your Name</h1>
<h2>About Me</h2>
<p>Short introduction about your course, interests, and goals.</p>

<h2>Skills</h2>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>C Programming</li>
</ul>

<h2>Contact</h2>
<ul>
  <li>Email: you@example.com</li>
  <li>Portfolio: your-portfolio-link</li>
</ul>

By combining headings, paragraphs, and lists in a simple HTML structure, you can create a personal webpage that is clear, organized, and ready for future improvements with CSS and JavaScript.

Lesson 12

Quick reviewer

Basic HTML structure for a personal webpage.

Click or tap this card to flip and see the key points.

Lesson 12 Cheat Sheet

Short lines you can reuse in IDs and essays.

L12 · Reviewer

Basic page skeleton
A simple webpage starts with <!DOCTYPE html>, then <html>, <head> with a <title>, and a <body> for visible content.
Headings
Use <h1> to <h6> to define the structure of the page. <h1> is usually your name, while <h2> can label sections like "About Me", "Skills", and "Contact".
Paragraphs
Use <p> to write short descriptions about yourself, your course, and your interests. Paragraphs keep text readable and grouped by idea.
Lists
Unordered lists with <ul> and <li> are great for skills, tools, and contact items. Ordered lists with <ol> are useful for step by step instructions.
Simple example
A common pattern is: <h1> for your name, <h2> for sections, paragraphs for details, and lists for skills and contact information.
One sentence answer
“A simple personal webpage uses a basic HTML skeleton with headings, paragraphs, and lists to present information in a clear and organized way.”