Become A Web Architect With This HTML Cheat Sheet [Infographic]

Whether you're learning HTML or you're a practiced hand and need a refresher, this HTML cheat sheet gives you a quick reference for commonly used tags, what they do, how to use them, and examples of how they work.

The infographic below was designed by HostingFacts and includes all the HTML essentials that make up the layout of every website you see online. The whole sheet is pretty large, so it's worth bookmarking and coming back to later, especially if you're guilty of Googling the right way to use a given tag, or can't remember what's been depreciated versus what's still in use.

Perhaps the best thing about the sheet is that it's not just a list of tags and one word descriptions of what they do — there's actually detailed explanation for how each one works, and examples that will help you master them, or jog your memory if you've forgotten. If you want a document to pass around, the sheet is also available in PDF form at the link below.

Get a Jump Start on Your Next Web Site with This HTML Cheat Sheet

[Via HostingFacts]


Comments

    For best practice, avoid the use of XML-style slashes for short termination and void elements in HTML5. That is, do <br>, not <br />. There are a few good reasons why:

    1. HTML is not and has never been XML. They may look similar, but they are not compatible and have never been compatible. A separate standard called XHTML exists that attempted to make HTML XML-compliant, but it should also be avoided (see side note below).

    2. There are three relevant standards - HTML4, XHTML and HTML5. Of the three, a closing slash is invalid in HTML4 because it breaks SGML rules. The specification advises against this usage. It is valid in XHTML. In HTML5 it is optional but provides no benefit, it is only supported for legacy reasons. You should avoid legacy markup whenever possible (this includes deprecated elements like 'blink' - don't do it).

    3. It encourages bad behaviour. In HTML5 (which is the only standard you should be using these days) the slash is only optional on void elements, that is elements like BR and HR that never have a closing tag. It is invalid on all other elements - you cannot short-close a div, span or any non-void element with a slash, this will fail validation.

    (Site note: XHTML may seem like the best of both worlds, but in practice it's worse than HTML4. In theory it provides stricter validation, but in reality XHTML is not parsed as XML by browsers, unless it is served with the 'application/xhtml+xml' MIME type. When it's served with the default 'text/html' MIME type, it is processed by the browser as standard HTML tag soup, regardless of how XML-compliant it is. In addition, almost no web server will actually serve XHTML as XHTML (no shared host will do this) and even if you were to set up your server to do it, your page will not display at all, under any circumstances, on IE8 or earlier.)

    Easy validation is commonly given as a reason to use XHTML formatting anyway, but it's bunk. There are plenty of HTML validators that ensure your page conforms to specification and are just as thorough as an XML-based validator.

    The one exception to this practice is if you're forced to use XML formatting, for example if your CMS has a poorly written template engine that parses its sources as XML before compiling them. In this case you have little choice, but should definitely consider finding a better template engine.

    Last edited 29/06/16 4:04 pm

    Become A Web Architect With This HTML Cheat Sheet

    And years of industrial experience coding with a web development language that doesn't consist entirely of markup.

Join the discussion!

Trending Stories Right Now