HTML Tips and Tricks

HTML 5 tags for structure

Tag Explanation
article Independent piece of content of a document.
aside Content only slightly related to the rest of the page.
dialog Marks up a conversation between multiple parties.
figure Associates a caption with content.
footer Groups content that typically appears at the bottom of a section.
header Groups content that typically appears at the top of a section.
hgroup Groups parts of a header when it has multiple levels.
nav Section of a document intended for navigation.
section Generic document or application section.

New tags to try:

  • < big > Increases the size of the selected text relative to the surrounding text.
  • < cite > Citations, titles, and references
  • < code > For showing programming code.
  • < dfn > Defining instance, used to mark the introduction of a new term.
  • < s > Strikethrough text.

Meta Tags for Spiders

Prevent spiders from following links on page but still allows indexing

meta name="robots" content="nofollow"

Prevent spiders from indexing page

meta name="robots" content="noindex"

Social media sites often need additional tags. Here is a list of tags you should add to accomodate Facebook.

Regular Expression Wildcard Characters for Adobe Dreamweaver

Table 1.Commonly used metacharacters

Metacharacter Matches
. Any single character, except a newline
\d Any digit character (0-9)
\D Any non-digit character—in other words, anything except 0-9
\w Any alphanumeric character or the underscore
\W Any character, except an alphanumeric character or the underscore
\s Any white-space character, including space, tab, form feed, or line feed
\S Any character, except a white-space character
\f A form feed character
\n A line feed character
\r A carriage return character
\t A tab character

Table 2.Quantifiers used to repeat a pattern

Quantifier Meaning
* Match 0 or more times
+ Match 1 or more times
? Match no more than once (makes the character or group optional)
{n} Match exactlyntimes
{n,m} Match at leastn, but no more thanmtimes
*? Match 0 or more times, but as few times as possible
+? Match 1 or more times, but as few times as possible
?? Match 0 or 1 times, but as few times as possible
{n}? Match at leastntimes, but as few times as possible
{n,m}? Match at leastntimes, no more thanmtimes, and as few times as possible

Table 3.Metacharacters for word boundaries, anchors, and alternation

Character/sequence Meaning
\b Match word boundary
\B Match word non-boundary
^ Match beginning of subject text or line
$ Match end of subject text or line
| Alternate pattern

 

Source

Standard Compliant Way to Open a New Page (no target tag)

‹a href="http://address.com/" title="Title Here" onclick="window.open(this.href,'newwin'); return false;"›Insert Link Title‹/a›

Textarea

‹textarea› can have a wrap attribute with possible values of physical (carriage returns added at end of line) or virtual (lines appear to wrap but will be submitted as a single line). Also: none,hard,soft.

Add a Default Value to an Input Field that Must Change

Add onfocus="this.select()" and a value="This should be changed"

Use htaccess file to secure configuration files

Options -Indexes

order allow,deny
deny from all


order allow,deny
deny from all

Utilities Found on Other Websites

HTML & CSS Cheat Sheet

HTML Canvas Cheat Sheet

HTML Colour Codes list of hexadecimal colour codes

Web Forms - Dive Into HTML5 beautiful presentation and an entertaining read

Check your site's colour accessibility using one of these 14 tools

Accessible Sections and Headings (Semantics and Accessiblity)

HTML Character Entities Cheat Sheet and Visual Guide to Character Entities

HTML5 Doctor has a comprehensive guide for HTML5 syntax, includes a guide to avoiding common HTML5 pitfalls

HTML5 Boilerplate is a great starting front-end template and so is HTML5 Bones and so is HTML5 Reset.

Can I Use? Great site for checking browser compatability

The Wonderful World of ALT Attributes and the Five Golder Rules for Compliant ALT Tags

HTML5 Please Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are. Here is an article about 5 HTML5 Features you need to know. 6 Time saving HTML attributes. 8 HTML Elements you are not using and should be.

WTF, HTML and CSS? and WTF Forms

Responsive Design Bookmarklet

Spam Filtering Using Hidden Fields

&what; A search engine for HTML character entities

Native HTML5 Validation for Web Forms

Code Faster, use Emmet: here is a series of tips to get you started

Up and running with Modernizr

HTML Emails

Premailer has several tools for cleaning up your HTML email code

Email Standards Project

How to Code HTML Email Newsletters

Ultimate Guide to CSS Support

HTML Table generator - very helpful for laying out email newsletters.

Email design preview, Email inbox preview, Email design preview, Email design testing | PreviewMyEmail.com

PutsMail - It's a mail test tool to test your mails before sending them

Authentication and Authorization

Authentication is normally a prerequisite for authorization (unless everybody is authorized to do something, such as autonomous FTP), but they are separate and distinct concepts:

  • Authentication establishes who you are.
  • Authorization establishes what you are allowed to do.

To reap the benefits of a sophisticated intranet or extranet, an organization should control access to all information available through the Web, allowing users to access everything they need, but nothing more.

There are several key requirements that should be met in order to manage information securely on a corporate intranet. First, the identity of an individual wishing to access the intranet should be authenticated. Authentication is the process of verifying that a requester has been issued a unique identifier and knows the secret (for example, a password or PIN) that is associated with that identifier.

Once a user's identity has been authenticated, their access privileges should be determined. An authenticated user does not necessarily have any permissions to access resources. An effective, policy-based approach to determining who can access what resource in what way involves two steps:

Security policies should be defined to explicitly grant access rights to Web resources.
An access control enforcement function must establish whether requests for specific information should be granted or denied, based on pre-established policy.

For any security solution to be truly effective, it should integrate easily with the organization's existing infrastructure, and the security features must be easy to administer. Any complexities in security management increase the possibility of human errors.

Checkbox Labels

Adding label tags around a checkbox or radio button ties that text to the checkbox.

If the user clicks on "I Agree" it will select that checkbox.

An HTML element with an ID creates a JavaScript global with the same name

Surprising but true, and it's done by modern browsers as a means of backwards compatibility.

Using the Figure Tag

To represent self-contained content, the best HTML element to use would be the

or
tags.

Usually this is an image, an illustration, a diagram, a code snippet, or a schema that is referenced in the main text, but that can be moved to another page or to an appendix without affecting the main flow.

Its best use is illustrated with an image, and how it can lend to saving lots of time using the tag provides a caption to the figure so you don't need to waste time writing more CSS.