Setting Up an HTML Document 95
Structural
Tags
Setting Up an HTML Document
Web Design in a Nutshell, eMatter Edition
The Document Header
The header, delimited by the
tag, contains information that describes the
HTML document. The head tag has no attributes of its own, but merely serves as a
container for other tags that help define and manage the document’s contents.
Titles
The most commonly used element within the header is the document title (within
tags, as shown in the example above), which provides a description of<br />
the page’s contents. The title is also used as the name of the link as displayed in a<br />
user’s bookmarks or “hot list.” Search engines rely heavily on document titles as<br />
well. For all these reasons, it is important to provide thoughtful and descriptive<br />
titles for all your documents and avoid vague titles such as “Welcome,” or “My<br />
Page.”<br />
<p>Other header elements</p><br />
<p>Other useful HTML elements are also placed within the <head> tags of a<br />
document:</p><br />
<base><br />
This tag establishes the document’s base location, which serves as a refer-<br />
ence for all the links in the document. For more information, see Chapter 8,<br />
Creating Links.<br />
<link><br />
This tag defines the relationship between the current document and another<br />
document. Although it can signify relationships such as index, next, and<br />
previous, it is most often used today to link a document to an external style<br />
sheet (see Chapter 23,Cascading Style Sheets).<br />
<meta><br />
“Meta” tags are used to provide information about a document, such as<br />
keywords or descriptions to aid search engines. It may also be used for client-<br />
pull functions. The<meta> tag is discussed later in this chapter.<br />
<script><br />
JavaScripts and VBScripts may be added to the document within its header.<br />
<style><br />
Embedded style sheets must be added to the document header by placing the<br />
<style>element within the<head>container. For more information, see<br />
Chapter 23).<br />
<p>The Document Body</p><br />
<p>The document body, delimited by<body>tags, contains the contents of the docu-<br />
ment—the part that you want to display in the browser window.</p><br />
<p>The body of an HTML document might consist of just a few paragraphs of text, a<br />
single image, or a complex combination of text, images, tables, and multimedia<br />
objects. What you put on the page is up to you.</p> </div>
<meta itemprop='headline' content="p 109: Setting Up an HTML Document 95 Structural Tags Setting Up an HTML Document Web Design in a Nutshell, eMatter Edition The Documen ... - A Complete Guide to Web Design - free download pdf - issuhub">
</div>
<div role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<span itemprop="url"><b><a href="/view/index?id=4334&pageIndex=108" rel="previous" itemprop="name">← Previous</a></b></span>
<span itemprop="url" class="mx-3"><b><a href="/view/index?id=4334&pageIndex=110" 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=4334&pageIndex=108#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>
