HTML5 Video Tutorial

Part 2 - Text

The following code is from the Video.

P element <p>...</p>

The p element represents a paragraph. It has a start and an end tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <p>This is some sample text inside of the p element.</p>
    <p>This is some sample text inside of the p element.</p>
  </body>
</html>

BR Element <br>

The br element represents a line break. It does not have an end tag, it only has a start tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <p>Name<br>Address<br>City & State<br>Zip code</p>
    <p>This is some sample text inside of the p element.</p>
  </body>
</html>

H1 thru H6 Elements <h1>...</h1>

The h1 thru h6 elements represent headings. There are 6 levels of heading elements with h1 representing the highest rank and h6 the lowest. These elements have start and end tags.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <h2>This is a heading</h2>
    <h3>This is a heading</h3>
    <h4>This is a heading</h4>
    <h5>This is a heading</h5>
    <h6>This is a heading</h6>
    <p>Name<br>Address<br>City & State<br>Zip code</p>
    <p>This is some sample text inside of the p element.</p>
  </body>
</html>

Heading element example.

The h1 element is used has a heading for the whole page and h2 elements are used as headings for subsections.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <h1>Examples</h1>
	
    <h2>First Paragraph</h2>
    <p>This is some sample text inside of the p element.</p>
	
    <h2>Second Paragraph</h2>
    <p>This is some sample text inside of the p element.</p>
  </body>
</html>

CSS (Cascading Style Sheets) example.

This example demonstrates how to center the h1 heading element and how to set its color to red. The style is applied by using a style attribute in the h1 element. This is not the only way to apply styles. There are other methods that have some definite advantages.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <h1 style="text-align:center; color:red">Examples</h1>
	
    <h2>First Paragraph</h2>
    <p>This is some sample text inside of the p element.</p>
	
    <h2>Second Paragraph</h2>
    <p>This is some sample text inside of the p element.</p>
  </body>
</html>