Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Setting Headings

  • There are 6 heading tags that can be used on a web page in HTML
  • These heading tags are very important
    • screen readers
    • search engines
    • think of these as being like a headline in a newspaper
    • allows the user to determine what information they want from the page
  • Think of these as newspaper headlines, with H1 being the largest
  • We will take a look at these HTML tags
    • Create a new page called headings.html
    • Type "This is a heading tag."
    • Copy & paste that text 5 more times.
    • Add the numbers 1-6 after the word heading in each line
    • Place your cursor in the first line & choose ctrl/cmd 1
    • Do this all the way down
  • Note how the text changed when we made each line a heading line
  • By default HTML changed the text but we can modify how it looks using CSS
  • Heading tags add structure to a page by setting the importance of content
  • XHTML pages should only have 1 H1 tag, but HTML5 allows for multiple heading tags to be used as long as they are within separate areas of the web page

Setting Headings

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Create New and Save 0:17
  • Add Title 0:40
  • Add Text 0:47
  • Insert Heading Tags into Text 1:55
  • Importance of a Heading Tag 2:43

Transcription: Setting Headings

We are now going to take a look at working with Heading tags and they are a specific HTML code feature and we will use them in Dreamweaver. 0000

But what I want to do is give you a taste of what those tags mean from an HTML standpoint.0011

So, we are going to create a new page, so control or command-N for new and I am going to save this page as Headings, so Headings with a s on the end as in plural, cause we are going to do a few of them. 0017

I will go ahead and say that in my Wanderlust travel website, now my title up here is going to be HTML headings and what we are going to do on the page is we are going to type out This is a heading1.0035

And we are simply going to copy and paste that multiple times down the page, so I will go ahead and hit Enter or Return and do my paste, so ultimately we will have 6 of these. 0056

Once we have that done I am simply going to I change the numbers, I think it is important when you first start working on the web to understand what a Heading tag is.0072

There are a couple of little pieces that I always make people aware of, even if they do not plan to be digging around in the code because these are headings that you are going to end up using on every webpage you work with. 0083

And if you are moving into the HTML side of things HTML5, specifically, you are allowed to use more Heading tags than you used to be able to in the XHTML standard, so these have become even more important. 0097

What I am going to do is save my page, so that is simply a File save and once I have done that, put your cursor inside one of these lines the first one, and do a control or command and the number 1. 0115

Put your cursor in the second one and control or command and the number 2 and you will start to see a pattern here.0134

I am just going to use control or command along with whatever the Heading number is, so the next time will be 4, I will do 5 and I will do 6.0142

If you are unfamiliar with HTML this is a great way to get an understanding of what a Heading tag is and then I want to explain the importance of the Heading tag. 0156

Now, heading1 even though it is the lowest number, it is the largest text, think of this like a newspaper headline.0167

The idea is newspaper headlines came about the most important content within the newspaper, had a big heading on the top. 0175

That is basically your heading1 and every webpage you create will more than likely have a heading1 in it.0184

Heading2 is the subcategory of Header, so think of these as the size and number of the Heading determines the importance of the Heading. 0192

These are also important for search engine optimization; search engines tend put more importance on heading text than they do on paragraph text.0203

It is important to think about your heading tags and I wanted you to see the default sizing that HTML sets up, so you can see heading1 is the largest, heading6 starts getting small.0215

But basically every HTML tag adds something to the content inside of it, so what a Heading tag did was it made our text Bold, so you can see every one of these is Bold.0229

It also gave it a Preset size and we do not have any colors assigned, so you can see default HTML font color is black, so unless you need to change it from black you really do not need to do any styling that way.0245

Now, the other thing a Heading tag does is add space above and below the content. 0263

If you take a basic paragraph in terms of line height or letting and you make it a Heading tag what you are doing is adding additional space above and below, beyond what a paragraph would do.0270

A Heading tag, basically, sets text aside and gives it a little more space because it is more important.0284

Now, what HTML does is exactly what you are looking at, here are the different sizes and heading4 is considered the default size on the system.0292

So, it basically takes whatever the default font size is for the system, makes it Bold and adds a little spacing more so than it would normally have above and below the text, in other words it gives it a little more line height. 0304

But that so think of heading4 as kind of your starting point, so to speak, I have rarely use headings 5 and 6, but there are instances where it comes in handy.0321

Now, this does not mean our headings always have to look this way, but it does mean that these are default. 0333

Anytime we make something, a Heading tag in HTML it is going to make it look like this, if we want to change that, that is where CSS side comes in, but those are the default looks for the Heading tags.0340

You create a Heading tag by putting your cursor in that line and using either control or command along with the numbers 1 through 6, depending upon the heading size you want.0354

Those are the HTML heading tags and the reason why you want to use them and also their importance on an HTML page.0367