11 Replies Latest reply: May 17, 2013 5:28 PM by VL Branko RSS

    Dont shoot me im new!

    shakespearesei Community Member

      Ok....so firstly, apologies as this may seem a really obvious to answer question...I just want to make sure im doing it correctly!!

       

      So...learning Dreamweaver CS6, html and CSS and wanted to know.......

       

      In the header of my website i wanted to place my company logo.....before, i was just using text with a nice font so the code was like so.....

       

       

       

      <body>

      <div id="container">

        <div id="header">

          <h1>Shakespeare</h1>

          <h1>Engineering</h1>

          <p>Shaping the future</p>

       

       

      Now i want to add a logo image so is it correct by just entering

       

       

      <body>

      <div id="container">

        <div id="header">

          <h1><img src="images/SHAKESPEARE sml.png" width="339" height="101" alt="Logo"></h1>

          <p>Shaping the future</p>

       

       

      This works.....but I dont know if this is the CORRECT way to do it!

       

       

       

      any help/advice would be greatly appreciated........Many thanks,  Sam

        • 1. Re: Dont shoot me im new!
          kennethkawamoto2 Community Member

          Semantic HTML and SEO arguments aside, one thing clearly "wrong" is alt="Logo". Should be alt="Shakespeare Engineering"

           

          --

          Kenneth Kawamoto

          http://www.materiaprima.co.uk/

          • 2. Re: Dont shoot me im new!
            shakespearesei Community Member

            alt being the alt tag, so therefore logo isnt descriptive enough? I pressume anyway?!

             

            Thank you for you reply Kenneth

            • 3. Re: Dont shoot me im new!
              kennethkawamoto2 Community Member

              <h1> is your page (or article/section) heading, i.e. title. A search engine robot, a screen reader, or any text-based client will not understand your image therefore will treat alt as your page title. Your page title is not "Logo", is it?

               

              --

              Kenneth Kawamoto

              http://www.materiaprima.co.uk/

              • 4. Re: Dont shoot me im new!
                mhollis55 Community Member

                SEO is "Search Engine Optimization." Search engines use little applications to read your website to figure out what's on it. Initially, you had type that had your company's name. Now you have replaced that with an image. So your "alt" tag should describe that image.

                 

                In fact, your image file name could also describe it, so I would rename the image from SHAKESPEARE sml.png (which will be read as SHAKESPEARE%20sml.png) to: shakespeare-engineering.png or shakespeare_engineering.png and do the following with your alt tag: alt="Shakespeare Engineering, Shaping the Future, providing mechanical engineering for the masses"

                 

                This assumes you do mechanical engineering.

                 

                I agree with you placing your logo into your <h1> tag. Makes it important.

                 

                Please understand, we're picking nits here, but that alt tag is very important.

                • 5. Re: Dont shoot me im new!
                  shakespearesei Community Member

                  @kenneth   Aha! Im with you, thank you very much for your response

                   

                  @mhollis55  That makes complete sense....and please, dont think that you are picking nits....I would much rather do it correctly than slap dash, so thank you very much for your reply

                   

                   

                  wow.....what a great forum!

                  • 6. Re: Dont shoot me im new!
                    VL Branko Community Member

                    mhollis55 wrote:

                     

                     

                    I agree with you placing your logo into your <h1> tag. Makes it important.

                    What effect does putting an image within h1 tag have? I thought it only affects text not images.

                    • 7. Re: Dont shoot me im new!
                      mhollis55 Community Member

                      Anything in the <h1> tag is seen as very, very important according to the search engines. It's the Primary subject fot that page or div or article or section (depending on whether or not your are HTML4 or HTML5.

                       

                      Now, that needs to be supported by content, and it is very important to have that in the <title> tag as well. But one would presume that the alt tag for a logo will be supported by content. A website for Sears will have material on it that relates to what Sears sells.

                      • 8. Re: Dont shoot me im new!
                        Nancy O. MVP

                        I disagree with Mark on this. In the absence of any meaningful content inside the <h1> tag, the page might just as well forego using <h1> at all.  Images alone are not heading worthy.  They add visual interest for sure, but they are no substitute for real content.  A better approach would be to utilize the <h1> and <h2> tags like this:

                         

                        <!doctype html>

                        <html>

                        <head>

                        <meta charset="utf-8">

                        <title>HTML5 document</title>

                         

                        <style>

                        body {

                        width: 960px;

                        margin: 0 auto; /**with width, this is centered**/

                        background: #CFC;

                        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

                        font-size: 100%;

                        }

                         

                        header {

                        background: #FFF;

                        border: 2px solid #999;

                        overflow: hidden; /**float containment**/

                        }

                         

                        header h1 {

                        letter-spacing: 3.5px;

                        font-size: 46px;

                        margin: 65px 0 0 0;

                        padding: 0;

                        }

                         

                        header h2 {

                        color: #999;

                        letter-spacing: -1px;

                        font-size: 22px;

                        margin: 0;

                        padding-left: 290px;

                        }

                         

                        .logo {

                        float: left;

                        height: 200px;

                        width: 200px

                        }

                        .green { color: #693 }

                         

                        </style>

                        </head>

                        <body>

                         

                        <header>

                        <img class="logo" src="Logo.png" width="150" height="150" alt="XYZ company logo" />

                        <h1>Your <span class="green">Site Name</span></h1>

                        <h2>"Some pithy slogan goes here!"</h2>

                        </header>

                         

                         

                        </body>

                        </html>

                         

                        Which looks like this:

                         

                        page-header.jpg

                         

                         

                        Nancy O.

                        • 9. Re: Dont shoot me im new!
                          mhollis55 Community Member

                          So, the contents of an alt="" tag is not meaningful?

                           

                          I disagree.

                          • 10. Re: Dont shoot me im new!
                            Nancy O. MVP

                            Just to clarify, alt tags are not tags, they are attributes.  And you definitely should use them for web accessibility reasons.  But as we know from past abuses, stuffing alt attributes with keywords and phrases has no impact on search engines and will not improve your site's ranking on SERPs.   Semantic meaning comes from the logical organization of text inside recognized HTML tags: <h1>, <h2>, <h3>, <p>, <adddress>, <blockquote>, <cite>, <code>, etc...

                             

                             

                            Nancy O.

                            • 11. Re: Dont shoot me im new!
                              VL Branko Community Member

                              Thanks for the clarification.