HTML

HTML Document

no posts found

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

Tag Select (w3schools.com)

<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	`&dash;`	`‐`
–	En Dash	`–`	`–`
—	Em Dash	`—`	`—`
©	Copyright Symbol	`©`	`©`
®	Registered Symbol	`®`	`®`
™	Trade Mark Symbol	`™`	`™`
№	Numero Symbol	`&numero;`	`№`

Complete List of Entity Codes

See the official W3 list of character identifiers below or visit the page:

HTML Entities reference 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&paramb=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 -->

More Resources

ARIA Web Standards

A Look Into: ARIA Web Standards & HTML Apps Accessibility