locked
How to creat H1 in title tag? RRS feed

  • Question

  • Hi,

    I use Microsoft Expression web 3 as my editor. Mind you I am not at all a web designer but I have learned how to insert text and pictures etc. into a template.

    I have a well established website www.curo.net that is built on a template created for me a while ago. Lately I have been advised to change the title tags so it's H1 but I don't know how to do that.

    Example of what it says is on one of the pages is: <div class="innerpage_head">Articles</div> 

    I do not know how to change that innerpage-head over to H1 in the editor so I need advice.

    Thanks

    Saturday, January 26, 2013 6:28 PM

Answers

  • There are several ways. The easiest is to place the cursor in the opening tag (<div), then in the Common toolbar, click the "Style:" dropdown (next to the Preview in Browser icon), and select "Heading 1."

    For those of us who prefer keyboarding, just change the declaration, from "<div class="innerpage_head">Articles</div>" to "<h1 class="innerpage_head">Articles</h1>."

    That will also do it.  ;-)

    BTW, there should only be one h1 per page, and best practice says that it should be as close to identical to the page's actual <title> tag's value as possible, for SEO purposes. Subsequent headings should be at a lower level, so I'm guessing that unless the page is actually titled "Articles," that might be better set as an h2.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.


    • Edited by paladyn Saturday, January 26, 2013 7:19 PM
    • Marked as answer by cath999 Saturday, January 26, 2013 8:41 PM
    Saturday, January 26, 2013 7:14 PM
  • "I am only inserting the H1 in the title tags in the content sections."

    No, that's fine. You see, there's a bit of confusion occasioned by the use of the word "title." There is an actual <title> ... </title> element, which is always located in the <head> ... </head> section. This is the one I was describing above, which appears either in the Title Bar of the browser application itself, or in the tab associated with the page. Unlike other elements, the <title> element itself cannot be assigned a class, and although you can style the title element, like so...

    title {
        font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
        font-weight:bold;
        color:red;
    }

    ... that styling will be ignored by browsers. CSS is only applied to elements within the body. As long as the elements that you are working with are within the body (visible on the page itself), you are good to go, no matter what you call them. You're fine.  ;-)

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Marked as answer by cath999 Saturday, January 26, 2013 10:06 PM
    Saturday, January 26, 2013 9:36 PM
  • Cathrine, to further amplify, the word "tag" is a particular term of art in Web development. From the w3schools introduction to HTML:

    HTML Tags

    HTML markup tags are usually called HTML tags

    • HTML tags are keywords (tag names) surrounded by angle brackets like <html>
    • HTML tags normally come in pairs like <b> and </b>
    • The first tag in a pair is the start tag, the second tag is the end tag
    • The end tag is written like the start tag, with a forward slash before the tag name
    • Start and end tags are also called opening tags and closing tags

    So, for every element, whether a paragraph, heading, whatever, there is a tag pair to declare it—an opening tag, followed by the actual content of the tag (the element itself), followed by the closing tag. So, for "<div class="innerpage_head">Articles</div>", the element type is "div," the declaration is the tag pair (<div class="innerpage_head"> ... </div>), and the content, the element, is "Articles."

    In your page, that element content, "Articles," plays the role of page title for that page. However, in the HTML specification, there is a defined element type called "title," which is declared using the actual opening and closing tags "<title> ... </title>." This element has a very specific purpose, that of showing as the page title in the browser's title bar, or the page's tab for tabbed browsers. It does not appear anywhere within the body of the page.

    When your SEO guy referred to the "title tag," he was referring to the role of that element within the page, not to the actual "<title> ... </title>" element. Although he may indeed have been of great help to you, he was still speaking imprecisely, leading to the confusion, when he referred to the "div containing the page's title" (referring to the element's role) as the "title tag" (which refers to an actual element type). To those of us here who work in the field, the term "title tag" refers to that specific element type, hence the confusion.

    In any event, if he is an SEO advisor, he will confirm that the content of the <h1> of any page should be as close as possible to the content of the <title> ... </title> element. This allows the search engines to correctly rank the relevance of the page's content to the terms entered in a search. Therefore, I would hope that, in addition to advising you to change the element type from <div> to <h1>, that he also advised you to ensure that the <title> element of the page (found in the <head> section) matches the <h1> for the page closely.

    You may wish to show this thread to your friend and see if he agrees. ;-)

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Marked as answer by cath999 Friday, February 1, 2013 2:03 PM
    Tuesday, January 29, 2013 2:51 AM

