HTML Document
no posts foundHead Tags
Minimum required
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
The above 2 meta tags *must* come first in the <head>
to consistently ensure proper document rendering.
Any other head element should come *after* these tags.
-->
<title>Page Title</title>
More Resources
Document Outline
The most basic function of a website is to present information in a hierarchical structure called the Outline. The Document Outline is created using the heading elements h1, h2, h3, h4, h5, and h6.
Heading elements have a rank given by the number in their name. The h1 element has the highest rank, the h6 element has the lowest rank, and two elements with the same name have equal rank.
Use the rank of heading elements to create the document outline.
More Resources
HTML Elements
- HTML elements or tags are used to define the content and meaning of a HTML document.
- Elements represent things; that is, they have intrinsic meaning, also known as semantics.
- Normal Tags wrap around content using opening and closing tags. Ex:
<div></div>
- Void or self-closing tags are expressed with a single tag. Ex:
<br>
- HTML Element Reference (developer.mozilla.org)
- HTML Global Attributes Reference (w3schools.com)
article
The <article> element should contain a piece of self-contained content that could be distributed outside the context of the page. This includes things like news articles, blog posts, or user comments.
blockquote
<blockquote>
<p>
As my fellow HTML5 Doctor, Oli Studholme has showed, people seldom quote exactly – so sacrosanctity of the quoted text isn’t a useful ideal – and in print etc,
citations almost always appear as part of the quotation – it’s highly conventional.
</p>
<footer>
- <cite>Bruce Lawson</cite>
</footer>
</blockquote>
header
The header element is not sectioning content; it doesn’t introduce a new section in a document outline.
iframe
- The Inline Frame Element
<iframe>
represents a nested browsing context, effectively embedding another HTML page into the current page. - iframe mozilla.org
- Iframes and CSS
- How to apply CSS to iframe?
- NOTE: In order to improve speed, It’s a good idea to set the iframe’s src attribute with JavaScript after the main content is done loading. This makes your page usable sooner and decreases your official page load time (an important SEO metric.)
main
The <main>
element should contain the main content for your web page. All of this content should be unique to the individual page and should not appear elsewhere on the site. Any content that is repeated on multiple pages (logos, search boxes, footer links, etc.) should not be placed within the <main> element.
The main tag can only be used once per page and it can not be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element. According to caniuse.com IE11 does not currently support the main element, but use of the HTML5 Shiv will fix this.
nav
The nav element is intended to contain links to other pages within the site. Links to external sites is discouraged. Optionally nav tags can be put inside header tags.
select
<select>
<option selected value="">Choose an Option</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
table
<table>
<thead>
<tr>
<th>Product</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pen</td>
<td>A nice ball point pen.</td>
<td>$2.50</td>
</tr>
<tr>
<td>Paper</td>
<td>A package of top-shelf paper.</td>
<td>$4.99</td>
</tr>
<tr>
<td>Stapler</td>
<td>Sturdy and powerful stapler</td>
<td>$3.00</td>
</tr>
<tbody>
<tfoot>
<tr>
<td></td>
<td>Total:</td>
<td>$10.49</td>
</tr>
</tfoot>
</table>
HTML Entities
HTML Entities are used to render a character that would normally be interpreted by the browser.
An entity is a string that begins with the &
character and ends with the ;
character. The characters between &
and ;
represent a unique character or symbol.
Common Entity Codes
Character | Name | Entity Code | Decimal Code |
---|---|---|---|
Non-Breaking Space | |
  |
