H1

H2

H3

H4

H5

H6

Paragraph Tag

This is a paragraph. We often separate a long set of sentences with vertical spaces to make the text easier to read. Browsers ignore vertical white spaces and render all the text as one single set of sentences. To force the browser to add vertical spacing, wrap the paragraphs you want to separate with the paragraph tag

This is the first paragraph. The paragraph tag is used to format vertical gaps between long pieces of text like this one.

This is the second paragraph. Even though there is a deliberate white gap between the paragraph above and this paragraph, by default browsers render them as one contiguous piece of text as shown here on the right.

This is the third paragraph. Wrap each paragraph with the paragraph tag to tell browsers to render the gaps.

Hi, my name is Zhenming Gao. I'm currently a MSCS student at Northeastern.

For something easier to pronounce, you can call me Evan.

Browsers collapse runs of whitespace and newlines in the source into a single space, so blank lines in the HTML do nothing on their own. The paragraph tag creates a block-level box that starts on its own line, and the browser's default stylesheet gives it a top and bottom margin of 1em. That margin, not the whitespace in the source, is what produces the vertical gap between paragraphs.

List Tags

Ordered List Tag

1. Mix dry ingredients.
2. Add wet ingredients.
3. Stir to combine.
4. Heat a skillet or griddle.
5. Pour batter onto the skillet.
6. Cook until bubbly on top.
7. Flip and cook the other side.
8. Serve and enjoy!

Unordered List Tag

• Dune
• Lord of the Rings
• Ender's Game
• Red Mars
• The Forever War

My actual favorite recipe

1. Gather all ingredients.
2. Whisk eggs in a small bowl until smooth. Mix in ham, Cheddar cheese, and heavy cream.
3. Melt butter in a skillet over medium heat. Pour in egg mixture; cook and stir until set but still moist, 3 to 5 minutes.

My actual favorite books

• Walden
• A Tale of Two Cities
• Les Misérables
• The Three-Body Problem (Series)

Five common HTML tags

• Heading tags <h1> through <h6> label sections of a page, h1 being the most important:
  <h2>List Tags</h2>
• The paragraph tag <p> wraps a block of text so the browser renders vertical space around it:
  <p>How to make pancakes.</p>
• The ordered list tag <ol> numbers its <li> items, so use it when sequence matters:
  <ol><li>Mix dry ingredients.</li><li>Add wet ingredients.</li></ol>
• The unordered list tag <ul> bullets its <li> items, for collections with no particular order:
  <ul><li>Dune</li><li>Red Mars</li></ul>
• The table tag <table> lays out rows <tr> of header <th> and data <td> cells for two dimensional data:
  <table><tr><th>Book</th></tr><tr><td>Walden</td></tr></table>

Table Tag

My course schedule

Image tag

Form Elements

Student Profile

Highlighted Paragraph

Default highlight: light yellow background, orange border.

Custom props: light blue background, navy border, thicker width, more rounding.

Another variation: misty rose background, crimson border, square corners.

Hi my name is Zhenming Gao. I like playing table tennis in my free time.

Highlighted Box