You’ll learn how to use HTML to format your text into headings, paragraphs, and lists in this episode.
Why do you need HTML to format your documents? Why not just use a text editor to write whatever you want to appear on a web page and save it in a plain text file? Will this work? And what problems will you encounter if you try this?
First of all, it will work. Sort of. You can create content that you want to display and put that content on a web server.
With a text file, you’ll be able to display separate paragraphs of text and you can even use tabs to indent some text. That’s about all the formatting you can do.
Want a section break between topics? Well, you can always type in a bunch of dashes or maybe equal signs if you want to be extra fancy.
Want a bulleted list of items? Well, you can always start each paragraph with a star character. That sort of looks like a bullet point, right?
Want different sizes of text? Different colors? Different placement? Want links so visitors can navigate to other pages? Sorry, the browser just won’t interpret your text file like this. You’ll need to use HTML to add formatting and you can listen to the full episode to learn how to format headings, paragraphs, and lists. You can also read the full transcript below.
Transcript
Why do you need HTML to format your documents? Why not just use a text editor to write whatever you want to appear on a web page and save it in a plain text file? Will this work? And what problems will you encounter if you try this?
First of all, it will work. Sort of. You can create content that you want to display and put that content on a web server. The web server doesn’t care or know anything about the content. Or, I should say that it doesn’t have to know anything about the content. Sometimes, you do want the web server to get involved and open your files and change them around before sending them to a browser when requested. I’ll explain when this is useful in a future episode.
You have to remember that the way the World Wide Web works is on demand. Servers, don’t just start sending you web pages on their own. You have to first open a browser and visit a web page. Visiting a web page really just means that your browser makes a request for a file from a server at a particular URL and then displays the contents of the requested file once it arrives. Listen to episode 156 for more information about URLs.
When your browser receives a file, it has to know what to do with that file. And for some types of files, it will have no idea what to do with them. The only thing a browser can do with a file type that it doesn’t recognize is to offer to save it on your local computer for you. Who knows, maybe you have another application that can make some sense of the file and open it.
All the browsers I’ve seen know how to open and display simple text files. And most can even go as far as opening PDF files. A PDF file is a common and popular way to save your files so they can be opened by other people who may not have the same application used to create the file.
Browsers can also display image files. They do this all the time anyway when images are placed inside web pages so it makes sense that a browser should also be able to display an image file directly.
So if you wanted to, you could save your information that you want to present to the world as a plain text file, or as a PDF, or as an image. Images don’t have to be things you take with a camera. Just think about all the small text based images you see on Facebook.
Let’s go over these options to see why HTML might not be such a bad option after all even if it does have a lot of strange angle brackets all over the place.
First of all is expectation. People just expect HTML files when visiting a web page. If you instead provide just text files, then your page will look very strange.
You’ll be able to display separate paragraphs of text and you can even use tabs to indent some text. That’s about all the formatting you can do with a text editor.
Want a section break between topics? Well, you can always type in a bunch of dashes or maybe equal signs if you want to be extra fancy.
Want a bulleted list of items? Well, you can always start each paragraph with a star character. That sort of looks like a bullet point, right?
Want different sizes of text? Different colors? Different placement? Want links so visitors can navigate to other pages? Sorry, the browser just won’t interpret your text file like this.
You can get all this extra formatting by creating a PDF file. Well, except for the links anyway. But do you really want to go through all the trouble of creating a PDF file for each of your web pages?
Or even more strange would be to publish everything as large image files. You have all the freedom you want then to format and color everything just the way you want. Just don’t expect visitors to wait around while your images download though. Image files are big. And to use images just to get around the need to use HTML is nonsense.
So how do you format your web page HTML documents? You have a lot of options available and this episode will explain headers, paragraphs, and lists. Listen to some of the previous HTML episodes for more information about tags. I’m not going to try reading HTML over this podcast so I’ll stay with just the concepts.
Let’s start with headers. You have six different headers that you can use called h1 through h6. All you have to do is enclose some text with a header tag of your choice and the browser will know what to do with it. This usually means the browser will display text enclosed with h1 tags in a big and bold font that stands out from all the other text on the page. You can use this for your main headings. Then use the other heading tags as needed. They’ll usually get smaller and less distinctive as the number gets higher. And you may find that you really only need h1, h2, and h3 tags for almost everything.
You normally don’t nest these tags. I’m not sure what would happen if you try but at best, the result would look weird. By this, I mean that you should avoid opening a h1 tag, putting a few words of text and then opening a h2 tag without first closing the h1 tag. It’s perfectly fine to have different heading tags on the same page and in different orders. Just don’t put one inside another.
You use p tags to surround paragraphs. If you don’t do this and just type you text inside the body tag, then the browser will ignore all the extra line breaks and spacing you insert. In fact, you’ll find everything displayed on a single line that, while it may wrap around at the edge of the browser window, it’ll still be one long line of text.
The only way to get your text to appear separately and grouped into paragraphs is to use tags. Use p for paragraphs and you can also use br tags for simple line breaks.
This might seem like a lot or complicated work but it’s a flexible way to quickly format your content so it looks better than just plain text. Getting bulleted or numbered lists is a little more work but not by much.
Instead of using p tags for each bulleted or numbered item, you instead use li tags which stand for list items. You can’t just use li tags alone around your items because they just define the individual items. A web page might have multiple lists and each one can have its own numbers or bullets. The way you group these list items together is by putting them inside either ul tags or ol tags.
A ul tag stands for an unordered list. Since an unordered list doesn’t have numbers, it uses bullet points to highlight each item.
And an ol tag stands for a ordered list and that means it has numbers to give each list item its order.
By putting your content for each list item inside its own li tags and then putting all the list items inside either ul or ol tags, you end up with a properly formatted list that the browser will display properly.
What if you want another list of items inside a list of items? You can do this as much or as deep as you want. Just put the additional lists inside one of the outer list items. Don’t try to put a ul or an ol opening tag directly inside an outer ul or ol tag. Make sure to have at least one list item that surrounds the embedded list in order to have valid HTML.