Text Block Organization with paragraph HTML Tag <p>

HTML has nice built-in organizational tags which allow you to present complex information easily. For flowing blocks of text like this one, simply wrap each paragraph in a

tag. Each paragraph will be automatically separated and indented. (You can adjust the indentation with style sheets -- but that will come later.)

Go ahead and try inserting some

tags into your text in HTML-Help-Toy to see that paragraphs are automatically separated out nicely.

More text-block HTML Tags: <ol> <ul> <li>

What about text that is not organized in paragraphs, such as lists and table? Well, we'll cover tables later but let's go ahead an do some lists.

Here's how it works: you can build two types of lists: 1) ordered lists <ol> - which are automatically numbered and 2) Unordered lists <ul>- which are bulleted. Both lists contain List item <li>. It's really easy, here's an example:

Now wasn't that easy? Play with this a bit and notice that you the indentations I gave to the HTML code is for editing readability only. The displayed HTML totally ignores all whitespace in my HTML code.

More text-block HTML Tags - headers: <h1> <h2> <h3>

Now we've got the basics of text formatting and you understand that HTML is just about learning a few important concepts and a bunch of easy tags. You've learned how to make paragraphs and lists so now it's time to learn about headings.

Headings are sized from largest H1 to smallest h5. In normal web-work you'll normally use just H1, H2, and H3. Normally H1 is the header at the top of a page. Since a picture is worth a thousand tutorials, take a look at this:

Gutenberg would be shaking with awe at the power you now have in your hands!

So far we've covered some text formatting tags, and text-block tags. This is important because there are basically three levels of tags in HTML. 1) text-level tags (such as <b> and <i> , 2) block-level tags (such as <p> and <h1> and finally, 3) Page-level organization tags (which we are about to cover). It's good to understand this from the beginning so that when you're introduced to a new tag you can ask yourself "Is this a text, block or page level tag?"

To put together a full HTML page, we're going to need to learn some page-level tags (don't worry, they are really easy also.)