CHAPTER 4. HTML TAGS AND ATTRIBUTES 47
Because the legal ID characters are so limited, it is true that you never need
to put quote marks around an ID value.
4.4.3 class=
class=specifies the class of the item. Example,class=highlight. Like
id, class can be used by CSS and JavaScript to control style and actions or
animations relating to items that share that same class. Unlike id, the same
class can be used on more than one item. If you have more than one class,
separate them by spaces and enclose the list in quote marks.
4.4.4 title=
title=specifies text that will be displayed if the user hovers their mouse
over the element for a second or so. Example,title='more information'.
It is a good way to provide hints or extra information that would otherwise
clutter the screen.
I personally think that “title” is really a horrible name for this attribute
because we already have something else called title. The whole document has
a title which is specified in the head with the syntax
...,
and which is typically displayed in the tab of the browser. The two titles
are totally different.
I think a better name would be “popup” but for historical reasons it is called
title. This new thing called title can apply to any portion of a webpage.
Exam Question 89(p.341):What does the
tag do?<br />
Acceptable Answer:gives a name to the whole webpage</p><br />
<p>Exam Question 90(p.341):What does the “title=” attribute do?<br />
Acceptable Answer:provides information that is invisible until the user<br />
hovers over it</p><br />
<h2>4.4.5 hidden= (Advanced)</h2><br />
<p>hidden=specifies that the item will not be rendered. It is invisible and<br />
takes up no space.</p><br />
<p>It may be most useful in connection with JavaScript that can remove the<br />
hidden attribute when you want to make something appear.</p> </div>
<meta itemprop='headline' content="p 48: 4.4.3 class= - HTML5, CSS3, and JavaScript Fourth Edition - free download pdf - issuhub">
</div>
<div role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<span itemprop="url"><b><a href="/view/index?id=4053&pageIndex=47" rel="previous" itemprop="name">← Previous</a></b></span>
<span itemprop="url" class="mx-3"><b><a href="/view/index?id=4053&pageIndex=49" rel="next" itemprop="name">Next →</a></b></span>
</div>
<div style="
text-align: center;
margin: 20px auto;
padding: 13px;
width: 240px;
font-size: 20px;
">
<a class="page-link" style="background-color: #72bf86;" target="_blank" href="/view/index?id=4053&pageIndex=47#bookdownload" title="Free download pdf" >Free download pdf</a>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-lg-3 ml-lg-auto mb-5 mb-lg-0">
<div class="mb-4">
<h5 class="text-dark">Get our desktop app</h5>
</div>
<a class="btn btn-icon btn-indigo rounded-circle mr-2" target="_blank" href="/download/issuhub.dmg">
<i class="fa fa-apple"></i>
</a>
<a class="btn btn-icon btn-indigo rounded-circle" target="_blank" href="/download/issuhub.exe">
<i class="fa fa-windows"></i>
</a>
</div>
<div class="col-6 col-md-3 col-lg mb-5 mb-lg-0">
<h5 class="text-dark">Company</h5>
<!-- Nav Link -->
<ul class="list-unstyled mb-0">
<li class="my-2"><a href="/about">About</a></li>
<li class="my-2"><a href="/contact">Contact</a></li>
<li class="my-2"><a href="/news/index">News</a></li>
</ul>
<!-- End Nav Link -->
</div>
<div class="col-6 col-md-3 col-lg mb-5 mb-lg-0">
<h5 class="text-dark">Features</h5>
<!-- Nav Link -->
<ul class="list-unstyled mb-0">
<li class="my-2"><a href="/quick">Quick Start</a></li>
<li class="my-2"><a href="/desktop">Desktop</a></li>
<li class="my-2"><a href="/editor-help">Editor</a></li>
</ul>
<!-- End Nav Link -->
</div>
<div class="col-6 col-md-3 col-lg">
<h5 class="text-dark">Documentation</h5>
<!-- Nav Link -->
<ul class="list-unstyled mb-0">
<li class="my-2"><a href="/support/index">Support</a></li>
<li class="my-2"><a href="/site/pricing">Pricing</a></li>
</ul>
<!-- End Nav Link -->
</div>
<div class="col-6 col-md-3">
<h5 class="text-dark">Resources</h5>
<!-- Nav Link -->
<ul class="list-unstyled mb-0">
<li class="my-2"> <a href="/tutorial" target="_blank"> <span class="media align-items-center"> <i class="fa fa-info-circle mr-2"></i> <span class="media-body">Tutorial</span> </span> </a> </li>
<li class="my-2"> <a href="/site/login"> <span class="media align-items-center"> <i class="fa fa-user-circle mr-2"></i> <span class="media-body">Your Account</span> </span> </a> </li>
</ul>
<!-- End Nav Link -->
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-6 mb-4 mb-md-0">
<!-- Nav Link -->
<ul class="nav nav-sm nav-white nav-x-sm align-items-center">
<li class="my-2"> <a href="/privacy">Privacy & Policy</a> </li>
<li class=" opacity my-2 mx-3">/</li>
<li class="my-2"> <a href="/terms">Terms</a> </li>
</ul>
<!-- End Nav Link -->
</div>
<div class="col-md-6 text-md-right">
<ul class="list-inline mb-0">
<!-- Social Networks -->
<li class="list-inline-item"> <a class="btn btn-xs btn-icon btn-soft-light" href="https://www.facebook.com/Issuhub-Flipbook-2315543688769343/"> <i class="fa fa-facebook text-dark"></i> </a> </li>
<li class="list-inline-item"> <a class="btn btn-xs btn-icon btn-soft-light" href="https://twitter.com/IssuhubBooks"> <i class="fa fa-twitter text-dark"></i> </a> </li>
<!-- End Social Networks -->
</ul>
</div>
</div>
<!-- Copyright -->
<div style="text-align: center;">
<div >© ISSUHUB. 2024. All rights reserved.</div>
</div>
<!-- End Copyright -->
</div>
</div>
</div>
</div>
<script src="/assets/6df76c57/assets/js/vendors/jquery-3.2.1.min.js"></script>
<script src="/assets/6df76c57/assets/js/vendors/bootstrap.bundle.min.js"></script></body>
</html>
