Start learning free

LESSON 2 OF 161 · FRONTEND: HTML

Headings and Paragraphs in JavaScript

Practice

Headings are the outline of a page, like the chapters of a book. h1 is the title of the whole page, h2 is a part of it, h3 a part of a part, and so on down to h6. Pick the level by where the heading sits in the outline, never by how big it looks: sizes are the job of CSS, later.

Inside a paragraph, two elements give words a meaning. strong marks words as important (browsers show them bold). em marks stress, the word you would say louder (browsers show it in italics). On a bakery page:

<h2>Cakes</h2>
<p>Cakes to order, <strong>two days ahead</strong>.</p>
<p>Yes, we <em>do</em> bake on Mondays.</p>

The check prints each heading with its level and each paragraph as a text line. Words in strong or em stay inside their sentence, on the same line. Your page must print:

> open the page
  screen:
    heading 1: Corner Shop
    text: Mugs, lamps, plants and more, a short walk from home.
    heading 2: Our products
    text: Eight things for home and office, from a $2 pen to a $50 gift card, and every price includes tax.
    heading 2: Opening hours
    text: Monday to Saturday, 9 am to 6 pm. We are closed on Sundays.

Your task: under the first paragraph, add an h2 Our products and its paragraph, with every price includes tax in strong. Then add an h2 Opening hours and its paragraph, with the word closed in em.


Assignment
Follow the Coding Tutorial to give the home page two parts, each with an h2 heading and a paragraph, and to mark one important phrase and one stressed word.


Hint
Opening hours sits beside Our products, not inside it, so it is an h2 too. strong and em go inside the p, around just their words; the full stop stays outside strong.


STEP 1 OF 4
    Ctrl + Enter to check

    Html Headings Text in JavaScript

    Keep going with JavaScript1,600+ step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free