CODEWITHSUNDEEP
htmlalt
user3890317
user3890317

Reputation:

Issue an alt attribute for image in HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href='http://fonts.googleapis.com/css?family=Raleway:900,500,600,200,400,700' rel='stylesheet' type='text/css'>
      <title>Layout</title>
      <link href="css/style.css" rel="stylesheet">
   </head>
   <body>

         <div class="container">
            <div class="navbar-header">
    <img src="img/logo.png" / alt="selva">
            </div>
         </div>

      <div class="container theme-showcase">
         <div class="container">
            <div class="banner-div">
               <img src="img/banner.png" class="banner"/>
               <img src="img/issue-no-img.png" class="issue-badge"/>
               <span class="issue">Issue No.<br /><b>376</b></span>
            </div>
            <div class="row">
               <div class="col-md-4">
                  <img src="img/left-note-img.png"/ alt="">
               </div>
               <div class="col-md-4 align-center">
                  <p><span class="new-radius"> NEW! </span>&nbsp;<span class="new">JUN 07, 2003</span></p>
                  <p><i>Get your breaks points on.</i></p>
                  <span>
                     <h1>DOT NET ARTICLES</h1>
                  </span>

                  <span class="comments"><i>by</i> <a href="#">JOHN WOO</a> <i> - 10 Commments</i></span><br/>
               </div>
               <div class="col-md-4 pull-right">
                  <div class="input-group">
                     <input type="text" class="form-control search-input-box" placeholder="Search..." />
                     <span class="input-group-addon glyphicon glyphicon-search"></span>
                  </div>
               </div>
            </div>
            <hr class="hr-style"/>
            <p class = "header-pgf">
               Text, navigation, and tables, oh, my! What's a responsive web designer to do? How can you confine your design to as few major breakpoints as possible? Where and when will you sketching?  Is it possible to sketch on actual devices, and what are the accessibility implications of doing so? The answers to these and other profound questions will be found in this exclusive excerpt from Chapter 7 of Responsive Design Workflow, Stephen Hay's new book, available now from New Riders.
            </p>
            <hr class="hr-style">
            <h1 class="more-apart">More from A List Apart</h1>
            <hr class="hr-style">
            <div class="row">
               <div class="col-md-3">
                  <h2>Columnists</h2>
                  <p>JACK MCGRANE <i>on</i> CONTENT</p>
                  <p class="pgf-header">The Alternative is Nothing</p>
                  <img src="img/thumb1.jpg" class="float-left"/> 
                  <p>We're witnessing one of thr latest waves of technological disruption, as mobile devices put access to the internet in the hands of people who previously never had that power.</p>
               </div>
               <div class="col-md-3">
                  <h2>From the Blog</h2>
                  <p class="pgf-header">Maps Should Be Crafted.Not "Plugged In"></p>
                  <p>Web designers: erase the line between "the map" and "the content" by harnessing the power of open-source Leafler and your own fresh creative thinking. In the tradition of ALA's recent "Hack Your Maps." Happy Cog's Brandon Rosage shares how to make location a central aspect of the content experience-not just a visual aid.</p>
               </div>
               <div class="col-md-3">
                  <p class="md-3">Amazon Web Services Introduces a New API</p>
                  <p>Amazon Web Services Identity and Access Management(IAM) is expanding to support web identity federation. Developers can integrate Amazon.com, Facebook, or Google odentity into their app by using the new AWS Security Token Services(STS) API, AssumeRoleWithWebIdentity. to request temporary security credentials.</p>
               </div>
               <div class="col-md-3">
                  <h5>Gratitude</h5>
                  <p>Thanks to our RSS sponser Typekit-offering desktop and web fonts in a single subscription starting June 17</p>
                  <div class="well align-center">
                     <img src="img/mothers-day.jpg" /> <br/>
                     <p class="font-10">Two special Mothers' Say Kits are available from Field Notes Brand. Ad via The Deck </p>
                  </div>
                  <div class="job-board">
                     <h5>Job Board</h5>
                     <a href="#" >New York Times is looking for a <br />Ruby on Rails Web Developer.</a>
                     More on the <a href ="#">Job Board ></a>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- /container -->
      <div class="footer" style="">
         <div class="container">
            <div class="list-footer" style="font-size:13px;">
               <span><img src="img/article-logo.png" /></span>
               <span>ARTICLES</span>
               <span>COLUMNS</span>
             <span>BLOG</span>
              <span>TOPICS</span>
            </div>
            <div class = "list-footer" style="font-size:12px;"> 
             <span>ABOUT</span>
            <span>AUTHORS</span>
              <span>MASTHEAD</span>
             <span>CONTRIBUTE</span>
             <span>STYLE GUIDE</span>
               <span>CONTACT</span>
            <span>SPONSORSHIPS</span>
            </div>
            <hr class="hr-style"/>

            <div class="row">
               <div class="col-md-6">
                  <img src="img/dot-net-ad.jpg" class="footer-image"/> 
                  <p class="footer-title">.NET Training</p>
                  <p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
                  <a class="footer-link" href="#">ask here. ></a> 
               </div>
               <div class="col-md-6">
                  <img src="img/shopify-expert-ad.jpg" class="footer-image"/> 
                  <p class="footer-title">Shopify Expert</p>
                  <p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
                  <a class="footer-link" href="#">click to view</a>
               </div>
            </div>
            <hr class="hr-style" />
            <div style="text-align:center">
               <p class="copyright">Copyright &copy; 2013 Dot Net How</p>
            </div>
         </div>
      </div>
   </body>
</html>

I have an one doubt in in HTML. When add image in HTML, the alt attribute is need or not.

But I know the use of alt atrribute, when remove this attribute, there is no change in my web page.

So I want to know the alt attribute is needed or not?

Upvotes: 0

Views: 186

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

The alt attribute is needed to make the page accessible to people who do not see the images, such as blind people using a speech-based browser or Braille device and people using a normal browser in “no images” mode (e.g. when using slow connections). In addition to this fundamental importance, alt attributes may be used in other contexts, too, e.g. by search engines when searching for images with text queries.

The practical importance varies according to the nature of the page, the images, and the users – and the adequacy of the alt texts.

In particular, using the empty string alt="" tells non-visual browsers that they should ignore the img element. Without it, such browsers tends to announce the presence of an image and e.g. spell out the URL of the image; this can be very annoying to the user and quite unnecessary if the image is decoration only or a thematic image with no message apart from illustrating things expressed in the text.

Upvotes: 0

flau
flau

Reputation: 1380

The alt tag is used to make your website more accessible to those using screenreaders and such or non-visual browsers, as they won't be able to view the image.

If you have an alt tag, it will be used instead.

http://www.w3.org/QA/Tips/altAttribute

A text equivalent brings the following benefits to your web site and its visitors in the following common situations:

  • Nowadays, Web browsers are available in a very wide variety of platforms with very different capacities; some cannot display images at all or only a restricted set of type of images; some can be configured to not load images. If your code has the alt attribute set in its images, most of these browsers will display the description you gave instead of the images.

  • Some of your visitors cannot see images, be they blind, color-blind, low-sighted; the alt attribute is of great help for those people that can rely on it to have a good idea of what's on your page.

  • Search engine bots belong to the two above categories: if you want your website to be indexed as well as it deserves, use the alt attribute to make sure that they won't miss important sections of your pages.

The alt attribute is required according to the HTML 4.01 specification, but your page will display whether the alt attributes are present or not. It will only display differently if you turn off image loading in your browser.

It's up to you whether you'd like to make your website more accessible to those not willing or able to view images or not.

Upvotes: 2

Swaraj
Swaraj

Reputation: 383

Yes a Valid question. You wont notice the difference until and unless you know its importance.

Technically use of alt is advised and is meant as an guideline for web designing.

Turn off images in a browser and you will see the difference. Alt is used as an alternative for image which describes the image completely. If in case site is slow and image fails to load atleast user will be able to view the description of the image.

It is also helpful in SEO (search engine optimization) So it is meant to be a best practice.

Hope this makes it clear.

Upvotes: 1

Related Questions