|
“ | Quote | " |
" |
‘ | Left Single Quote | ‘ |
‘ |
’ | Right Single Quote | ’ |
’ |
“ | Left Double Quote | “ |
“ |
” | Right Double Quote | ” |
” |
‘ | Apostrophe | ' |
' |
& | Ampersand | & |
& |
< | Less-Than | < |
< |
> | Greater Than | > |
> |
‐ | Hyphen / Dash | ‐ |
‐ |
– | En Dash | – |
– |
— | Em Dash | — |
— |
© | Copyright Symbol | © |
© |
® | Registered Symbol | ® |
® |
™ | Trade Mark Symbol | ™ |
™ |
№ | Numero Symbol | № |
№ |
Complete List of Entity Codes
See the official W3 list of character identifiers below or visit the page:
Semantic HTML
<body>
<header>
<div id="logo">...</div>
<nav role="navigation">
<ul>
<li><a href="/"><span>Home</span></a></li>
<li><a href="/archives/"><span>Archives</span></a></li>
<li><a href="/about/"><span>About</span></a></li>
<li><a href="/contact/"><span>Contact</span></a></li>
</ul>
</nav>
</header>
<main role="main">
<h1>...</h1>
<p>...</p>
<article>
<header>
<h2>...</h2>
<p>...</p>
</header>
<p>...</p>
<section>
<h3>Comments</h3>
<article>
<header>
<h3>...</h3>
<p>...</p>
</header>
<p>...</p>
</article>
</section>
</article>
...
</main>
</body>
</html>
More Resources
Jump Links
When a jumplink is used, it scrolls the browser window to a specific element on the page.
You can link to any element with an id attribute.
Placing a hashtag followed by the target elements ID at the end of a URL will cause the browser to scroll-to the top of the target element.
Note: In HTML5 the name attribute on the <a>
element is obsolete. The name attribute was often used in HTML4 for jumplinks.
<!-- The target object. -->
<div id="my-target-element">Target element here.</div>
<!-- On-page link. -->
<a href="#my-target-element">Jump-To My Element</a>
<!-- Off-page link. -->
<a href="http://example.com/some-page#my-target-element">Jump-To My Element</a>
<!-- With parameters. -->
<a href="http://example.com/some-page?parama=1¶mb=2#my-target-element">Jump-To My Element</a>
Social Media Head Tags
Even if there is no social media share widget on the page (and especially if there is) people may attempt to share the URL anyway, directly in Facebook, Twitter, Pinterest, Google+, etc. If we want direct shares to appear nicely on social sites, we need Social Metadata Tags.
Page Type
This determines the type of page to be shared. Regular pages should use “website” while news and blog posts should use “article”.
<meta property="og:type" content="website" />
Account IDs
<meta name="twitter:site" content="@websightdesign" /><!-- Twitter @username -->
<meta property="fb:admins" content="Facebook numeric ID" /><!-- Facebook numeric account ID -->
Site Name
Determines the name of the site to be used when sharing the page.
This tag isn’t always needed as the name of a site will not appear when sharing but it is still useful to include.
<meta property="og:site_name" content="Sounds True" /><!-- FB/Open Graph -->
Page Title
<meta property="og:title" content="Awake at Work" /><!--FB/Open Graph -->
<meta itemprop="name" content="The Name or Title Here"><!-- Schema.org/Google+ -->
<meta name="twitter:title" content="This is the title that will display in a tweet" /><!-- Twitter -->
Page URL
This tag is here to specify which URL this content comes from.
There could be instances where the same content will be on several pages.
<meta property="og:url" content="hhttp://www.websightdesign.com/services/internet-marketing..." /><!-- FB/Open Graph -->
<meta name="twitter:url" content="URL to be used in the card" /><!-- URL at the top of the Twitter card. -->
Page Images
This tag helps site owners choose exactly which image to use. It is useful for pages lacking images.
<meta property="og:image" content="http://websightdesign.com/images/image.jpg" /><!-- FB/Open Graph -->
<meta itemprop="image" content="http://www.example.com/image.jpg"><!-- Schema.org/Google+ image. -->
<meta name="twitter:image" content="http://www.example.com/image.jpg"><-- Twitter Summary card images must be at least 120x120px -->
Page Description
Use this tag to customize the summary (description) that will appear on a Twitter Card. It should be shorter than 140 characters.
<meta property="og:description" content="How Can I Realize My Full Potential?"/><!-- FB/Open Graph -->
<meta itemprop="description" content="This is the page description"> <!-- Schema.org/Google+ -->
<meta name="twitter:description" content="Insert the exact page summary of the page and it will be shown as is on Twitter" /> <!-- Twitter -->