Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Headings in HTML and XHTML add structure to your document and this is valuable for search engines and other automated tools that might want to categorize your documents and to understand the structure of them a little bit, so they can give you more intelligent results. Headings are valuable for this purpose. Headings are rendered a certain way in browsers. By default, they tend to be a little bit ugly and so some people tend to not use the headings, instead formatting paragraphs for the purpose. I am suggesting that it's a good idea to go ahead and use the headings and format those using CSS.
In this way, your documents can have the structure that they need so that the automated tools can report on them properly and at the same time, they then look the way that you want them to look. Let's take a look at how we can do this. Here's our heading 1 and you'll notice that it's big and ugly and here's our heading 2. The heading 2 means that the part of the document after the heading 2 is related to the part of the document after the most recent heading 1, and likewise, the heading level 3, h3, means that that part of the document is related to the most recent h2 level of the document.
This is how they are rendered in the browser and as you can see, they may not be exactly what you want. So, you can change that by adding some style. We are going to go into the Style Sheets in a lot more detail in the chapter on CSS. But let's just take a look at how you can do this in this case, so you can see what the results look like. I'll add a style here. Let's say we want it in a Sans-Serif font and just a little bit larger than the paragraph, not a lot larger than the paragraph. So, we'll go ahead and say font-family: sans-serif and font-size: say 125%.
So, it will be just a quarter of a percent larger than the normal paragraphs in the document. I'll go ahead and save that and reload in the browser and we can see that looks a lot more reasonable. Now, we'll go ahead and take this style and copy it because that's easier than typing a lot, and we'll go ahead and paste it over here and let's maybe add some color to this one. Let's say heading level 2 will be dark blue. So, I'll say color. I'm going to use a color like this.
That's a blue and we'll talk more about what that means in the section on CSS. I'll go ahead and save that and reload over here and we see that that's a dark blue. It's a little bit bluish. It's not an overwhelming blue. We'll go ahead and we'll copy this and use it as a basis for the heading level 3 and go ahead and say instead of changing the color of the text, we are going to change the background-color of the text. Background-color like that and we'll say it's going to be a light blue.
So, I'll make it say #ccf, which is a light blue. Go ahead and save that and load it up in the browser and we have a light blue background now on this. So, you can see that you can do things to make it attractive or make it look how it is that you want it to look and yet still have the structure that's important for the automated tools that might be reading your web page. So, headings are valuable for that purpose, they are valuable for giving your documents structure and they can be made pretty by using CSS.
We'll talk about CSS in a lot more detail in our chapter on CSS later in this course.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 103109 Viewers
61 Video lessons · 89753 Viewers
71 Video lessons · 73392 Viewers
56 Video lessons · 104953 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.