Build a Wikipedia Page | HTML Tutorial

1

Create the file and write the DOCTYPE ›

Create a new file called index.html and type the page skeleton.

Every HTML page must start with these exact lines. Open VS Code, create a new file, save it as index.html, then type this:

Type this — line by line

Line 1 → <!DOCTYPE html> — tells the browser this is an HTML5 file

Line 2 → <html> — opens the whole page

Line 3 → <head> — opens the invisible settings section

Line 4 → <title>Nadia — Wikipedia</title> — the name shown on the browser tab

Line 5 → </head> — closes the settings section

Line 6 → <body> — opens the visible part of the page

Line 7 → leave blank — all your content goes here

Line 8 → </body> — closes the visible section

Line 9 → </html> — closes the whole page

💡 Good habit — save your file as .html not .txt. Then open the file in Chrome to see your page live after every step.

<!DOCTYPE html>
<html>
  <head>
    <title>Nadia — Wikipedia</title>
  </head>
  <body>

  </body>
</html>

Want to learn more? Read our Introduction to HTML article ›

2

Add the page title — h1 ›

Add a heading 1 and write Nadia as the text.

Inside <body>, on the blank line, type your h1 tag. This is the biggest heading on the page — it is the article title, just like the large bold name at the top of every Wikipedia article.

Type this inside <body>

→ <h1>Nadia</h1>

Save the file and open it in Chrome. You should see the word Nadia appear as a large bold heading at the top of the page.

💡 Good habit — only ever use h1 once per page. It is the main title, like the front cover of a book. Everything else uses h2, h3 and so on.

<body>
  <h1>Nadia</h1>
</body>

Want to learn more? Read our Headings article ›

3

Add all section headings — h2 ›

After the h1, add 7 section headings using h2 — one for each section of the article.

These are the bold section titles you see on every Wikipedia page. Type each one on its own line, right after your <h1>Nadia</h1>:

Type each of these after your h1

→ <h2>Early life</h2>

→ <h2>Career</h2>

→ <h2>Teaching and mentorship</h2>

→ <h2>YouTube channel</h2>

→ <h2>Recognition and awards</h2>

→ <h2>Personal life</h2>

→ <h2>References</h2>

Save and refresh Chrome. You should now see 7 smaller headings appear below Nadia on the page.

💡 Good habit — write all your h2 headings first like a skeleton outline, then go back and fill content underneath each one.

<h1>Nadia</h1>
<h2>Early life</h2>
<h2>Career</h2>
<h2>Teaching and mentorship</h2>
<h2>YouTube channel</h2>
<h2>Recognition and awards</h2>
<h2>Personal life</h2>
<h2>References</h2>

Want to learn more? Read our Headings article ›

4

Wrap in sections and add sub-headings — section and h3 ›

Wrap each h2 in a <section> tag, then add 3 h3 sub-headings inside the Career section.

A <section> tag groups related content together. Find your <h2>Career</h2> line and wrap it like this. Then add the 3 sub-headings inside it:

Replace your Career h2 with this

→ <section>

→ <h2>Career</h2>

→ <h3>2010–2015: Early career and breakthrough</h3>

→ <h3>2015–2020: YouTube success and educational impact</h3>

→ <h3>2020–present: FAANG achievement and continued excellence</h3>

→ </section>

Do the same for all other h2 sections — wrap each one in <section></section>. Only Career needs h3 sub-headings for now.

💡 Good habit — always close your <section> tag. Every opening tag needs a matching closing tag or your page layout will break.

<section>
  <h2>Career</h2>
  <h3>2010–2015: Early career and breakthrough</h3>
  <h3>2015–2020: YouTube success and educational impact</h3>
  <h3>2020–present: FAANG achievement and continued excellence</h3>
</section>

Want to learn more? Read our Semantic HTML article ›

5

Add paragraphs — p ›

Go to the Early life section and add two paragraphs under the h2.

