In this chapter, we'll go over HTML in more detail and learn how to tell a story with your code.
Tell a story with your content
When you're writing an article, press release, or other written document for work or school, you should make sure to structure your content in a way that makes sense. The same is true when you write HTML on the web.
Compare these two articles on a camping website. Which of these do you prefer?
The content on the right tells a better story! It shows hierarchy of information, and the content is more understandable thanks to this structure. This, on the web, is accomplished by writing good HTML.
You're not the only one "seeing" your content though. Browsers and search engines also see your web page, but they don't have eyes. They do, however, understand HTML.
Search engines like Google read your website's code in order to figure out what the page is about. That way, when users search for something, your website will appropriately be shown in the list of results. Your browser also reads your code in order to show elements in a certain way. If you don't write clear HTML, your site won't be readable because browsers won't know what to do with it. End of story.
Basic HTML syntax
HTML uses tags in order to describe each piece of content on a webpage. It's up to you, as a developer, to choose the right tags!
Check out this line of HTML below from the camping example (and don't let the weird characters like <> freak you out):
<h1>Camping essentials</h1>Let us dissect this friendly code snippet.
<h1>
In HTML, this first set of characters is called an opening tag. Whatever comes between the < and > signs indicates which type of element you're creating. h1 is a heading, for example, and it's the most powerful (biggest) heading possible.
Camping essentials
After an opening tag, you'll often have the text content that will be shown. In this heading, the text "Camping essentials" is shown as a heading as specified in the opening tag.
</h1>
This final set of characters in HTML is a closing tag. It indicates that you've concluded this particular element. It should be identical to the opening tag except with a forward slash after the <.
If this seems complex, let's think about how you format elements in a word processing document. Often, you highlight them from start to finish, and then turn them into a heading (if that's what you want).
The same is true in HTML. You must turn your content into a heading. By writing opening and closing <h1> tags around content, you indicate that the content inside should be turned into a big heading.
Therefore, when you write this HTML code for an example article on camping supplies:
<h1>Camping essentials</h1>You end up with this result:
Almost every HTML element you write will follow this pattern (opening tag, content, closing tag). Let's look at one more example to drill home that point.
<p>Packing the right gear is crucial for having a good time on your next camping trip. Make sure you bring the right stuff using our checklist.</p>You end up with this result:
<p> is the opening tag in the above example (therefore, </p> is the closing tag). The content in the middle becomes a paragraph because "p" stands for "paragraph".
Practice!
In this next code exercise, you'll place basic HTML tags around pre-written content. This is what developers do when they receive the text for a new web page from, say, the marketing team or a copywriter. It's your turn to try!
Head to this CodePen exercise. The content is totally unformatted (look below the text editor to see the result). The first line doesn't show as a heading, text isn't shown as paragraphs...yikes. Turn each piece of text into the proper HTML element by enclosing it in opening and closing tags. Make sure to load your changes each time by clicking the blue "Refresh" button. They won't show otherwise! Follow the instructions bellow:
Turn the text "Neighborhood girl rescues cat from tree" into a large heading by enclosing it in the correct opening and closing tags.
Hint:
Opening tag:
<h1>Closing tag:
</h1>Turn the text group that starts with "Jill Jackson, a resident of Oak Lane..." into a paragraph by enclosing it in the correct opening and closing tags.
Hint:
Opening tag:
<p>Closing tag:
</p>Turn the text group that starts with "Whispers has a reputation..." into a paragraph by enclosing it in the correct opening and closing tags.
Hint:
Opening tag:
<p>Closing tag:
</p>Turn the text group that starts with "When asked to comment..." into a paragraph by enclosing it in the correct opening and closing tags.
Hint:
Opening tag:
<p>Closing tag:
</p>