All replies

  • There are several ways. The easiest is to place the cursor in the opening tag (<div), then in the Common toolbar, click the "Style:" dropdown (next to the Preview in Browser icon), and select "Heading 1."

    For those of us who prefer keyboarding, just change the declaration, from "<div class="innerpage_head">Articles</div>" to "<h1 class="innerpage_head">Articles</h1>."

    That will also do it.  ;-)

    BTW, there should only be one h1 per page, and best practice says that it should be as close to identical to the page's actual <title> tag's value as possible, for SEO purposes. Subsequent headings should be at a lower level, so I'm guessing that unless the page is actually titled "Articles," that might be better set as an h2.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.


    • Edited by paladyn Saturday, January 26, 2013 7:19 PM
    • Marked as answer by cath999 Saturday, January 26, 2013 8:41 PM
    Saturday, January 26, 2013 7:14 PM
  • Thank you so much,

    I inserted the code the way you describe it and much to my relief there is no change in the font. It all looks the same with that new code.There is not going to be any other H1 per page but I have to go through all my pages (and I have a lot) to insert H1 in the way you have just described it.

    Cannot tell you how much you have helped me by telling me how to change the code.

    Thanks

    Saturday, January 26, 2013 7:56 PM
  • PS - the page is title 'articles' and I was advised by a SEO person to insert H1 in the title tag instead of having it the way it is/was. Will now change all my pages
    Saturday, January 26, 2013 7:58 PM
  • Be careful, now. You don't want to put an <h1> in the actual <title> element, which is found up in the <head> section. That is the only displayable element which is located in the <head>, rather than the body. And it doesn't display in the page body—the text there is displayed in the Title Bar of some browsers, and on the tab associated with the page in all tabbed browsers.

    Oh, and the reason that the appearance didn't change is that the class "innerpage_head" is still applied to the element, and it is that class (added to or overriding the default h1 styling) that determines the appearance of the elements assigned that class.

    BTW, since my response answered your question, you should mark it as the answer, so that it will be highlighted and easier for later searchers to find. ;-)

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Saturday, January 26, 2013 8:20 PM
  • This is all new to me. Sorry - I did not know that I was supposed to mark your answer but I have done that now.

    I do not understand what you mean about being careful of inserting H1 in the title tag on all my pages? I am only inserting the H1 in the title tags in the content sections. Is that going to be a problem?........... I am not close to the title for my individual web pages.

    Cheers

    Cathrine

    Saturday, January 26, 2013 8:45 PM
  • Catherine,

    A "title tag" is specific code in your page, inside the <head> ... </head> section, and it actually is <title>.  This is not what you are changing (or if you are, it's not supposed to contain <h1> tags or be replaced with them).  Look in Code View and scroll near the top to see the <title> tag.  The <title> tag content does not display in your page.

    Your headings are not "title tags".  They may certainly contain the titles for your pages or areas of the page, and that is what I assume you mean to say you are changing.

    That's what Scott meant to check with you.

    Saturday, January 26, 2013 9:33 PM
  • "I am only inserting the H1 in the title tags in the content sections."

    No, that's fine. You see, there's a bit of confusion occasioned by the use of the word "title." There is an actual <title> ... </title> element, which is always located in the <head> ... </head> section. This is the one I was describing above, which appears either in the Title Bar of the browser application itself, or in the tab associated with the page. Unlike other elements, the <title> element itself cannot be assigned a class, and although you can style the title element, like so...

    title {
        font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
        font-weight:bold;
        color:red;
    }

    ... that styling will be ignored by browsers. CSS is only applied to elements within the body. As long as the elements that you are working with are within the body (visible on the page itself), you are good to go, no matter what you call them. You're fine.  ;-)

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Marked as answer by cath999 Saturday, January 26, 2013 10:06 PM
    Saturday, January 26, 2013 9:36 PM
  • Then all is well.

    I do not know much about programming but I do know what to do regarding titles for my websites. It is long and tedious work to insert H1 in all the title tags on the individual pages in the content section but I guess it's worth doing this job.

    Thank you once again for helping me out. There are so much I do not now and I cannot afford paying someone to help me every time I am facing a challenge.

    Cheers,

    Cathrine

    Saturday, January 26, 2013 10:09 PM
  • "It is long and tedious work to insert H1 in all the title tags ..."

    Once again, they are not title tags.  :)  They may indeed be titles, however.  Your example was div tag.  "Tag" means HTML (Code View): <div>, <p>, <title>, etc.

    Saturday, January 26, 2013 11:08 PM
  • PS - the page is title 'articles' and I was advised by a SEO person to insert H1 in the title tag instead of having it the way it is/was. Will now change all my pages

    Find a different SEO person.

    Search engines automatically key on the page title without having the h1 tag,


    Expression Web MVP


    Sunday, January 27, 2013 2:56 PM
  • Frankly I agree with the SEO person because while Google is pretty good about figuring out what it should treat as important it is easier and thus more likely to accomplish what you want if you use real semantic mark-up with headings and body text. The HTML page without any style applied to it should look more or less like the papers you did back in school with headings, body text, lists and tables for data when appropriate.

    As you may have gathered from my comparison to elementary school it isn't rocket science. Instead of making something look like a heading, why not make it a real heading?


    Free Expression Web Tutorials
    For an Expression Web forum without the posting issues try expressionwebforum.com

    Sunday, January 27, 2013 3:41 PM
  • Steve, the OP keeps saying "title tag", but that's not what is meant.  I've tried to clarify that.  The OP was advised to change a <div> tag used to create a primary header - a "title" - to an actual symmantic header.  It wasn't about putting an H1 tag into the <title> tag.
    Sunday, January 27, 2013 4:07 PM
  • Your response confuses me, Kathy.

    I did mean to exchange <div> to <H1> in title on the inner page. The SEO specifically asked me to change that code into H1 and he did call it a title tag. He has previously been a great help for me so I trust his word.

    Monday, January 28, 2013 10:08 PM
  • Cath999,

     A "title tag" is not your title.  Your title was in a "div tag" and you changed it to an "h1 tag".  A title tag is "<title>" and is in the "<head>" section of the HTML, as both Scott and I have explained in this thread.  Look in Code View: you'll see it near the top. 

    In HTML "tag" means something specific.  A div tag is "<div>", a heading level 1 tag is "<h1>", and so on.  You were changing your title HTML markup from a div tag to an h1 tag.  You were not doing anything to the title tag.

    Your SEO person was not telling you to change the "title tag".  He meant "change the tag your title is in from a div tag to an h1 tag".  His terminology, and your use of it here, was not precise, thus the confusion.


    • Edited by KathyW2 Tuesday, January 29, 2013 1:11 AM
    Tuesday, January 29, 2013 1:09 AM
  • Cathrine, to further amplify, the word "tag" is a particular term of art in Web development. From the w3schools introduction to HTML:

    HTML Tags

    HTML markup tags are usually called HTML tags

    • HTML tags are keywords (tag names) surrounded by angle brackets like <html>
    • HTML tags normally come in pairs like <b> and </b>
    • The first tag in a pair is the start tag, the second tag is the end tag
    • The end tag is written like the start tag, with a forward slash before the tag name
    • Start and end tags are also called opening tags and closing tags

    So, for every element, whether a paragraph, heading, whatever, there is a tag pair to declare it—an opening tag, followed by the actual content of the tag (the element itself), followed by the closing tag. So, for "<div class="innerpage_head">Articles</div>", the element type is "div," the declaration is the tag pair (<div class="innerpage_head"> ... </div>), and the content, the element, is "Articles."

    In your page, that element content, "Articles," plays the role of page title for that page. However, in the HTML specification, there is a defined element type called "title," which is declared using the actual opening and closing tags "<title> ... </title>." This element has a very specific purpose, that of showing as the page title in the browser's title bar, or the page's tab for tabbed browsers. It does not appear anywhere within the body of the page.

    When your SEO guy referred to the "title tag," he was referring to the role of that element within the page, not to the actual "<title> ... </title>" element. Although he may indeed have been of great help to you, he was still speaking imprecisely, leading to the confusion, when he referred to the "div containing the page's title" (referring to the element's role) as the "title tag" (which refers to an actual element type). To those of us here who work in the field, the term "title tag" refers to that specific element type, hence the confusion.

    In any event, if he is an SEO advisor, he will confirm that the content of the <h1> of any page should be as close as possible to the content of the <title> ... </title> element. This allows the search engines to correctly rank the relevance of the page's content to the terms entered in a search. Therefore, I would hope that, in addition to advising you to change the element type from <div> to <h1>, that he also advised you to ensure that the <title> element of the page (found in the <head> section) matches the <h1> for the page closely.

    You may wish to show this thread to your friend and see if he agrees. ;-)

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Marked as answer by cath999 Friday, February 1, 2013 2:03 PM
    Tuesday, January 29, 2013 2:51 AM
  • Thank you very much, Kathy, for clarifying to me this topic.

    Now I understand.

    Friday, February 1, 2013 2:04 PM
  • Thank you, Scott, for the detailed explanation.

    I read in detail what you write here and will study the topic further. Kathy's response and yours has to a certain degree clarified the topic to me.


    Friday, February 1, 2013 2:18 PM