Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript Basics (Retired) Making Decisions with Conditional Statements Build a Random Number Guessing Game

Why 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
LaVaughn Haynes
12,397 Points

That'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.

http://teamtreehouse.com/library/html

Michael L
Michael L
2,482 Points

Had 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
LaVaughn Haynes
12,397 Points

The 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
Michael L
2,482 Points

Perfect! LaVaughn - thank you for such a thorough and prompt answer - this helps.

Best regards, Michael

To 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.