2018-09-30 23:01:58 +01:00
---
id: bad87fee1348bd9aedf0887a
title: Headline with the h2 Element
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gqf3'
2019-07-31 11:32:23 -07:00
forumTopicId: 18196
2018-09-30 23:01:58 +01:00
---
## Description
<section id='description'>
Over the next few lessons, we'll build an HTML5 cat photo web app piece-by-piece.
The <code>h2</code> element you will be adding in this step will add a level two heading to the web page.
This element tells the browser about the structure of your website. <code>h1</code> elements are often used for main headings, while <code>h2</code> elements are generally used for subheadings. There are also <code>h3</code>, <code>h4</code>, <code>h5</code> and <code>h6</code> elements to indicate different levels of subheadings.
</section>
## Instructions
<section id='instructions'>
2019-10-27 15:45:37 -01:00
Add an <code>h2</code> tag that says "CatPhotoApp" to create a second HTML element below your "Hello World" <code>h1</code> element.
2018-09-30 23:01:58 +01:00
</section>
## Tests
<section id='tests'>
```yml
2018-10-04 14:37:37 +01:00
tests:
2019-11-20 06:45:19 -08:00
- text: You should create an <code>h2</code> element.
2019-07-24 02:50:51 -07:00
testString: assert(($("h2").length > 0));
2019-11-20 06:45:19 -08:00
- text: Your <code>h2</code> element should have a closing tag.
2019-07-24 02:50:51 -07:00
testString: assert(code.match(/<\/h2>/g) && code.match(/<\/h2>/g).length === code.match(/<h2>/g).length);
2020-08-31 04:53:09 +01:00
- text: Your <code>h2</code> element should have the text <code>CatPhotoApp</code>.
2019-07-24 02:50:51 -07:00
testString: assert.isTrue((/cat(\s)?photo(\s)?app/gi).test($("h2").text()));
2020-08-31 04:53:09 +01:00
- text: Your <code>h1</code> element should have the text <code>Hello World</code>.
2019-07-24 02:50:51 -07:00
testString: assert.isTrue((/hello(\s)+world/gi).test($("h1").text()));
2020-08-30 20:13:30 -07:00
- text: Your <code>h1</code> element should be before your <code>h2</code> element.
testString: assert(code.match(/<h1>\s*?.*?\s*?<\/h1>\s*<h2>\s*?.*?\s*?<\/h2>/gi));
2018-09-30 23:01:58 +01:00
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<h1>Hello World</h1>
```
</div>
</section>
## Solution
2019-01-25 21:49:27 +05:30
<section id='solution'>
2020-07-08 22:13:02 +02:00
2019-01-25 21:49:27 +05:30
```html
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
2018-09-30 23:01:58 +01:00
```
2019-01-25 21:49:27 +05:30
</section>