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.

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 exactly n times
{n,m}	Match at leas tn, but no more than m times
*?	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 least n times, but as few times as possible
{n,m}?	Match at least n times, no more than m times, 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

A Beginner's Guide to HTML in Web Development

HTML is Easy (no seriously)

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

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 Reference

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.

I Agree

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

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.

HTML Tips and Tricks

Design

Book Notes

Checklists

Design Books

Gardening

Gardening Books

Lego

Max

Miscellany

Ornithology

Programming

The Web

Tools

Web Design

Web Development