Learning Code

Basic HTML Elements

Content inside the body element is organized inside of elements that are descriptive of the content.

Headings

Headings are titles and subtitles that show the heirarchy of information. They range from h1 to h6 with h1 being the most important and h6 the least important.

<body>
   <h1> The most important title </h1>
   <h2> A less important title </h2>
   <h3> A less important title </h3>
   <h4> A less important title </h4>
   <h5> A less important title </h5>
   <h6> The least important title </h6>
</body>

The most important title

A less important title

A less important title

A less important title

A less important title
The least important title

Paragraphs

The p element is intended to contain a single paragraph - or a complete written thought.

<body>
   <h3> About Paragraphs </h3>
   <p> This is a paragraph and it should be a complete thought. It is often multiple sentences but does not have to be. </p>
   <p> Multiple paragraphs should be kept separate inside of their own p elements. The browser automatically adds space around the paragraph. </p>
</body>

About Paragraphs

This is a paragraph. It should be a complete thought. It is often multiple sentences but does not have to be.

Multiple paragraphs should be kept separate inside of their own p elements. The browser automatically adds space around the paragraph.

Divs

The div element is short for divider. Divs are used to help separate different content areas.

<body>
   <div>
      <h3> About Divs </h3>
      <p> This heading and paragraph are both contained inside of a div. </p>    </div>
   <div>
      <p> This paragraph is placed inside it's own div to keep separate from the other page content.</p>
   </div>
</body>

About Divs

This heading and paragraph are both contained inside of a div.

This paragraph is placed inside it's own div to keep separate from the other page content.

Span

The span element is used in combination with CSS to change the visual appearance of a small area - ie. a word or phrase.

<body>
   <div>
      <h3> About Span </h3>
      <p> This <span> span </span> element is inside of the paragraph. If CSS were added, the style of span's content could be changed. </p>    </div>

</body>

About Span

This span element is inside of the paragraph. If CSS were added, the style of span's content could be changed.

Can you use the Try-it Editor to try out these concepts?