Body text always goes inside <p> tags. After your <h2>Early life</h2>, type these two paragraphs. You can copy the exact text below, or write your own — just keep it inside <p></p>:

Type these after <h2>Early life</h2>

→

<p>Nadia was born in 1988 and showed an early aptitude for technology and problem-solving. Growing up during the dawn of the internet age, she developed a fascination with how websites worked.</p>

→

<p>Her academic excellence earned her a prestigious scholarship to attend university, where she pursued Computer Science with a focus on web technologies and software engineering.</p>

💡 Good habit — never leave raw text floating inside <body> without a tag. Always wrap body text in <p></p>.

<section>
  <h2>Early life</h2>
  <p>Nadia was born in 1988 and showed an early aptitude
  for technology and problem-solving.</p>
  <p>Her academic excellence earned her a prestigious
  scholarship to attend university.</p>
</section>

Want to learn more? Read our HTML Tags article ›

6

Add images — img ›

Inside the Career section, add two images using the img tag.

The img tag has no closing tag — it is self-closing. It needs src (the file name) and alt (a description of the image). Type these two lines inside your Career section:

Type these inside your Career section

→ <img src="nadia-desk.jpg" alt="Nadia at her desk in 2012" width="300">

→ <img src="nadia-reactconf.jpg" alt="Nadia speaking at ReactConf 2019" width="300">

The images will show as broken for now because the files don't exist yet — that is fine. Once you save a real photo with that name in the same folder, it will appear.

💡 Good habit — always write the alt text. It shows if the image is missing and it helps blind users who use screen readers to hear what the image is.

<img src="nadia-desk.jpg"
     alt="Nadia at her desk in 2012"
     width="300">

<img src="nadia-reactconf.jpg"
     alt="Nadia speaking at ReactConf 2019"
     width="300">

Want to learn more? Read our Images article ›

7

Add lists — ol numbered and ul bullets ›

Add a numbered list in Recognition and awards, and a bullet list in YouTube channel.

Use <ol> for a numbered list and <ul> for bullets. Each item inside both goes in an <li> tag. Type the numbered list first:

Type this in your Recognition and awards section

→ <ol>

→ <li>Top 100 Tech Influencers — TechCrunch 2019, 2021, 2023</li>

→ <li>YouTube Creator Award for 1 million subscribers</li>

→ <li>Excellence in STEM Education — National Education Association</li>

→ </ol>

Now type the bullet list in the YouTube channel section:

Type this in your YouTube channel section

→ <ul>

→ <li>Build Real Projects</li>

→ <li>5-Minute Concepts</li>

→ <li>Interview Prep</li>

→ <li>Career Talks</li>

→ </ul>

💡 Good habit — use ol when order matters like rankings or steps. Use ul when order does not matter like a list of features or series names.

<ol>
  <li>Top 100 Tech Influencers — TechCrunch 2019, 2021, 2023</li>
  <li>YouTube Creator Award for 1 million subscribers</li>
  <li>Excellence in STEM Education</li>
</ol>

<ul>
  <li>Build Real Projects</li>
  <li>5-Minute Concepts</li>
  <li>Interview Prep</li>
  <li>Career Talks</li>
</ul>

Want to learn more? Read our Lists article ›

8

Add a table — the sidebar info box ›

Create a table with 5 rows showing Nadia's key info — just like the info box on the real Wikipedia page.

A table uses <table> to start it, <tr> for each row, <th> for the label cell on the left, and <td> for the value cell on the right. Type all of this:

Type this — you can put it anywhere on the page

→ <table>

→ <tr><th>Born</th><td>1988 (age 36–37)</td></tr>

→ <tr><th>Nationality</th><td>American</td></tr>

→ <tr><th>Occupation</th><td>Software Engineer, Educator, YouTuber</td></tr>

→ <tr><th>Years active</th><td>2010–present</td></tr>

→ <tr><th>Subscribers</th><td>2.5 million</td></tr>

→ </table>

