Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
corneliawright
1,073 PointsWhy are you using <p> </p> or <h> </h> in the program?
Is it necessary? If so, how does it effect how the program runs?
4 Answers
LaVaughn Haynes
12,397 PointsThat's just HTML. It's not necessary for JavaScript to work but it makes any text you are outputting to the page look nicer. If you are not familiar with HTML you should check out the HTML Basics course. HTML is pretty easy to learn and you'll definitely want to learn it if you are working with JavaScript.
Michael L
2,482 PointsHad exactly the same question... The answer from LaVaughn is helpful. Could someone please also expand how exactly this interaction of JS and HTML would work, maybe with some example? What exactly would happen if JS is used with HTML and the < p > tags are not used?
Thank you much in advance!
LaVaughn Haynes
12,397 PointsThe JS is just writing the HTML to the page. Below is the HTML being written and what it would output.
<!-- with the tags -->
<h1>Random Number Guessing Game</h1>
<p>You guessed the number!</p>
Random Number Guessing Game
You guessed the number!
<!-- without the tags -->
Random Number Guessing Game
You guessed the number!
Random Number Guessing Game You guessed the number!
What's going on?
The HTML is just making it more readable. Using the H1 tag tells the browser to make the text larger and bold like the heading of a news article. Also, H1 and P are both Block Elements which means that nothing can be placed next to them... so they will take up a whole line.
In the second example with no tags, all of the text is the same size. Both the header and response text will also output on the same line since there are no tags that tell the browser they should be on separate lines.
If you launch your workspace for that project you'll be able to remove tags and experiment. Make sure that the code @1:49 is in your JS file. https://teamtreehouse.com/library/javascript-basics-2/making-decisions-with-conditional-statements/build-a-random-number-guessing-game
Note: If you take a look at the CSS file you will see that he has included specific instructions for how text in H1 or P tags should look. You will lose that styling if you don't use the tags.
h1,
h2 {
font-size: 2.4em;
font-weight: 400;
margin-bottom: 8px;
color: #384047;
line-height: 1.2;
}
p {
color: #8d9aa5;
font-size: 1.4em;
margin-bottom: 15px;
line-height: 1.4;
}
To answer your question, If you just removed the P tag it would still print on a separate line as long as the H1 tag is there BUT you would just lose the CSS styles above which say that any text in a P tag should be this color (#8d9aa5) and this size (1.4em), and so on.
Michael L
2,482 PointsPerfect! LaVaughn - thank you for such a thorough and prompt answer - this helps.
Best regards, Michael
Lauri Neuding
13,525 PointsTo add to this...I didn't know you could put html tags into JavaScript like this. I just got done with a college class on JavaScript and we weren't shown this or the prompt command. Usually, I have to get out a telescope to view messages that haven't been tagged with html. It's a handy shortcut. Now I set them as h1 (doing these exercises) for comfortable viewing on my monitor.