{dev_notes}

HTML Elements

Published 3 years ago.
Last updated

HTML tags mark the beginning and end of an HTML element. Elements may contain attributes.

  • Everything is a tag
    HTML elements or tags are used to define the content and meaning of an HTML document.
  • Tags have meaning
    HTML elements represent things; that is, they have intrinsic meaning, also known as semantics.
  • Normal tags wrap stuff
    Normal tags wrap around content using opening and closing tags. Ex: <div>some content here.</div>
  • Void tags do not wrap
    Void tags or self-closing tags are expressed with a single tag. Ex: <br> or <hr>.

HTML5 a World Wide Web Consortium (W3C) recommendation. The current specification is known as the HTML Living Standard and is maintained by a consortium of the major browser vendors (Apple, Google, Mozilla, and Microsoft), the Web Hypertext Application Technology Working Group (WHATWG).

Void Tags

area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr

Void tags with a slash / or a space-slash, as in <br /> are supported for document compatibility with XHTML and XML, but the spec states that neither are necessary.

HTML Root Tag

Element Description
<html> Represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.

Head

The <head> element contains machine-readable information (metadata) about the document. Metadata contains information about the page including styles, scripts and data to help software (search engines, browsers, etc.) use and render the page. Metadata for styles and scripts may be defined in the page or linked-to another file that has the information.

Element Description
<base> Specifies the base URL to use for all relative URLs in a document.
<link> The External Resource Link element (<link>) specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets, but is also used to establish site icons (both “favicon” style icons and icons for the home screen and apps on mobile devices) among other things.
<meta> Represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.
The type attribute is unnecessary for JavaScript resources.
<style> Contains style information for a document, or part of a document.
<title> Defines the document’s title that is shown in a browser’s title bar or a page’s tab.

Sectioning

Element Description
<body> Represents the content of an HTML document. There can be only one <body> element in a document.
<main> Represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of the document, or the central functionality of an application.
The main role is unnecessary for the main element.
<header> Represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements. The banner role is unnecessary for the header element. The header will not introduce a new section in a document outline.
<footer> Represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data or links to related documents.
<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. Common examples of navigation sections might be menus, tables of contents, and indexes.
<article> Represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). An article tag is actually an autonomous section tag.
<aside> Represents a portion of a document whose content is only indirectly related to the document’s main content.
<section> The section tag is similar to the div tag but is meaningful. The section tag represents a standalone section. It wraps logical groups of related content which don’t have a more specific semantic element to represent it. For instance, a section tag could be wrapped around a group of article tags. An article tag could also contain several section tags.
<address> Indicates that the enclosed HTML provides contact information for a person or people, or for an organization.

Headings

The HTML <h1>–<h6> elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.

Element Example
<h1> <h1>Heading 1 Text</h1>
<h2> <h2>Heading 2 Text</h2>
<h3> <h3>Heading 3 Text</h3>
<h4> <h3>Heading 4 Text</h4>
<h5> <h3>Heading 5 Text</h5>
<h6> <h3>Heading 6 Text</h6>

<hgroup> groups a set of heading elements. It represents a multi-level heading for a section of a document.

<hgroup>
    <h1>Calculus I</h1>
    <h2>Fundamentals</h2>
</hgroup>

Paragraph

<p>
    A paragraph (from the Greek paragraphos, “to write beside”
    or “written beside”) is a self-contained unit — a discourse
    in writing dealing with a particular point or idea. A
    paragraph consists of one or more sentences. Though not
    required by the syntax of any language, paragraphs are
    usually an expected part of formal writing, used to organize
    longer prose.
</p>

Inline Elements

