Adding More Content and Structure
In the last chapter, we finally created our first web page. Unfortunately, there was nothing to be shown on the page itself, even though we did write out some HTML code. In this chapter, we’ll be exploring more HTML elements to add more structure and content to our page.
Time to add some content
Now, without closing your browser window, go back into your text editor and in between the opening <body> tag and the closing </body> tag, go ahead and insert a h1 header and also include a paragraph tag (p tag) like so:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello there!</h1>
<p>I am the greatest HTML developer ever!</p>
</body>
</html>
Now save that index.html file again and go back to your browser and refresh your page. You’ll notice that there is now a header and a paragraph showing the content you just typed.
NOTE: For CodePen HTML preview purposes, I’ve excluded the <!DOCTYPE> tag in the CodePen preview (Since CodePen doesn’t require it. But you should always include it in your own code).
Headings
Let’s go ahead and add different types of headings. Headings are used to help structure the content of your page and provides a hierarchy and visual structure for users reading your page. They also help search engines to index your content properly. They are block-level tags and range from <h1> all the way to <h6>, where h1 is your main heading, and all other heading tags should be used in order, under each subsequent heading.
Headings should be used to structure your content to make it easier for users to read it and should not be used to create bold or large text (there are better ways to do that anyways).
Go ahead and type in a few more headings and see how they look on the page.
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello there!</h1>
<p>I am the greatest HTML developer ever!</p>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
You’ll notice all the various sizes for headings. You can use these headings to structure your content in the same manner as you would a book.
Paragraphs
In most cases, Heading are followed by paragraphs. Paragraphs are useful for providing information and context for your headings and are created using the <p> block-level tag. You’ve already created this tag before, but here are more examples you can add.
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello there!</h1>
<p>I am the greatest HTML developer ever!</p>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is another paragraph that usually follows after headings. This is useful to provide context to support those headings and can help provide more information for users.</p>
<p>This is yet another paragraph. You'll notice that each paragraph has their own separate spacing in between each paragraph.</p>
</body>
</html>
Bold and Italicized Text
Now that you’re familiar with creating headings and paragraphs, let’s move on to styling and creating importance or emphasis to our content.
Bold Text
We can use the <strong> or <b> inline-level elements to create bold text. They both stylistically create bold text, however, the difference is that semantically the <strong> tag is used to convey something of importance, whereas the <b> tag is used only for visual representation of bold text. It is useful to understand which one to use. In most cases, the <strong> tag is used to convery importance.
Here’s an example below:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello there!</h1>
<p>I am the greatest HTML developer ever!</p>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is another paragraph that usually follows after headings. This is useful to provide context to support those headings and can help provide more information for users.</p>
<p>This is yet another paragraph. You'll notice that each paragraph has their own separate spacing in between each paragraph.</p>
<p>In most cases, you want to give <strong>importance</strong> to a specific word instead of just making it look <b>bold</b>.</p>
<p><strong>Remember:</strong> Use <strong>strong</strong> to provide importance and <b>b</b> to make something look bold.</p>
</body>
</html>
Italicized Text
For creating italicized text, we’ll be using the <em> or <i> inline-level tags. In the same way that the <strong> tag is used to show importance, the <em> tag is used to show emphasis on a specific word or words, whereas the <i> tag is used primarily just for visual representation of italicized text.
Here’s an example of italicized text:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello there!</h1>
<p>I am the greatest HTML developer ever!</p>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is another paragraph that usually follows after headings. This is useful to provide context to support those headings and can help provide more information for users.</p>
<p>This is yet another paragraph. You'll notice that each paragraph has their own separate spacing in between each paragraph.</p>
<p>In most cases, you want to give <strong>importance</strong> to a specific word instead of just making it look <b>bold</b>.</p>
<p><strong>Remember:</strong> Use <strong>strong</strong> to provide importance and <b>b</b> to make something look bold.</p>
<p>To show <em>emphasis</em> on specific words, use the <em>em</em> tag. If you just want to show italicized text without meaning, use the <i>i</i> tag.</p>
</body>
</html>
Creating Lists
Now that we’re familiar with creating headings, paragraphs, and providing bold and italicized text, let’s talk about creating lists.
Lists are a great way to specify lists of information. There are 3 different kinds of lists: Unordered lists, ordered lists, and definitions. Each of these lists contain one or more list items. I’ll go over each type of lists below.
Unordered Lists
Let’s first talk about unordered lists. Unordered lists are block-level elements and are the most common of type of lists. They are created using the <ul> tag. They also need to contain list items which are created using the <li> tag. Unordered lists (also know as bulleted lists) have bullets for each list item. Here’s an example:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello there!</h1>
<p>I am the greatest HTML developer ever!</p>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is another paragraph that usually follows after headings. This is useful to provide context to support those headings and can help provide more information for users.</p>
<p>This is yet another paragraph. You'll notice that each paragraph has their own separate spacing in between each paragraph.</p>
<p>In most cases, you want to give <strong>importance</strong> to a specific word instead of just making it look <b>bold</b>.</p>
<p><strong>Remember:</strong> Use <strong>strong</strong> to provide importance and <b>b</b> to make something look bold.</p>
<p>To show <em>emphasis</em> on specific words, use the <em>em</em> tag. If you just want to show italicized text without meaning, use the <i>i</i> tag.</p>
<ul>
<li>This is a list item</li>
<li>This is another list item</li>
<li>This is the final list item</li>
</ul>
</body>
</html>
Ordered Lists
Ordered lists, on the other hand, can be numerical or alphabetical. Ordered lists are created using the <ol> tag and also contain <li> tags for their list items, similar to unordered lists. The main difference between unordered and ordered lists is that ordered lists allow you to display a meaningful order. The default for ordered lists are numerical. Here’s an example:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello there!</h1>
<p>I am the greatest HTML developer ever!</p>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is another paragraph that usually follows after headings. This is useful to provide context to support those headings and can help provide more information for users.</p>
<p>This is yet another paragraph. You'll notice that each paragraph has their own separate spacing in between each paragraph.</p>
<p>In most cases, you want to give <strong>importance</strong> to a specific word instead of just making it look <b>bold</b>.</p>
<p><strong>Remember:</strong> Use <strong>strong</strong> to provide importance and <b>b</b> to make something look bold.</p>
<p>To show <em>emphasis</em> on specific words, use the <em>em</em> tag. If you just want to show italicized text without meaning, use the <i>i</i> tag.</p>
<ul>
<li>This is a list item</li>
<li>This is another list item</li>
<li>This is the final list item</li>
</ul>
<ol>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
</body>
</html>
You can also add attributes to ordered lists. For example, add a type attribute, you can change the numbering type. Here are the different type attributes:
- ‘1’ which indicates numbers. This is the default behavior
- ‘a’ which indicates lowercase letters
- ‘A’ which indicates uppercase letters
- ‘i’ which indicates lowercase Roman numerals
- ‘I’ which indicates uppercase Roman numerals
Example: <ol type=”A”>
Another attribute you can add is the start attribute. The value of the start attribute is an integer that specifies the starting value for numbering each list item. Even though the ordering type of list might be something like alphabetical, the value of the start attribute is always represented as a number.
For example, if you wanted to created an ordered list with a <ol type=”A”> but wanted it to start from the letter “C”, you would add a start attribute with the value of ‘3’ like so: <ol type=”A” start=”3″>.
NOTE: This ‘start’ attribute was actually deprecated in HTML4, but was reintroduced in HTML5.
Definitions
The last type of list element is the definition list. While not as common as the unordered or ordered lists, definition lists are great for creating a list where each item requires both a term and definition. It’s also commonly used to display dialogue between two or more people.
Definitions are created using the <dl> tag and contain both a <dt> tag for the definition term and followed directly by the <dd> tag for the definition description. Here’s an example:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello there!</h1>
<p>I am the greatest HTML developer ever!</p>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is another paragraph that usually follows after headings. This is useful to provide context to support those headings and can help provide more information for users.</p>
<p>This is yet another paragraph. You'll notice that each paragraph has their own separate spacing in between each paragraph.</p>
<p>In most cases, you want to give <strong>importance</strong> to a specific word instead of just making it look <b>bold</b>.</p>
<p><strong>Remember:</strong> Use <strong>strong</strong> to provide importance and <b>b</b> to make something look bold.</p>
<p>To show <em>emphasis</em> on specific words, use the <em>em</em> tag. If you just want to show italicized text without meaning, use the <i>i</i> tag.</p>
<ul>
<li>This is a list item</li>
<li>This is another list item</li>
<li>This is the final list item</li>
</ul>
<ol>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
<dl>
<dt>Cola</dt>
<dd>A cold refreshing soft drink</dd>
<dt>Coffee</dt>
<dd>A hot, brewed drink made from roasted coffee beans</dd>
<dt>Tea</dt>
<dd>A warm, aromatic drink made from cured tea leaves</dd>
</dl>
</body>
</html>
Breaks
In some cases, you want to visually create a new line when typing out your content. For example, let’s say you want to visually break a sentence into a new line midway through, then you would add a break.
Breaks are self-closing (also known as void-tags) inline-level tags and are created using the <br /> tag. Remember, with void-tags, the forward-slash ‘/’ is optional. Here’s an example:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello there!</h1>
<p>I am the greatest HTML developer ever!</p>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is another paragraph that usually follows after headings. This is useful to provide context to support those headings and can help provide more information for users.</p>
<p>This is yet another paragraph. You'll notice that each paragraph has their own separate spacing in between each paragraph.</p>
<p>In most cases, you want to give <strong>importance</strong> to a specific word instead of just making it look <b>bold</b>.</p>
<p><strong>Remember:</strong> Use <strong>strong</strong> to provide importance and <b>b</b> to make something look bold.</p>
<p>To show <em>emphasis</em> on specific words, use the <em>em</em> tag. If you just want to show italicized text without meaning, use the <i>i</i> tag.</p>
<ul>
<li>This is a list item</li>
<li>This is another list item</li>
<li>This is the final list item</li>
</ul>
<ol>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
<dl>
<dt>Cola</dt>
<dd>A cold refreshing soft drink</dd>
<dt>Coffee</dt>
<dd>A hot, brewed drink made from roasted coffee beans</dd>
<dt>Tea</dt>
<dd>A warm, aromatic drink made from cured tea leaves</dd>
</dl>
<p>Breaks are useful when you want to create a break <br />to a new line somewhere in between your content.</p>
</body>
</html>
You’ll notice that by adding the break in the middle of the last paragraph, the content following the <br /> tag is now on the next line. Also, notice that it did not create a new paragraph but instead just created a break within the paragraph itself.
Horizontal rules
No, I’m not saying that horizontal is the best. What I mean is that you can create a horizontal line using what is called a horizontal rule to separate your content. This is another one of those self-closing tags.
Horizontal rules are block-level elements and can be created using the <hr /> tag. Again the ‘/’ is optional for void-tags.
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello there!</h1>
<p>I am the greatest HTML developer ever!</p>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is another paragraph that usually follows after headings. This is useful to provide context to support those headings and can help provide more information for users.</p>
<p>This is yet another paragraph. You'll notice that each paragraph has their own separate spacing in between each paragraph.</p>
<p>In most cases, you want to give <strong>importance</strong> to a specific word instead of just making it look <b>bold</b>.</p>
<p><strong>Remember:</strong> Use <strong>strong</strong> to provide importance and <b>b</b> to make something look bold.</p>
<p>To show <em>emphasis</em> on specific words, use the <em>em</em> tag. If you just want to show italicized text without meaning, use the <i>i</i> tag.</p>
<ul>
<li>This is a list item</li>
<li>This is another list item</li>
<li>This is the final list item</li>
</ul>
<ol>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
<dl>
<dt>Cola</dt>
<dd>A cold refreshing soft drink</dd>
<dt>Coffee</dt>
<dd>A hot, brewed drink made from roasted coffee beans</dd>
<dt>Tea</dt>
<dd>A warm, aromatic drink made from cured tea leaves</dd>
</dl>
<p>Breaks are useful when you want to create a break <br />to a new line somewhere in between your content.</p>
<hr />
</body>
</html>
You’ll notice that it created a horizontal line across the page. Horizontal rules are useful if you want to show some visual separation of content.
In the next chapter, we’ll dive deeper by learning how to create links and creating more pages and being able to link to them.