💡 Good habit — use <th> for label cells. It makes them bold automatically and tells screen readers those cells are headers, not data.

<table>
  <tr><th>Born</th><td>1988 (age 36–37)</td></tr>
  <tr><th>Nationality</th><td>American</td></tr>
  <tr><th>Occupation</th><td>Software Engineer, Educator, YouTuber</td></tr>
  <tr><th>Years active</th><td>2010–present</td></tr>
  <tr><th>Subscribers</th><td>2.5 million</td></tr>
</table>

Want to learn more? Read our Tables article ›

9

Add links — a href ›

In the References section, add two clickable links using the a tag.

A link uses <a> with an href attribute for the URL. The text between the tags is what the user clicks. Adding target="_blank" makes it open in a new tab. Type these in your References section:

Type this inside your References section

→ <ul>

→ <li><a href="https://youtube.com" target="_blank">Nadia's YouTube Channel</a></li>

→ <li><a href="https://github.com" target="_blank">Nadia's GitHub Profile</a></li>

→ </ul>

Save and refresh. You should see two blue underlined links. Click them — they should open YouTube and GitHub in a new tab.

💡 Good habit — never write "click here" as the link text. Always describe where the link goes, like "Nadia's YouTube Channel". Screen readers read link text out loud to blind users.

<section>
  <h2>References</h2>
  <ul>
    <li><a href="https://youtube.com" target="_blank">Nadia's YouTube Channel</a></li>
    <li><a href="https://github.com" target="_blank">Nadia's GitHub Profile</a></li>
  </ul>
</section>

Want to learn more? Read our Links article ›

10

Add the search bar at the top — header and input ›

At the very top of <body>, before everything else, add a header with a search bar — just like Wikipedia's search at the top.

The <header> tag goes first inside <body>, before your h1. Inside it you put the site name, a text input, and a button. Type this as the very first thing inside <body>:

Type this as the first thing inside <body> — before your h1

→ <header>

→ <strong>Wikipedia</strong>

→ <input type="text" placeholder="Search Wikipedia">

→ <button>Search</button>

→ </header>

Save and refresh. You should see "Wikipedia", a text box, and a Search button appear at the top of the page.

💡 Good habit — <header> always goes at the top of the page. It holds the logo, navigation, and search bar — things that appear on every page of a website.

<body>
  <header>
    <strong>Wikipedia</strong>
    <input type="text" placeholder="Search Wikipedia">
    <button>Search</button>
  </header>

  <h1>Nadia</h1>
  ...
</body>

Want to learn more? Read our Semantic HTML article ›

11

Add radio buttons — page appearance options ›

Add a fieldset with 3 radio buttons letting the user pick a page appearance — Standard, Wide, or Compact.

Radio buttons let users pick one option from a group. They all share the same name so only one can be selected at a time. A <fieldset> groups them and <legend> gives them a title. Type this anywhere on your page — try it inside the header or just below it:

Type this — inside or below your header

→ <fieldset>

→ <legend>Page appearance</legend>

→ <input type="radio" name="appearance" id="std" checked>

→ <label for="std">Standard</label>

→ <input type="radio" name="appearance" id="wide">

→ <label for="wide">Wide</label>

→ <input type="radio" name="appearance" id="compact">

→ <label for="compact">Compact</label>

→ </fieldset>

Save and refresh. You should see a box with 3 radio buttons. Try clicking each one — only one can be selected at a time.

💡 Good habit — every radio button needs a matching <label for="..."> using the same id. This makes the label clickable and helps screen readers describe each option.

<fieldset>
  <legend>Page appearance</legend>
  <input type="radio" name="appearance" id="std" checked>
  <label for="std">Standard</label>
  <input type="radio" name="appearance" id="wide">
  <label for="wide">Wide</label>
  <input type="radio" name="appearance" id="compact">
  <label for="compact">Compact</label>
</fieldset>

Want to learn more? Read our Fieldset and Legend article ›

Build a Wikipedia Page in HTML