Element Example
<a> <a href="#!">This is a text link</a>.
This is a text link.
<strong> Strong is used to indicate <strong>strong importance</strong>.
Strong is used to indicate strong importance.
<em> Some words need added <em>emphasis</em>.
Some words need added emphasis.
<b> The <b>b element</b> is stylistically different text from normal text, without any special importance.
The b element is stylistically different text from normal text, without any special importance.
<i> The <i>i element</i> is text that is offset from the normal text.
The i element is text that is offset from the normal text.
<u> The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.
The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.
<del> This text is <del>deleted</del>.
This text is deleted.
<ins> This text is <ins>inserted</ins>.
This text is inserted.
<s> This text <s>has a strikethrough</s>.
This text has a strikethrough.
<sup> Superscripts are cool<sup>®</sup>.
Superscripts are cool®.
<sub> Subscript for things like H<sub>2</sub>O.
Subscript for things like H2O.
<small> <small>This text is small for fine print.</small>
This text is small for fine print.
<abbr> Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr>
Abbreviation: HTML
<q> <q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q>.
This text is a short inline quotation.
<cite> <cite>The Scream</cite> by Edward Munch.
The Scream by Edward Munch.
<dfn> The <dfn>dfn element</dfn> indicates a definition.
The dfn element indicates a definition.
<mark> The <mark>mark element</mark> indicates a highlight.
The mark element indicates a highlight.
<var> The variable element is for things like <var>x</var> = <var>y</var>.
The variable element is for things like x = y.
<time> The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time>.
The time element: .

Lists

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3
    • List Item 1
    • List Item 2
    • List Item 3
  • List Item 4
<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3
        <ul>
            <li>List Item 1</li>
            <li>List Item 2</li>
            <li>List Item 3</li>
        </ul>
    </li>
    <li>List Item 4</li>
</ul>

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3
    1. List Item 1
    2. List Item 2
    3. List Item 3
  4. List Item 4

<ol>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3
        <ol>
            <li>List Item 1</li>
            <li>List Item 2</li>
            <li>List Item 3</li>
        </ol>
    </li>
    <li>List Item 4</li>
</ol>

Mixed: Unordered and Ordered Lists:

  • List Item 1
  • List Item 2
  • List Item 3
    • List Item 1
    • List Item 2
      1. List Item 1
      2. List Item 2
      3. List Item 3
    • List Item 3
  • List Item 4
    1. List Item 1
    2. List Item 2
    3. List Item 3
<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3
        <ul>
            <li>List Item 1</li>
            <li>List Item 2
                <ol>
                    <li>List Item 1</li>
                    <li>List Item 2</li>
                    <li>List Item 3</li>
                </ol>
            </li>
            <li>List Item 3</li>
        </ul>
    </li>
    <li>List Item 4
        <ol>
            <li>List Item 1</li>
            <li>List Item 2</li>
            <li>List Item 3</li>
        </ol>
    </li>
</ul>

Definition list

Bread
A baked food made of flour.
Coffee
A drink made from roasted coffee beans.
<dl>
    <dt>Bread</dt>
    <dd>A baked food made of flour.</dd>
    <dt>Coffee</dt>
    <dd>A drink made from roasted coffee beans.</dd>
</dl>

table

Table Caption
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4 Table Footer 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5 
<table>
    <caption>Table Caption</caption>
    <thead>
        <tr>
            <th>Table Heading 1</th>
            <th>Table Heading 2</th>
            <th>Table Heading 3</th>
            <th>Table Heading 4</th>
            <th>Table Heading 5</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Table Footer 1</th>
            <th>Table Footer 2</th>
            <th>Table Footer 3</th>
            <th>Table Footer 4</th>
            <th>Table Footer 5</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
    </tbody>
</table>

Horizontal rule

<hr>

Code

Element Example
<kbd> Press <kbd>Cmd</kbd> + <kbd>c</kbd> to copy the selected item.
Press Cmd + c to copy the selected item.
<code> Just a little <code>inline code</code> here.
Just a little inline code here.
<samp> <samp>This is sample output from a computer program.</samp>
This is sample output from a computer program.

Pre-formatted text:

P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ 
<pre>P R E F O R M A T T E D T E X T
! " # $ % &amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ </pre>

Pre-formatted code:

if (!filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
  echo("$email is a valid email address");
}

<pre><code>if (!filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
  echo("$email is a valid email address");
}</code></pre>

Images

Large image (1600x900px):

Image alt text

<img src="http://placekitten.com/1600/900" alt="Image alt text">

figure

Small square image (420x420px) wrapped in a <figure> tag:

Image alt text
<figure><img src="http://placekitten.com/420/420" alt="Image alt text"></figure>

figcaption

Small square image (420x420px) wrapped in a <figure> with a <figcaption>:

