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 >