Company logo is the most important of web page . So, we need to give more focus on it . So, we have specify h1 header element . Here we have so many web standard format.

Simple Format :

   <h1 title="World Wide Web" id="logo">
    W3C </h1>

   <h2 here" id="slogans">
   Leading the Web to Its Full Potential
   </h2>

Note : It would better to use header text rather than image on company logo. It takes less time to load text rather than image. So, h1 element is more better than using image

. If your company title is not informative then you can use title for full information. For exmple . W3C is none informative so that we need to set title attribute for h1 tag . If compnay’s name or h1 elemement text is full informative then title attribute is use less for user agent.

Simple Link Format :

  <h1 id="logo">
    <a href="#" title="Company Logo">
    Company Logo
    </a>
  </h1>
  <h2 id="slogans">
  Company Slogans goes here
  </h2>

Note : Give necessary css structure to a element for logo as backgrund. So, that user can click . Here I have replace title in a element , due to the user behaviour . For example : hover, click,double click

Structure Format :

<div id="logo">
 <h1 title="World Wide Web">W3C</h1>
 <h2 >Company Slogans goes here </h25>
</div>

Note : I have replace title tag h1 to a element because using multiple title attribute for single text is bitter test for me and it is not systamatic for screen reader browser. Screen reader sepeal mutiple times for same words, if we set same title for <a> element and <h1> element. In this structure format id attribute of html element goes to div element. So, the html code gets clean and tidy. Through id “logo” . We can set css with hierarchy style. For example

   div.logo h1{
     /* css code goes here */
   }

   div.logo h2{
    /* css code goes here */
   }

Decorate Logo Format :

  <h1 id="logo">
   <a href="#" title="Company Logo">
         Company <span>Logo</span>
   </a>
  </h1>

  <h2 title="Company Slogans goes  here" id="slogans">
  Company Slogans <span>goes here</span>
  </h2>

  Example :

Note : span is specially used for texture format rather for image background format . For extra decoration of company log text, we can use span in text .

Report of popular Website’s logo pattern

W3C (http://www.w3.org/)

HTML

<h1  id="logo">
   <img height="48" width="315"  src="#" alt="The World Wide Web Consortium (W3C)" />
</h1>

(Text would be more then image)

Yahoo (http://www.yahoo.com)

HTML

<h1>
<img id="ylogo" alt="Yahoo" src="">
</h1>

(Text would be more then image)

WordPress (http://www.wordpress.org)

HTML

<h1>
<a href="#">Wordpress.org</a>
</h1>

(Very nice structure )

Mozilla(http://www.mozilla.com/en-US/firefox/)

HTML

<h1>
<a href="#" title="Back to home page">
<img src="#" height="56" width="145" alt="Mozilla"> </a> </h1>

(Text would be more then image.Title on <a> element is plus point)

Smashing Magazine(http://www.smashingmagazine.com/)

HTML

 <h1  class="logo">
   <a  href="#" title="Smashing Magazine Homepage">
     <img  height="83" width="229" alt="Smashing Magazine
~ we smash you with the information that will make
your life easier. really." src="#"/> </a> </h1>

(Text would be more then image)

Digg(http://digg.com/)

HTML

<h1><a href="#">digg</a></h1>

(Very Nice Strtucture for Log format)

Css

#h h1 a, #h  .site-name a {
  display: block;
  height: 45px;
  width: 79px;
  text-indent: -2000em;
  z-index: 1000; /* need for FX and IE */
  background: url(/img/menu-current.gif)  -116px -733px no-repeat;
}

msn(http://www.msn.com)

HTML

<div title="MSN.com" class="imgMSFT"/>

CSS

#msnlogo div{
background:url(i/msn_b2.gif) 15px 19px no-repeat;
flaot:left;
height:6.97em;
width:137px;
}

(Here <h1> element is absence . So it is bad practice to structure logo strucgture)

Conclusion :

  • User <h1> element for logo
  • Using logo value for id attribute in top most element .Ex: <h1 id="logo">Logo</h1>
  • Title is use for informative text.
  • Using to title of in <h1> header element.
  • Use title in <a> element if the logo is click able and remove title from header element
  • Use <span> element for extra decoration
  • User text rather than image for logo and set background image on <h1> element through css.

Sample Logo Structure

 

Advertisements