HTML · Lesson 2
Adding content to your page
In Lesson 1 you built the frame of a page. Now let's fill the <body> with real content: headings, text, lists, pictures, links, tables and input boxes.
Content tags tell the browser what each piece of your page is: a heading, a paragraph, a list, a picture, a link. The browser then shows each piece in a fitting way. Headings are big and bold, list items get bullets, and links are blue and clickable.
Think of a newspaper. It has the paper's name in huge letters at the top, section names, headlines, stories, photos, short lists, small tables like the weather, and a coupon you can fill in. A web page is built from the same kinds of pieces, and HTML has a tag for each one.
Each green pair wraps around what it holds: the opening tag comes before the content and the closing tag comes right after it.
Pairs can sit inside other pairs. Each <li> item is inside the <ul> list, and everything is inside <body>.
The yellow tags, <img> and <input>, have nothing to wrap, so they have no closing tag.
HTML has six heading levels, from <h1> to <h6>. <h1> is the most important and the biggest, so use it once per page for the main title.
Use <h2> for sections and <h3> for parts inside a section, like chapters and sub-chapters in a book.
Choose a heading by how important it is, not by how big it looks. You'll learn to change sizes with CSS later.
Most tags wrap around content, so they need a closing tag. A few tags have nothing to wrap, so they have no closing tag. These are called empty tags. You may also see them called self-closing or void tags. All three names mean the same thing.
An empty tag keeps all its information inside the opening tag, like src (which picture to show) and alt (a short description) on <img>. These extra details are called attributes, and Lesson 4 covers them.
These are the empty tags you'll meet most often:
<img> shows a picture.<input> makes a box people can type in.<br> starts a new line inside the same block of text, like the lines of an address.<hr> draws a line across the page to split two parts, like two news stories.<meta> and <link> sit inside <head>. <meta> gives extra information about the page, and <link> connects a file to the page, like a CSS file. You'll use <link> again in the CSS lessons and exercises.
On other websites you may see a slash at the end, like <br /> or <img src="logo.png" alt="Logo" />. In HTML, both ways work the same. These lessons write empty tags without the slash.
The one thing to leave out is a closing tag, like </img> or </br>. The browser skips the first one and reads the second one as another <br>. Common mistakes, further down, shows what happens.
Some elements always start on a new line and take up the full width, like headings, paragraphs, lists and tables. Others sit inside a line of text, like links. That's why a link can appear in the middle of a sentence.
<iframe> shows another web page inside your page, like a small window. Its src says which page to show.
Many websites don't allow being shown this way, and the mini browsers in these lessons block it for safety, so this one has no live example.
Let's write a news story for Front Page Bytes. Each step shows the whole page, with the frame from Lesson 1 around it. The new content goes inside <body>, and new lines are highlighted.
Steps 1 to 5 build one story. Steps 6 and 7 are two small extras.
<!DOCTYPE html><html lang="en"> <head> <title>Front Page Bytes</title> </head> <body> <h1>Front Page Bytes</h1> <h2>Tech News</h2> <h3>New Phones Arrive This Week</h3> </body></html>
<h1> is the name of the site, <h2> is the section, and <h3> is the story's headline. Each level is a little smaller than the one before.
<!DOCTYPE html><html lang="en"> <head> <title>Front Page Bytes</title> </head> <body> <h1>Front Page Bytes</h1> <h2>Tech News</h2> <h3>New Phones Arrive This Week</h3> <p>Three new phones go on sale on Friday. Each one has a bigger battery and a sharper camera.</p> </body></html>
<p> holds a block of text. The browser adds a little space above and below each paragraph, so they don't run together.
<!DOCTYPE html><html lang="en"> <head> <title>Front Page Bytes</title> </head> <body> <h1>Front Page Bytes</h1> <h2>Tech News</h2> <h3>New Phones Arrive This Week</h3> <p>Three new phones go on sale on Friday. Each one has a bigger battery and a sharper camera.</p> <ul> <li>Bigger batteries</li> <li>Sharper cameras</li> <li>Faster charging</li> </ul> </body></html>
<ul> starts a bulleted list, and each item goes inside its own <li>.
Change <ul> to <ol> (and </ul> to </ol>) and the bullets become numbers: 1, 2, 3.
<!DOCTYPE html><html lang="en"> <head> <title>Front Page Bytes</title> </head> <body> <h1>Front Page Bytes</h1> <h2>Tech News</h2> <h3>New Phones Arrive This Week</h3> <img src="/storage/assets/WebcoreIcon.png" alt="WebCore logo" width="120"> <p>Three new phones go on sale on Friday. Each one has a bigger battery and a sharper camera.</p> <ul> <li>Bigger batteries</li> <li>Sharper cameras</li> <li>Faster charging</li> </ul> </body></html>
<img> shows a picture. src says where the picture file is, alt describes it in words, and width sets its width in pixels.
There's no closing tag, because the image doesn't wrap around any text.
<!DOCTYPE html><html lang="en"> <head> <title>Front Page Bytes</title> </head> <body> <h1>Front Page Bytes</h1> <h2>Tech News</h2> <h3>New Phones Arrive This Week</h3> <img src="/storage/assets/WebcoreIcon.png" alt="WebCore logo" width="120"> <p>Three new phones go on sale on Friday. Each one has a bigger battery and a sharper camera.</p> <ul> <li>Bigger batteries</li> <li>Sharper cameras</li> <li>Faster charging</li> </ul> <a href="/news/phones">Read the full story</a> </body></html>
<a> makes a link. href is where it goes, and the text between the tags is what people click.
Links in these mini browsers don't open, so you stay on the lesson.
<!DOCTYPE html><html lang="en"> <head> <title>Front Page Bytes</title> </head> <body> <h2>Weather Today</h2> <table> <tr> <th>City</th> <th>Weather</th> </tr> <tr> <td>Cebu</td> <td>Sunny</td> </tr> <tr> <td>Manila</td> <td>Rainy</td> </tr> </table> </body></html>
A table is built row by row. <table> wraps everything, each <tr> is one row, <th> is a header cell (shown in bold), and <td> is a normal cell.
Tables have no lines around the cells yet. You'll add those with CSS.
<!DOCTYPE html><html lang="en"> <head> <title>Front Page Bytes</title> </head> <body> <h2>Get the Newsletter</h2> <p>Type your email address:</p> <input type="email" placeholder="you@example.com"> </body></html>
<input> makes a box visitors can type in. Try typing in the mini browser!
type="email" says what kind of input it is, and placeholder is the grey hint text that disappears when you type. Like <img>, it has no closing tag.
<h1> to <h6>
Headings, biggest to smallest
<h2>Tech News</h2>How to use
<h1>
The main title. Use it once per page.
<h2>
A section of the page.
<h3> to <h6>
Smaller parts inside a section.
Examples
The site name, a section, and a story title.
<h1>Front Page Bytes</h1><h2>Tech News</h2><h3>New Phones Arrive</h3>Two sections on one page.
<h2>Tech News</h2><h2>Game Reviews</h2><p>
Paragraph
<p>Your text here.</p>How to use
Examples
Two short paragraphs in a story.
<p>Three new phones go on sale on Friday.</p><p>Prices start at ₱9,999.</p>A short note under a heading.
<h2>Weather Today</h2><p>Sunny in Cebu.</p><ul> <li>
Bulleted list
<ul> <li>Item</li> </ul>How to use
<ul>
Wraps the whole list.
<li>
One item. Add one <li> for each item.
Examples
The features of a new phone.
<ul> <li>Bigger battery</li> <li>Sharper camera</li></ul>A small menu of links.
<ul> <li><a href="/news">News</a></li> <li><a href="/games">Games</a></li></ul><ol> <li>
Numbered list
<ol> <li>First</li> </ol>How to use
<ol>
Wraps the list and numbers the items 1, 2, 3.
<li>
One item. Add one <li> for each item.
Examples
Steps to follow in order.
<ol> <li>Open the app.</li> <li>Tap Sign up.</li> <li>Type your email.</li></ol>A top 3 ranking.
<ol> <li>Phone A</li> <li>Phone B</li> <li>Phone C</li></ol><img>
Image (no closing tag)
<img src="photo.jpg" alt="A short description">How to use
src
The picture file to show.
alt
A few words that describe the picture.
width / height
The size in pixels, like width="120".
Examples
A logo at a set width.
<img src="logo.png" alt="Front Page Bytes logo" width="120">A photo for a news story.
<img src="phone.jpg" alt="A red phone on a desk">A picture from another website.
<img src="https://example.com/cat.jpg" alt="A sleeping cat"><a>
Link
<a href="/news">Read more</a>How to use
href
Where the link goes.
Text between the tags
What people click.
Examples
A link to another page on your site.
<a href="/news">Read the news</a>A link to another website.
<a href="https://www.wikipedia.org">Wikipedia</a>A link in the middle of a sentence.
<p>Read the <a href="/news/phones">full story</a> here.</p><table> <tr> <th> <td>
Table, row, header cell, cell
<tr> <td>Cebu</td> </tr>How to use
<table>
Wraps the whole table.
<tr>
One row. It holds the cells.
<th>
A header cell, shown in bold.
<td>
A normal cell.
Examples
A weather table.
<table> <tr><th>City</th><th>Weather</th></tr> <tr><td>Cebu</td><td>Sunny</td></tr></table>A price list.
<table> <tr><th>Phone</th><th>Price</th></tr> <tr><td>Phone A</td><td>₱9,999</td></tr></table><input>
Box to type in (no closing tag)
<input type="email">How to use
type
The kind of box: text, email, password, checkbox.
placeholder
Grey hint text that goes away when you type.
name
A label for the answer when a form is sent.
Examples
A box for an email address.
<input type="email" placeholder="you@example.com">A password box that shows dots instead of letters.
<input type="password">A checkbox people can tick.
<input type="checkbox"> Send me news<iframe>
A page inside your page
<iframe src="page.html"></iframe>How to use
src
The page to show inside the small window.
width / height
The size of the window.
Examples
Show another page of your own site in a small window.
<iframe src="/weather" width="300" height="200"></iframe>Show a video from a site that allows it, using the address that site gives you.
<iframe src="https://www.youtube.com/embed/VIDEO-ID"></iframe><br> <hr>
New line and dividing line (no closing tag)
<p>Line one<br>Line two</p>How to use
<br>
Starts a new line inside the same block of text.
<hr>
Draws a line across the page to split two parts.
Examples
An address on two lines.
<p>Front Page Bytes<br>12 Rizal Street, Manila</p>A line between two stories.
<h3>New Phones Arrive</h3><hr><h3>Jeepney Fares Go Up</h3>These are mistakes many beginners make. Each mini browser shows what really happens.
<!DOCTYPE html><html lang="en"> <head> <title>Front Page Bytes</title> </head> <body> <h1>Front Page Bytes <p>Your daily tech news, made simple.</p> <p>New phones arrive this week.</p> </body></html>
Without </h1>, the browser treats the paragraphs below as part of the heading, so all the text becomes big and bold.
Tip: Close each heading on the same line: <h1>Front Page Bytes</h1>
<!DOCTYPE html><html lang="en"> <head> <title>Front Page Bytes</title> </head> <body> <p><a>Read the full story</a></p> </body></html>
Without href, the browser doesn't know where the link goes, so it shows plain black text with nothing to click.
Tip: Give every link an href: <a href="/news/phones">Read the full story</a>
<!DOCTYPE html><html lang="en"> <head> <title>Front Page Bytes</title> </head> <body> <img src="banner.jpg" alt="Front Page Bytes banner"> </body></html>
There's no picture file called banner.jpg here, so the browser shows a broken-image icon and the alt text instead. Screen readers also read the alt text aloud.
Tip: Check the file name and folder in src. Keep a clear alt text, because it shows whenever the picture can't load.
<!DOCTYPE html><html lang="en"> <head> <title>Front Page Bytes</title> </head> <body> <p>Front Page Bytes<br></br>12 Rizal Street, Manila</p> </body></html>
The address was meant to be on two lines, but there's an extra blank line between them. The browser reads </br> as a second <br>, so it starts two new lines instead of one.
Tip: Write <br> on its own. Empty tags like <br>, <img> and <input> have nothing inside, so they have no closing tag.
Edit the code on the left. The mini browser updates as you type, and each goal gets a check mark when it's done.
No clicking needed. Each goal gets a check mark by itself once your code does it.
Nice work! You finished every goal.
<h1> to <h6> show what's most important. <p> holds blocks of text.<ul> and <ol> make lists, with each item in <li>. <img> shows pictures and <a href> makes links.<table> shows rows and columns, and <input> lets visitors type. <img>, <input>, <br> and <hr> are empty tags: they have no closing tag.Lesson content prepared by the WebCore F.E. team for beginner learners. The following references were used in preparing this lesson.