Skip to content

Instantly share code, notes, and snippets.

@tomhodgins

tomhodgins/codeview.html

Last active December 21, 2015 02:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomhodgins/6237779 to your computer and use it in GitHub Desktop.
Save tomhodgins/6237779 to your computer and use it in GitHub Desktop.
Download ZIP
This page contains some fun CSS that displays a number of HTML tags and information about the structure of the markup visually on the page. I'd love to turn this into a bookmarklet or chrome extension and allow your to apply it to websites in the wild too!
Raw
codeview.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<!-- Bootstrap: with responsive -->
<link href="http://cdn.staticresource.com/bootstrap.css" rel="stylesheet">
<link href="http://cdn.staticresource.com/bootstrap-responsive.css" rel="stylesheet">
<!-- FontAwesome -->
<link href="http://cdn.staticresource.com/font-awesome.min.css" rel="stylesheet">
<!-- jQuery -->
<script src="http://cdn.staticresource.com/jquery-latest.min.js" type="text/javascript"></script>
<!-- Boostrap JavaScript -->
<script src="http://cdn.staticresource.com/bootstrap.min.js" type="text/javascript"></script>
<!-- Source Sans via Google Web Fonts -->
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1, user-scalable=yes" />
</head>
<body>
<!-- HTML Section -->
<div class="container">
<h1>CodeView</h1>
<!-- Paragraph text -->
<p>This is a paragraph with a <a href="#">link</a> in it! It also has some <strong>bold</strong> text, and some <em>italics</em> text too!</p>
<!-- Abbreviations -->
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
</p>
<!-- Addresses -->
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<!-- Articles -->
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
<!-- Asides -->
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
<!-- Bold text -->
<p>This is normal text - <b>and this is bold text</b>.</p>
<!-- Blockquotes -->
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
<!-- Line Breaks -->
<p>This text contains<br>a line break.</p>
<!-- Citations -->
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
<!-- Code text -->
<code>A piece of computer code</code>
<!-- Definitions -->
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
<!-- Deleted text -->
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<!-- Definition Text -->
<dfn>Definition term</dfn>
<!-- Divs -->
<div style="color:#0000FF">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
<!-- Forms -->
<form>
<fieldset>
<legend>Legend:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
<!-- Figures -->
<figure>
<img src="http://placehold.it/250" alt="The Pulpit Rock" width="250" height="250">
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
<!-- Footers -->
<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01">2012-03-01</time></p>
</footer>
<!-- Headers -->
<header>
<h1>Headline</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<!-- Horizontal Rules -->
<hr>
<!-- Italicized text -->
<p>He named his car <i>The lightning</i>, because it was very fast.</p>
<!-- Inserted text -->
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<!-- Keyboard input -->
<kbd>Keyboard input</kbd>
<!-- Marked text -->
<p>Do not forget to buy <mark>milk</mark> today.</p>
<!-- Navigation -->
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
<!-- Ordered lists -->
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<!-- Preformatted text -->
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
<!-- Short quotation -->
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
<!-- Stricken text -->
<p><s>My car is blue.</s></p>
<!-- Sample text -->
<samp>Sample output from a computer program</samp>
<!-- Sections -->
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
<!-- Small text -->
<p><small>Copyright 1999-2050 by Refsnes Data</small></p>
<!-- Span text -->
<p>My mother has <span style="color:blue">blue</span> eyes.</p>
<!-- Subscript text -->
<p>This text contains <sub>subscript</sub> text.</p>
<!-- Superscript text -->
<p>This text contains <sup>superscript</sup> text.</p>
<!-- Underlined text -->
<p>This is a <u>paragraph</u>.</p>
<!-- Unordered lists -->
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<!-- Variable text -->
<var>Variable</var>
</div>
<!-- CSS Section -->
<style type="text/css">
* {
font-family: 'Source Sans Pro', sans-serif;
}
/* Scripts, Styles, and other invisibles */
head, title, link, meta, style, script {
display: block;
}
title, link, meta, style, script {
display: block;
width: auto;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: #eaeaea;
padding: 10px 20px;
margin: 10px 20px;
color: #333;
white-space: pre-wrap;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
word-break: normal;
font-family: monospace;
font-size: 10pt;
line-height: 14pt;
}
title:before { content: '<title>'; opacity: 0.5; }
title:after { content: '</title>'; opacity: 0.5; }
meta:before { content: '<meta ' attr(content); opacity: 0.5; }
meta:after { content: '>'; opacity: 0.5; }
link:before { content: '<link href="' attr(href) '" rel="' attr(rel) '"'; opacity: 0.5; }
link:after { content: '>'; opacity: 0.5; }
script[src]:before { content: '<script src="' attr(src) '" type="' attr(type) '"'; opacity: 0.5; }
script[src]:after { content: '>'; opacity: 0.5; }
script:before { content: '<script type="' attr(type) '">\A'; opacity: 0.5; white-space: pre-wrap; }
script:after { content: '\A<''/script>'; opacity: 0.5; white-space: pre-wrap; }
style:before { content: '<style type="' attr(type) '">\A'; opacity: 0.5; white-space: pre-wrap; }
style:after { content: '\A<''/style>'; opacity: 0.5; white-space: pre-wrap; }
/* Links */
a:before { content: '<a>'; opacity: 0.5; }
a:after { content: '</a>'; opacity: 0.5; }
/* Abbreviations */
abbr:before { content: '<abbr>'; opacity: 0.5; }
abbr:after { content: '</abbr>'; opacity: 0.5; }
/* Addresses */
address:before { content: '<address>\A'; opacity: 0.5; white-space: pre-wrap; }
address:after { content: '\A</address>'; opacity: 0.5; white-space: pre-wrap; }
/* Articles */
article:before { content: '<article>'; opacity: 0.5; white-space: pre-wrap; }
article:after { content: '</article>'; opacity: 0.5; }
/* Asides */
aside:before { content: '<aside>'; opacity: 0.5; }
aside:after { content: '</aside>'; opacity: 0.5; }
/* Bold text */
b:before { content: '<b>'; opacity: 0.5; }
b:after { content: '</b>'; opacity: 0.5; }
/* Blockquotes */
blockquote:before { content: '<blockquote>\A'; opacity: 0.5; white-space: pre-wrap; }
blockquote:after { content: '\A</blockquote>'; opacity: 0.5; white-space: pre-wrap; }
/* Line Breaks */
br { border-bottom: 1px dashed #00c4cc; display: block; content: ' '; opacity: 0.5; }
/* Citations */
cite:before { content: '<cite>'; opacity: 0.5; }
cite:after { content: '</cite>'; opacity: 0.5; }
/* Code */
code:before { content: '<code>'; opacity: 0.5; }
code:after { content: '</code>'; opacity: 0.5; }
/* Definitions */
dd:before { content: '<dd>'; opacity: 0.5; }
dd:after { content: '</dd>'; opacity: 0.5; }
dl:before { content: '<dl>\A'; opacity: 0.5; white-space: pre-wrap; }
dl:after { content: '</dl>'; opacity: 0.5;}
dt:before { content: '<dt>'; opacity: 0.5; }
dt:after { content: '</dt>'; opacity: 0.5; }
/* Deleted text */
del:before { content: '<del>'; opacity: 0.5; }
del:after { content: '</del>'; opacity: 0.5; }
/* Definition text */
dfn:before { content: '<dfn>'; opacity: 0.5; }
dfn:after { content: '</dfn>'; opacity: 0.5; }
/* Divisions */
div:before { content: '<div>'; opacity: 0.5; }
div:after { content: '\A</div>'; opacity: 0.5; white-space: pre-wrap;}
/* Emphasized text */
em:before { content: '<em>'; opacity: 0.5; }
em:after { content: '</em>'; opacity: 0.5; }
/* Fieldsets */
fieldset:before { content: '<fieldset>\A'; opacity: 0.5; white-space: pre-wrap; }
fieldset:after { content: '\A</fieldset>'; opacity: 0.5; white-space: pre-wrap; }
/* Figure Captions */
figcaption:before { content: '<figcaption>'; opacity: 0.5; }
figcaption:after { content: '</figcaption>'; opacity: 0.5; }
/* Figures */
figure:before { content: '<figure>\A'; opacity: 0.5; white-space: pre-wrap; }
figure:after { content: '</figure>'; opacity: 0.5; }
/* Footers */
footer:before { content: '<footer>'; opacity: 0.5;}
footer:after { content: '</footer>'; opacity: 0.5; }
/* Forms */
form:before { content: '<form>'; opacity: 0.5; }
form:after { content: '</form>'; opacity: 0.5; }
/* Headings 1–6 */
h1:before { content: '<h1>'; opacity: 0.5; }
h1:after { content: '</h1>'; opacity: 0.5; }
h2:before { content: '<h2>'; opacity: 0.5; }
h2:after { content: '</h2>'; opacity: 0.5; }
h3:before { content: '<h3>'; opacity: 0.5; }
h3:after { content: '</h3>'; opacity: 0.5; }
h4:before { content: '<h4>'; opacity: 0.5; }
h4:after { content: '</h4>'; opacity: 0.5; }
h5:before { content: '<h5>'; opacity: 0.5; }
h5:after { content: '</h5>'; opacity: 0.5; }
h6:before { content: '<h6>'; opacity: 0.5; }
h6:after { content: '</h6>'; opacity: 0.5; }
/* Headers */
header:before { content: '<header>'; opacity: 0.5; }
header:after { content: '</header>'; opacity: 0.5; }
/* Horizontal Rules */
hr:before { content: '<hr>'; opacity: 0.5; white-space: pre-wrap; }
/* Italicized text */
i:before { content: '<i>'; opacity: 0.5; }
i:after { content: '</i>'; opacity: 0.5; }
/* Inserted text */
ins:before { content: '<ins>'; opacity: 0.5; }
ins:after { content: '</ins>'; opacity: 0.5; }
/* Keyboard input */
kbd:before { content: '<kbd>'; opacity: 0.5; }
kbd:after { content: '</kbd>'; opacity: 0.5; }
/* Legends */
legend:before { content: '<legend>'; opacity: 0.5; }
legend:after { content: '</legend>'; opacity: 0.5; }
/* List Items */
li:before { content: '<li>'; opacity: 0.5; }
li:after { content: '</li>'; opacity: 0.5; }
/* Marked text */
mark:before { content: '<mark>'; opacity: 0.5; }
mark:after { content: '</mark>'; opacity: 0.5; }
/* Navigation */
nav:before { content: '<nav>'; opacity: 0.5; }
nav:after { content: '</nav>'; opacity: 0.5; }
/* Ordered Lists */
ol:before { content: '<ol>'; opacity: 0.5; }
ol:after { content: '</ol>'; opacity: 0.5; }
/* Paragraphs */
p:before { content: '<p>'; opacity: 0.5; }
p:after { content: '</p>'; opacity: 0.5; }
/* Preformatted text */
pre:before { content: '<pre>\A'; opacity: 0.5; white-space: pre-wrap; }
pre:after { content: '</pre>'; opacity: 0.5; }
/* Quoted text */
q:before { content: '<q>'; opacity: 0.5; }
q:after { content: '</q>'; opacity: 0.5; }
/* Stricken text */
s:before { content: '<s>'; opacity: 0.5; }
s:after { content: '</s>'; opacity: 0.5; }
/* Sample text */
samp:before { content: '<samp>'; opacity: 0.5; }
samp:after { content: '</samp>'; opacity: 0.5; }
/* Strong text */
strong:before { content: '<strong>'; opacity: 0.5; }
strong:after { content: '</strong>'; opacity: 0.5; }
/* Sections */
section:before { content: '<section>'; opacity: 0.5; }
section:after { content: '</section>'; opacity: 0.5; }
/* Small text */
small:before { content: '<small>'; opacity: 0.5; }
small:after { content: '</small>'; opacity: 0.5; }
/* Span text */
span:before { content: '<span>'; opacity: 0.5; }
span:after { content: '</span>'; opacity: 0.5; }
/* Subscript text */
sub:before { content: '<sub>'; opacity: 0.5; }
sub:after { content: '</sub>'; opacity: 0.5; }
/* Superscript text */
sup:before { content: '<sup>'; opacity: 0.5; }
sup:after { content: '</sup>'; opacity: 0.5; }
/* Underlined text */
u:before { content: '<u>'; opacity: 0.5; }
u:after { content: '</u>'; opacity: 0.5; }
/* Unordered Lists */
ul:before { content: '<ul>'; opacity: 0.5; }
ul:after { content: '</ul>'; opacity: 0.5; }
/* Variable text */
var:before { content: '<var>'; opacity: 0.5; }
var:after { content: '</var>'; opacity: 0.5; }
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment