Page Structure

This diagram portrays a linear version of Wikidot's page structure. This shows all of the tags that Wikidot utilizes in order to form the page you see, complete with any ID or class individual elements may use.

Here, you can see the level of each element. Levels go deeper as an elements are nested within one another. So for instance, everything on level 6 is contained within level 5. Since the top bar is on level 6, then it is contained within the header, which is on level 5. You can proceed deeper to see what the top bar contains as well. So, if you ever wanted to style the links that appear in the top bar drop downs, you can style #top-bar ul li ul li a, which is in the order that this page structure shows.

Show up to level:
0 1 2 3 4 5 6 7 8 9 10 11 12 13

<html>

<head>

<title> </title>

<script type="text/javascript"> </script>

<script type="text/javascript"> </script>

<script type="text/javascript"> </script>

<script type="text/javascript"> </script>

<meta>

<meta>

<script type="text/javascript"> </script>

<style type="text/css"> </style>

<style id="internal-style" type="text/css"> </style>

<link>

<link>

<link>

<script type="text/javascript"> </script>

<style> CSS Module Styling</style>

<script type="text/javascript"> </script>

</head>

<body id="html-body">

<a name="page-top"> </a>

<div id="navi-bar">

<a class="logo">

<span> </span>

</a>

<div class="new-site">

<form>

<input class="text empty">

</form>

</div>

<div class="share">

<span> </span>

<a class="twitter">

<img>

</a>

<a class="facebook">

<img>

</a>

<a class="delicious">

<img>

</a>

<a class="digg">

<img>

</a>

<a class="reddit">

<img>

</a>

<a class="stumbleupon">

<img>

</a>

</div>

<div class="action-buttons">

<a>Edit</a>

<a>History</a>

<a>Tags</a>

<a>Source</a>

</div>

<a class="random-site">Explore »</a>

<a class="close">

<img>

</a>

</div>

<div id="navi-bar-shadow"> </div>

<script type="text/javascript"> </script>

<div id="container-wrap-wrap">

<div id="container-wrap">

<div id="container">

<div id="header">

<h1>

<a>

<span> </span>

</a>

</h1>

<h2>

<span> </span>

</h2>

<div id="search-top-box">

<form id="search-top-box-form">

<input id="search-top-box-input" class="text empty">

<input class="button">

</form>

</div>

<div id="top-bar">

<ul>

<li>

<a> Single Link</a>

</li>

<li>

<a> Nested Links</a>

<ul>

<li>

<a> </a>

</li>

<li>

<a> </a>

</li>

</ul>

</li>

</ul>

</div>

<div id="login-status">

<span class="printuser">

<a>

<img class="small">

</a>

</span>

<a id="my-account">My account</a>

<a id="account-topbutton"> </a>

<div id="account-options">

<ul>

<li>

<a>Activities</a>

</li>

<li>

<a>Messages</a>

</li>

<li>

<a>Sites</a>

</li>

<li>

<a>Settings</a>

</li>

<li>

<a>Upgrade</a>

</li>

<li>

<a>Sign out</a>

</li>

</ul>

</div>

<script type="text/javascript"> </script>

</div>

<div id="header-extra-div-1">

<span> </span>

</div>

<div id="header-extra-div-2">

<span> </span>

</div>

<div id="header-extra-div-3">

<span> </span>

</div>

</div>

<div id="content-wrap">

<div id="side-bar">

Side Bar Content

</div>

<div id="main-content">

<div id="action-area-top"> </div>

<div id="page-title"> </div>

<div id="breadcrumbs">

<a> </a>

<a> </a>

</div>

<div id="page-content">

Page Content

</div>

<div id="page-info-break"> </div>

<div id="page-options-container">

<div id="page-info">

<span class="odate"> </span>

</div>

<div class="page-watch-options">

<a>site</a>

<a>category</a>

<a>this page</a>

<a>?</a>

</div>

<div id="page-options-bottom" class="page-options-bottom">

<a id="edit-button">Edit</a>

<a id="tags-button">Tags</a>

<a id="discuss-button">Discuss</a>

<a id="history-button">History</a>

<a id="files-button">Files</a>

<a id="print-button">Print</a>

<a id="site-tools-button">Site tools</a>

<a id="more-options-button">+ Options</a>

</div>

<div id="page-options-bottom-2" class="page-options-bottom">

<a id="edit-sections-button">Edit Sections</a>

<a id="edit-append-button">Append</a>

<a id="edit-meta-button">Edit Meta</a>

<a id="watchers-button">Watchers</a>

<a id="backlinks-button">Backlinks</a>

<a id="view-source-button">Page Source</a>

<a id="parent-page-button">Parent</a>

<a id="page-block-button">Lock Page</a>

<a id="rename-move-button">Rename</a>

<a id="delete-button">Delete</a>

</div>

<div id="page-options-area-bottom"> </div>

</div>

<div id="action-area">

Depends…

</div>

</div>

</div>

<div id="footer">

<div class="options">

<a id="wikidot-help-button">Help</a>

<a id="wikidot-tos-button">Terms of Service</a>

<a id="wikidot-privacy-button">Privacy</a>

<a id="bug-report-button">Report a bug</a>

<a id="abuse-report-button">Flag as objectionable</a>

</div>

<a>Wikidot.com</a>

</div>

<div id="license-area" class="license-area">

Your license choice

</div>

<div id="extrac-div-1">

<span> </span>

</div>

<div id="extrac-div-2">

<span> </span>

</div>

<div id="extrac-div-3">

<span> </span>

</div>

<div id="footer-bar">

<div> </div>

<h2>Other interesting sites</h2>

<div class="units">

<div class="unit">

<div class="inner">

<a class="image">

<img class="thumbnail"> </img>

</a>

<h3>

<a> </a>

</h3>

<div class="desc"> </div>

</div>

</div>

<div class="unit">

<div class="inner">

<a class="image">

<img class="thumbnail"> </img>

</a>

<h3>

<a> </a>

</h3>

<div class="desc"> </div>

</div>

</div>

<div class="unit">

<div class="inner">

<a class="image">

<img class="thumbnail"> </img>

</a>

<h3>

<a> </a>

</h3>

<div class="desc"> </div>

</div>

</div>

<div class="unit">

<div class="inner">

<a class="image">

<img class="thumbnail"> </img>

</a>

<h3>

<a> </a>

</h3>

<div class="desc"> </div>

</div>

</div>

</div>

</div>

</div>

</div>

<div id="extra-div-1">

<span> </span>

</div>

<div id="extra-div-2">

<span> </span>

</div>

<div id="extra-div-3">

<span> </span>

</div>

<div id="extra-div-4">

<span> </span>

</div>

<div id="extra-div-5">

<span> </span>

</div>

<div id="extra-div-6">

<span> </span>

</div>

</div>

<div id="page-options-bottom-tips"> </div>

<div id="page-options-bottom-2-tips"> </div>

<div id="account-notifications-dummy"> </div>

<div id="dummy-ondomready-block"> </div>

<script type="text/javascript"> </script>

<script type="text/javascript"> </script>

<noscript>

<img> </img>

</noscript>

</body>

</html>

In case I forget, here is a reference

<span> </span>

<a class="logo"> </a>

<input id="search-top-box-input" class="empty"> </input>

<input id="search-top-box-input" class="text empty"> </input>

<script type="text/javascript"> </script>

External References

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License