<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="en" />
<meta name="keywords" content="centos web headings visual style guide" />
<meta name="description" content="CentOS headings visual style guide is a tool to help you customize headings inside CentOS websites." />
<meta name="copyright" content="2009-2012 The CentOS Project" />
<title>Headings - Home</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen, projection" />
</head>
<body>
<a name="top" id="top"></a>
<div id="wrap">
<div id="page-header">
<!--
CentOS specific brand information. Use this section to show
the CentOS logo. The image used as CentOS logo needs to be 58
pixels height.
-->
<div id="logo">
<a title="Community Enterprise Operating System" href="http://www.centos.org/">
<img src="./Images/logo-centos.png" alt="CentOS" />
</a>
</div>
<!--
Advertisement area (468x60 pixels).
-->
<div class="ads-google">
<a title="Google Advertisement" href="">
<img src="./Images/ads-sample-468x60.png" alt="Google Advertisement" />
</a>
<!--
<script type="text/javascript">
google_ad_client = "pub-6973128787810819";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "204c8d";
google_color_bg = "345c97";
google_color_link = "0000FF";
google_color_text = "FFFFFF";
google_color_url = "008000";
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
-->
</div>
<!--
CentOS specific navigation links. Use this section to list the
web applications you want to be always visible no matter where
you are inside the CentOS web environment. Example of web
applications are: Wiki, Lists, Downloads, Forums, Planet, etc.
-->
<div class="page-line">
<hr style="display:none;" />
</div>
<div class="tabs">
<span class="current">
<a accesskey="1" title="CentOS Home Page (Alt+Shift+1)" href="http://www.centos.org/">
<span>Home</span>
</a>
</span>
<span>
<a accesskey="2" title="CentOS Wiki (Alt+Shift+2)" href="http://wiki.centos.org/">
<span>Wiki</span>
</a>
</span>
<span>
<a accesskey="3" title="CentOS Mailing Lists (Alt+Shift+3)" href="http://lists.centos.org/">
<span>Lists</span>
</a>
</span>
<span>
<a accesskey="4" title="CentOS Forums (Alt+Shift+4)" href="http://forums.centos.org">
<span>Forums</span>
</a>
</span>
<span>
<a accesskey="5" title="CentOS Planet (Alt+Shift+5)" href="http://planet.centos.org">
<span>Planet</span>
</a>
</span>
<span>
<a accesskey="6" title="CentOS Bugs (Alt+Shift+6)" href="http://bugs.centos.org">
<span>Bugs</span>
</a>
</span>
<span>
<a accesskey="7" title="CentOS SIGs (Alt+Shift+7)" href="http://sigs.centos.org/">
<span>SIGs</span>
</a>
</span>
<span>
<a accesskey="8" title="CentOS Downloads (Alt+Shift+8)" href="http://mirrors.centos.org">
<span>Downloads</span>
</a>
</span>
</div>
<!--
The CentOS Distribution last releases.
-->
<div id="last-releases">
<div class="left">
<span class="title"><a href="">Last Releases</a>:</span>
<span class="release">
<a href="">6.0</a>
</span>
<span class="release">
<a href="">5.8</a>
</span>
<span class="release">
<a href="">4.12</a>
</span>
<span class="release last">
<a href="">3.18</a>
</span>
</div>
<div class="right">
<span class="rss">
<a href="" title="RSS">
<span>RSS</span>
</a>
</span>
</div>
</div>
<!--
Application links. Use this section to organize user specific
links (e.g., session links, the last pages the user visited,
and the main pages the application is made of).
-->
<div id="appslinks">
<!--
User links. Use this section to set Login, Register, Lost your
password?, date and time of last vist, visited pages trail and
similar information.
-->
<div class="userlinks">
<div class="lastvisit">
<span class="title">
<a href="">Your last visit was at</a>
</span>
<span class="datetime">Thu Aug 25 14:13:05 CDT 2011</span>
</div>
<div class="session">
<span>
<a href="">Lost your password?</a>
</span>
<span>
<a href="">Register</a>
</span>
<span class="last">
<a href="">Login</a>
</span>
</div>
<div class="trail">
<span>
<a href="">Pagination</a>
</span>
<span>
<a href="">Lists</a>
</span>
<span>
<a href="">Headings</a>
</span>
<span>
<a href="">Links</a>
</span>
<span>
<a href="">Texts</a>
</span>
<span class="last">
<a href="">Home</a>
</span>
</div>
</div>
<!--
Application specific links for content stuff. Use this section
to set application specific links that need to remain always
visible inside the application environment.
-->
<div class="tabs">
<span>
<a title="Welcome to the web special interest group" href="index.html">
<span>Welcome</span>
</a>
</span>
<span class="current">
<a title="CentOS headings visual style guide." href="headings.html">
<span>Headings</span>
</a>
</span>
<span>
<a title="CentOS texts visual style guide." href="texts.html">
<span>Texts</span>
</a>
</span>
<span>
<a title="CentOS lists visual style guide." href="lists.html">
<span>Lists</span>
</a>
</span>
<span>
<a title="CentOS links visual style guide." href="links.html">
<span>Links</span>
</a>
</span>
<span>
<a title="CentOS tables visual style guide." href="tables.html">
<span>Tables</span>
</a>
</span>
<span>
<a title="CentOS forms visual style guide." href="forms.html">
<span>Forms</span>
</a>
</span>
<span>
<a title="CentOS pagination visual style guide." href="pagination.html">
<span>Pagination</span>
</a>
</span>
</div>
</div>
<div class="page-line white">
<hr style="display:none;" />
</div>
</div>
<!--
Start page body definitions.
-->
<div id="page-body">
<!--
The content of right column goes here.
<div id="rightbar">
<ul class="first">
<li><a href="">Release Notes</a></li>
<li><a href="">Lifetime</a></li>
<li><a href="">Downloads</a></li>
<li><a href="">Documentation</a></li>
<li class="current"><a href="">Security Advisories</a></li>
<li><a href="">Bugs</a></li>
<li><a href="">Tips and tricks</a></li>
<li><a href="">HowTos</a></li>
</ul>
<ul>
<li>In this bar, it is possible to separate links by
blocks.</li>
</ul>
</div>
-->
<div id="content">
<!--
The content of left column starts here.
-->
<h1 class="title">
<a name="head-2b26351947fab49d9ed9c2cf18f548e2" id="head-2b26351947fab49d9ed9c2cf18f548e2">Headings</a>
</h1>
<p>CentOS Headings Visual Style Guide.</p>
<div class="toc">
<p>Table of contents</p>
<dl>
<dt>
<a href="#head-2b26351947fab49d9ed9c2cf18f548e2">Headings</a>
</dt>
<dt>
<a href="#head-d022bccef4802ea4270cc819cfb860f8">Heading Level 1</a>
<dl>
<dt>
<a href="#head-5bbb5bd41af2fc0e3d2a51ec985636fb">Heading Level 2</a>
<dl>
<dt>
<a href="#head-3b80372f2d12cbb22ab0112c2315de2a">Heading Level 3</a>
<dl>
<dt>
<a href="#head-9bdcdf4b7129faf02afe79dc68592677">Heading Level 4</a>
<dl>
<dt>
<a href="#head-d233ead30fbae093b84e01c9ecf97e79">Heading Level 5</a>
<dl>
<dt>
<a href="#head-06c191ce76c63165cb3709a5eded8897">Heading Level 6</a>
</dt>
</dl>
</dt>
</dl>
</dt>
</dl>
</dt>
</dl>
</dt>
<dt>
<a href="#head-39c4697133e69b6755b6f2665b483a50">Recommendations</a>
</dt>
</dl>
</dt>
</dl>
</div>
<h1 class="title">
<a name="head-d022bccef4802ea4270cc819cfb860f8" href="#head-d022bccef4802ea4270cc819cfb860f8" id="head-d022bccef4802ea4270cc819cfb860f8">Heading Level 1</a>
</h1>
<pre><h1 class="title" class="title"><a name="head-5871b1272673f7cf89bcaf48972c848a" href="#head-5871b1272673f7cf89bcaf48972c848a">Heading Level 1</a></h1></pre>
<h2 class="title">
<a name="head-5bbb5bd41af2fc0e3d2a51ec985636fb" href="#head-5bbb5bd41af2fc0e3d2a51ec985636fb" id="head-5bbb5bd41af2fc0e3d2a51ec985636fb">Heading Level 2</a>
</h2>
<pre><h2 class="title"><a name="head-d33a28a4193cffb949f506cfdf770f05" href="#head-d33a28a4193cffb949f506cfdf770f05">Heading Level 2</a></h2></pre>
<h3 class="title">
<a name="head-3b80372f2d12cbb22ab0112c2315de2a" href="#head-3b80372f2d12cbb22ab0112c2315de2a" id="head-3b80372f2d12cbb22ab0112c2315de2a">Heading Level 3</a>
</h3>
<pre><h3 class="title"><a name="head-82dd23c665d8ee437a980459c8b80d7a" href="#head-82dd23c665d8ee437a980459c8b80d7a">Heading Level 3</a></h3></pre>
<h4 class="title">
<a name="head-9bdcdf4b7129faf02afe79dc68592677" href="#head-9bdcdf4b7129faf02afe79dc68592677" id="head-9bdcdf4b7129faf02afe79dc68592677">Heading Level 4</a>
</h4>
<pre><h4 class="title"><a name="head-157dc030ea314f4b53a6ed238113a3f8" href="#head-157dc030ea314f4b53a6ed238113a3f8">Heading Level 4</a></h4></pre>
<h5 class="title">
<a name="head-d233ead30fbae093b84e01c9ecf97e79" href="#head-d233ead30fbae093b84e01c9ecf97e79" id="head-d233ead30fbae093b84e01c9ecf97e79">Heading Level 5</a>
</h5>
<pre><h5 class="title"><a name="head-33628cc07bcbefc4e4732407b8680bf6" href="#head-33628cc07bcbefc4e4732407b8680bf6">Heading Level 5</a></h5></pre>
<h6 class="title">
<a name="head-06c191ce76c63165cb3709a5eded8897" href="#head-06c191ce76c63165cb3709a5eded8897" id="head-06c191ce76c63165cb3709a5eded8897">Heading Level 6</a>
</h6>
<pre><h6 class="title"><a name="head-93b42a4a61a0b05a81aff6224555603c" href="#head-93b42a4a61a0b05a81aff6224555603c">Heading Level 5</a></h6></pre>
<h2 class="title">
<a name="head-39c4697133e69b6755b6f2665b483a50" id="head-39c4697133e69b6755b6f2665b483a50">Recommendations</a>
</h2>
<p>As heading design recommendations:</p>
<ul>
<li>
<p>When defining headings, make them accessible
using the following structure:</p>
<pre><h1 class="title"><a name="head-a1811f6545db914813115417011b2df9">Heading</a></h1></pre>
<p>Where <tt>a1811f6545db914813115417011b2df9</tt> is the
result of applying <tt>md5sum</tt> command to
<tt>Heading</tt> string. In this case,
<tt>Heading</tt> is the heading name.</p>
</li>
<li>
<p>Sometimes headings are used as links. For those
cases, use the following structure:</p>
</li>
<pre><h1 class="title"><a href="#head-a1811f6545db914813115417011b2df9">Heading</a></h1></pre>
<p>or the following, if you want to make a heading an
anchor and link of itself:</p>
<pre><h1 class="title"><a name="head-a1811f6545db914813115417011b2df9" href="#head-a1811f6545db914813115417011b2df9">Heading</a></h1></pre>
<li>
<p>Avoid using more than 4 levels of headings. If
you think you need to, you probably do; but consider
splitting your content in several pages instead. Too
many headings could affect your content
readability.</p>
</li>
</ul>
<!--
The content of left column ends here.
-->
<div class="page-line">
<hr style="display:none;" />
</div>
</div>
</div>
<!--
Start page footer definitions.
-->
<div id="page-footer">
<div class="credits">
<div class="top">
<a title="Top" href="#top">
<img src="./Images/top.png" alt="Top" />
</a>
</div>
<div class="copyright">© 2009-2012 The CentOS Project. All rights reserved.</div>
<div class="license">This website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share Alike 3.0 Unported License</a>.</div>
</div>
</div>
</div>
</body>
</html>