Adding Content

Now you will fill your page with real content: an about section, hobbies, and a link.

Headings and Paragraphs

Headings go from <h1> (biggest) to <h6> (smallest). Use <h1> for your name and <h2> for each section.

Example

html

<h1>Ayesha Khan</h1>
<p>Student and future web developer from Karachi.</p>

<h2>About Me</h2>
<p>I am 17 years old and I study at a college in Gulshan. I love drawing and I want to design websites.</p>

A List of Hobbies

A bulleted list uses <ul> (unordered list), with each item in <li>. For a numbered list, use <ol> instead.

Example

html

<h2>My Hobbies</h2>
<ul>
  <li>Drawing</li>
  <li>Reading stories</li>
  <li>Playing cricket with my brothers</li>
</ul>

Output

My Hobbies
  • Drawing
  • Reading stories
  • Playing cricket with my brothers

Bold and Italic

Use <strong> for important words (bold) and <em> for emphasis (italic).

Example

html

<p>My goal: <strong>build my own website</strong> by <em>the end of this year</em>.</p>

Links

A link uses <a> with the address in href:

Example

html

<h2>Find Me</h2>
<p>I am learning on <a href="https://www.workownix.com">Workownix</a>.</p>
<p>Email me: <a href="mailto:ayesha@example.com">ayesha@example.com</a></p>

Images

An image uses the empty <img> tag. src is the file, and alt describes the picture for people who cannot see it.

Example

html

<img src="me.jpg" alt="Photo of Ayesha smiling" width="150">

Put your photo in the same folder as index.html and name it me.jpg. If the file is missing, the browser shows the alt text instead.

The Page So Far

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ayesha Khan</title>
</head>
<body>

  <h1>Ayesha Khan</h1>
  <p>Student and future web developer from Karachi.</p>

  <h2>About Me</h2>
  <p>I am 17 years old and I study at a college in Gulshan. My goal is to <strong>build my own website</strong> this year.</p>

  <h2>My Hobbies</h2>
  <ul>
    <li>Drawing</li>
    <li>Reading stories</li>
    <li>Playing cricket with my brothers</li>
  </ul>

  <h2>Find Me</h2>
  <p>Email me: <a href="mailto:ayesha@example.com">ayesha@example.com</a></p>

</body>
</html>

Try it Yourself »

It works, but it looks plain: black text on white. In the next chapter, CSS will change that.

Tags You Know Now

Tag	Use
`<h1>`, `<h2>`	Headings
`<p>`	Paragraph
`<ul>`, `<ol>`, `<li>`	Lists
`<strong>`, `<em>`	Bold, italic
`<a href="">`	Link
`<img src="" alt="">`	Image

Exercise

Which tags make a bulleted list?