Skip to content

Exercises (HTML): Webmaking with HTML and CSS

Jump to bottom
Jonathan edited this page Jun 19, 2023 · 6 revisions

HTML exercises

Exercise 1: Adding content elements

Instructions

  1. Together: Review the text in the body element of index.html. Decide on its structure in terms of headings, paragraphs, and lists.
  2. Add HTML content elements h1, h2, p, ul, and li to the content, where appropriate. Try to add at least one of each element before repeating elements.

Hints

  • Elements are made using tags, which are indicated by angle brackets, i.e. < and >.
  • Element tags usually come in pairs, e.g.: <h1> and </h1>.

Code snippets

 
<h1>Level 1 heading</h1>
<h2>Level 2 heading</h2>
<p>Paragraph or other text...</p>
<ul>
  <li>First list item</li>
  <li>Second list item</li>
</ul>

Exercise 2: Emphasizing text

Instructions

Inside the HTML elements from Exercise 1, add at least 6 elements of the following content elements:

  1. <strong>
  2. <em>
  3. <mark>
  4. <small>

Try to use at each element at least once!

Hints

  • These elements will be nested within other content elements, e.g.:
<p>This is example text with <strong>some strongly emphasized words</strong>.</p>

Exercise 3: Sectioning elements

Instructions

  1. Together: Examine the text (with content elements added) in the body and add header and main elements to it.
  2. Examine the newly-created main element. Using section elements, divide main into sections. Try to make at least 3 sections.

Hints

  • Look for patterns in the text.
  • Try to create sections based on the presence of a short title followed by some other, longer content.

Code snippets
  • body, header and main 
<body>
  <header>
    <!-- Some header stuff here! -->
  </header>
  <main>
    <!-- Main web page content in here -->
  </main>
</body>
  • main and section 
<main>
  <section>
    <!-- First section content -->
  </section>
  <section>
    <!-- Second section content -->
  </section>
  <section>
    <!-- Third section content -->
  </section>
</main>

Clone this wiki locally