HTML Guide

Lesson 2: Working with Text

For this lesson, you'll want to add to the rather useless page you created in the previous one, so if it's not already open, then open the page up in your text editor (Notepad, etc.). Go between your body opening and closing tags and make an h1 element. Type the title of your page inside it - again, just "This is a webpage" or something will do - and then close the element. Make similar h2 and h3 elements in separate lines - just do the exact same thing you did with the h1 except 2 and 3 instead of the 1. These are headings; h1 is the largest and then they become smaller as the number goes higher (or rather, that's what it looks like by default). You should structure your pages so that the h1 element is always the main heading, its sub-headings are h2, their sub-headings are h3, etc. (I have a tendency to use h4 for all minor section headings, regardless of whether there have been any h2 and h3 headings in between, but this is bad form and you shouldn't really do it.)

To make normal paragraphs, use p elements. The P stands, obviously, for "paragraph". Just put the paragraphs inside them - basic stuff. There will by default be what looks pretty much like a double line break between paragraphs. Make a few of them just to get used to it. You'll be making a lot of p elements once you start writing your content, and ideally it should be almost second nature to you to begin every paragraph you type in <p> and end it in </p>.

In case you want to insert single line breaks within paragraphs, such as if writing poetry, use <br>. This element is not closed; it simply inserts the line break where you put the tag. Keep in mind that making a line break in Notepad will not show a line break on the page itself - you always need to use the br tag if you want a line break to appear.

To make text stand out as important, you can wrap <strong> tags around it. Like so:

<p>Blah blah blah <strong>Important text</strong> blah blah blah</p>

By default, strong elements are bold. There is also the <em> element, which is for emphasis and italicizes by default. You use it just like you would use the <strong> tag: just wrap the opening and closing tags around some text that should be emphasized.

When using many of these tags together on the same text, always make sure that they're nested; that is, if you start a strong element and then an em element, applying them both to some text, you must end the em element first. Think of each element as an open box - you can place another box inside it, but it can only be either inside or outside - you can't make one end of the box outside and the other inside.

Also, p elements are what is called block-level elements. This means that you can not place a p inside one of the font formatting tags I gave you above, which are inline elements. Inline elements can go inside each other, and block-level elements can go inside each other, but block-level elements can not go inside inline elements. Inline elements, on the other hand, can go inside block-level elements just fine. (In fact, it is technically not allowed to use inline elements without a block-level element containing them; the same applies to br elements.) Just imagine, continuing the box metaphor, that the boxes that are inline elements are always smaller than the boxes that are block-level elements. You can never get a block-level element that's smaller than an inline one, and therefore the block-level elements will never fit inside the inline ones; on the other hand, you can always fit an inline element inside a block-level one.

The most immediately apparent difference between inline and block-level elements is that if you put two inline elements side by side in the code, they will appear side by side on the page, but if you put two block-level elements side by side in the code, they will by default appear with at least one line break between them. Basically, a block-level element creates a box that spans horizontally across the whole page (or across the width of the element containing it); an inline element creates a box that's just big enough for its contents and can be in the middle of text.

Play around with those tags a little in your document, and then save it. Check it out in your browser again just to see how it all looks and get a bit of a feeling for how it works. Example here.

Previous lesson - Next lesson

Page last modified August 13 2016 at 02:34 UTC

Comments

No comments on this page as of yet.

Post comment

Name

E-mail

Website address

Website name

Comments

Please type the name of the above Pokémon into this box: Fun fact: The above sprite has a 1/8192 chance of being shiny. Feel free to brag if you get one.