Image alt text
Here is a caption for this image.
<figure>
    <img src="http://placekitten.com/420/420" alt="Image alt text">
    <figcaption>Here is a caption for this image.</figcaption>
</figure>

blockquote

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.

It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.

– Bruce Lawson
<blockquote>
    <p>
        A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.
    </p>
    <p>
        It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.
    </p>
    <footer>
        - <cite>Bruce Lawson</cite>
    </footer>
</blockquote>

Forms

Fields

<label for="field_text"><em>Text</em> input field</label>
<input id="field_text" type="text" placeholder="Enter your input">


<label for="field_password"><em>Password</em> input field</label>
<input id="field_password" type="password" placeholder="Enter your password">


<label for="field_url"><em>URL</em> input field</label>
<input id="field_url" type="url" placeholder="http://yoursite.com">


<label for="field_email"><em>Email</em> input field</label>
<input id="field_email" type="email" placeholder="name@email.com">


<label for="field_tel"><em>Tel</em>(ephone) input field</label>
<input id="field_tel" type="tel" placeholder="(555) 555-5555">


<label for="field_search"><em>Search</em> input field</label>
<input id="field_search" type="search" placeholder="Enter a search term">


<label for="field_number"><em>Number</em> input field</label>
<input id="field_number" type="number" placeholder="Enter a number">

Textarea

<label for="field_textarea">Textarea</label>
<textarea id="field_textarea" rows="8" cols="48" placeholder="Enter a message"></textarea>

Select Menu

<label for="select">Select</label>
<select id="select">
    <option>Option One</option>
    <option>Option Two</option>
    <option>Option Three</option>
    <optgroup label="Option Group 1">
        <option>Option Four</option>
        <option>Option Five</option>
        <option>Option Six</option>
    </optgroup>
    <optgroup label="Option Group 2">
        <option>Option Seven</option>
        <option>Option Eight</option>
        <option>Option Nine</option>
    </optgroup>
</select>

Checkbox

Choose all that apply: 



<form>
    <fieldset>
        <legend>Choose all that apply:</legend>

        <input type="checkbox" id="field_checkbox_1" name="checkbox-group">
        <label for="field_checkbox_1">Choice A</label><br/>

        <input type="checkbox" id="field_checkbox_2" name="checkbox-group" checked="checked">
        <label for="field_checkbox_2">Choice B</label><br/>

        <input type="checkbox" id="field_checkbox_3" name="checkbox-group">
        <label for="field_checkbox_3">Choice C</label>
    </fieldset>
</form>

Radio buttons

Choose your favorite monster: 



<form>
    <fieldset>
        <legend>Choose your favorite monster:</legend>

        <input type="radio" id="kraken" name="monster-radio-group">
        <label for="kraken">Kraken</label><br/>

        <input type="radio" id="sasquatch" name="monster-radio-group" checked="checked">
        <label for="sasquatch">Sasquatch</label><br/>

        <input type="radio" id="mothman" name="monster-radio-group">
        <label for="mothman">Mothman</label>
    </fieldset>
</form>

HTML5 inputs

<label for="field_color">Color input</label>
<input type="color" id="field_color" value="#000000">


<label for="field_range">Range input</label>
<input type="range" id="field_range" value="10">


<label for="field_date">Date input</label>
<input type="date" id="field_date" value="1970-01-01">


<label for="field_month">Month input</label>
<input type="month" id="field_month" value="1970-01">


<label for="field_week">Week input</label>
<input type="week" id="field_week" value="1970-W01">


<label for="field_datetime">Datetime input</label>
<input type="datetime" id="field_datetime" value="1970-01-01T00:00:00Z">


<label for="field_datetime_local">Datetime-local input</label>
<input type="datetime-local" id="field_datetime_local" value="1970-01-01T00:00">

Input Actions

<input type="submit" value="submit">
<input type="button" value="button">
<input type="reset" value="reset">
<input type="submit" value="disabled" disabled>

Buttons

<button type="submit">submit</button>
<button type="button">button</button>
<button type="reset">reset</button>
<button type="button" disabled>disabled</button>

Multimedia

Audio

Video

Canvas

canvas

Meter

2 out of 10

Progress

progress

Inline SVG

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.)

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.

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.