Web Developer's Reference Guide

Chapter 1. HTML Elements

HyperText Markup Language (HTML) is a language that annotates text. Annotation of text is done using elements. Using the following p element, as an example, we will see how to use HTML:

<p>This is an example</p>

HTML elements also have attributes that will modify how they are rendered or interpreted. Attributes are added inside of the starting tag. Here is the class attribute in a div element:

<div class="example">This is an example</div>

There have been multiple specifications of HTML so far, but we will just look at the most commonly used and important elements of HTML5. HTML5 is the latest official specification, so we will be as future-proof as possible at the time of writing this book. You will want to follow the specifications of HTML as closely as possible. Most browsers are very forgiving and will render your HTML, but when you go beyond the specifications, you can and will run into strange rendering issues.

Note

All HTML elements will have global attributes. The attributes listed for each element in the sections that follow are the attributes beyond the global attributes.

Document metadata

The next elements will give metadata about the document. In addition to this, you can also include links to resources, such as CSS and JavaScript.

head

The head element is the metadata parent element. All other metadata elements will be children of this element:

<head></head>

Description

The head element usually must have a title element inside it. The elements that can go in head are title, link, meta, style, script, noscript, and base. These elements are explained next.

Here is an example of the head element that defines a title and stylesheet element:

<head>
    <title>Title that appears as the tab name</title>
    <link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>

title

The title element displays the title of the document. This is what is displayed in the browser's tab or the browser window:

<title></title>

Description

The title element is an aptly named element. This is a required element in head, and there should only be one title element for a document. Here is a simple example of title element:

<head>
    <title>Example</title>
</head>

link

The link element links a resource to the current document:

<link crossorigin href media rel sizes type></link>

Attributes

The attributes that are used in the link element are as follows:

crossorigin: This tells the browser whether to make the Cross-Origin Resource Sharing (CORS) request or not
href: This indicates the URL of the resource
media: This selects the media that this resource applies to
rel: This indicates the relationship of this resource to the document
sizes: This is used with rel when it is set to icons
type: This indicates the type of content of the resource

Description

The link element has a lot of attributes, but most of the time, it is used for loading the CSS resources. This means that you will want to use the attributes href, rel, type, and media at least.

You can have multiple link elements in a head element. Here is a simple example of how to load CSS:

<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<link href="style.css" media="screen" rel="styleshhet" sizes type="text/css"></link>

Note

Apple has many meta tags that will pass information to an iOS device. You can set a reference to an App Store application, set an icon, or display the page in the full screen mode, as just a few examples. All of these tags are nonstandard, but useful when targeting iOS devices. This is true for many other sites and companies.

You can use multiple meta tags in a head element. Here are two examples. The first example will refresh the page every 5 seconds and the other will define the author metadata:

<meta http-equiv="refresh" content="5" />
<meta name="author" content="Joshua" />

style

The style element contains the style information.

CSS:

<style media scoped type></style>

Attributes

The attributes that are used in the style element are as follows:

media: This is a media query
scoped: The styles contained in this element only apply to the parent element
type: This sets the type of document; the default value is text/css

Description

The style element is usually in the head element. This allows you to define CSS styles for the current document.

The preferred method of using CSS is to create a separate resource and use the link element. This allows styles to be defined once and used everywhere on a website instead of defining them on every page. This is a best practice as it allows us to define the styles in one spot. We can then easily find and change styles.

Here is a simple inline stylesheet that sets the font color to blue:

<style media="screen" scoped type="text/css">
    body{
        color: #0000FF;
    }
</style>

base

The base element is the base URL for the document. The syntax is as follows:

<base href target>

Attributes

The attributes that are used in the base element are as follows:

href: This indicates the URL to be used as the base URL
target: This indicates the default target to be used with the URL

Description

The base URL is used whenever a relative path or URL is used on a page. If this is not set, the browser will use the current URL as the base URL.

Here is an example of how to set the base URL:

<base href="http://www.packtpub.com/">

script

The script element allows you to reference or create a script for the document:

<script async crossorigin defer src type><script>

Attributes

The attributes that are used in the script element are as follows:

async: This is a Boolean attribute that tells the browser to process this script asynchronously. This only applies to the referenced scripts.
crossorigin: This tells the browser whether to make a CORS request or not.
defer: This is a Boolean attribute that tells the browser to execute the script after the document has been parsed.
src: This distinguishes the URL of the script.
type: This defines the type of the script that defaults to JavaScript if the attribute is omitted.

Description

The script element is the way to get JavaScript into your document and add enhanced interactivity. This can be done using a bare script tag and adding JavaScript into the element. Also, you can use the src attribute to reference an external script. It is considered a best practice to reference a script file as it can be reused here.

This element can be a child of head or can be placed anywhere in the body of the document. Depending on where the script element is located, you may or may not have access to the DOM.

Here are two examples of using a script element. The first example will reference an external script, the second will be an inline script element, and the last will show how to use the crossorigin attribute:

<script src="example.js" type="text/javascript"></script>
<script>
    var a = 123;
</script>
<script async crossorigin="anonymous" defer src="application.js" type="text/javascript"><script>

noscript

The noscript element will be parsed if scripting is turned off in the browser. The syntax is as follows:

<noscript></noscript>

Description

If scripting is enabled, the content inside of this element will not appear on the page and the code inside it will run. If scripting is disabled, it will be parsed.

This element is mainly used to let the user know that the site may not work with JavaScript. Almost every website today not only uses JavaScript, but requires it.

Here is an example of the noscript element:

<noscript>
    Please enable JavaScript.
</noscript>

Semantic content sections

The next elements are the main elements to use when adding content to the document. For example, using the article element instead of an arbitrary div element allows the browser to infer that this is the main content of the page. These elements should be used to give structure to a document and not be used for styling purposes. Semantic elements make our HTML document more accessible using an ever-increasing amount of different devices.

body

The body element is the main content section of the document. There must be only one main element, its syntax is as follows:

<body></body>

Attributes

The attributes of the body element include the inline event attributes.

Description

The body element is the main content section of most documents. It must be the second child element of html, and there should only be one body element in a document.

Here is an example of the body element:

<body>
    <span>Example Body</span>
</body>

section

The section element describes the content section of a document. For example, this can be a chapter of a book:

<section></section>

Description

The section element is a new element that was introduced in HTML5. A section element should group the content together. While not a requirement, using a heading element as the first element in the code is a best practice. The section should be viewed as another part of the outline of the document. It groups related items into an easily targeted area. You can use this element multiple times in a document.

Here is an example of the section element:

<section>
    <h2>Section Heading</h2>
    <p>Section content.</p>
</section>

nav

The nav element is the navigation element:

<nav></nav>

Description

The nav element is another semantic element introduced with HTML5. This lets the browser know that the content of this element is the parent and is for navigation. The nav element enhances accessibility by giving screen readers a landmark for navigation. This element should wrap any site navigation or other links that are grouped together for ease of navigation. You can use this multiple times.

Here is an example of using the nav element:

<nav>
    <ul>
        <li><a href="#">Home</a></li>
    </ul>
</nav>

article

The article element is designed to wrap content that can stand on its own:

<article></article>

Description

The article element is a new element introduced in HTML5. The article element is similar to the section element; in that, it denotes that the content in the element is the core part of the page. The article element should be a complete composition that can stand on its own. For example, in a blog, the actual blog post should be wrapped with an article element.

Content can then be further broken down using either an article element or a section element. There is no standard rule for when to use either. However, both should be related to the content in the outer article element.

Here is an example of the article element being used:

<article>
    <header>
        <h1>Blog Post</h1>
    </header>
    <p>This post covers how to use an article element...</p>
    <footer>
        <address>
            Contact the author, Joshua
        </address>
    <footer>
</article>

Headings

The heading elements are the elements that specify different levels of headings according to their importance:

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Description

These should be used to give relative importance to different headings. For example, h1 should be used for the title of the document. The importance of a heading goes down as the heading value goes up, that is, h6 is the least important level of heading in the example that follows.

Here is an example using all the headings:

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

header

The header element groups the content that is considered to be the header for a particular group of content, its syntax is as follows:

<header></header>

Description

The header element is usually one of the first content elements on the page. It will most likely contain navigation options, a logo, and/or a search box. The header is usually repeated on multiple pages of a website. Each section or article can also contain a header. This is a new element introduced in HTML5.

Here is an example of the header element:

<header>
    <img src="logo.png" />
</header>

footer

The footer element provides a footer of a particular group of content, its syntax is as follows:

<footer></footer>

Description

The footer element wraps all the content that is considered to be the footer of the document. Usually, this will include copyright, author, and/or social media links. Of course, what you decide to put into a footer is arbitrary. Each section or article can also contain a footer.

Here is an example of the footer element:

<footer>
    Written by: Joshua Johanan
</footer>

address

The address element is used for the contact address of the author or organization, its syntax is as follows:

<address></address>

Description

Use the address element when you have the contact information of the user. The address element will add semantic value to the content, contrary to a regular div element.

Usually, this will be placed in the footer, but it can be used in an article or body section. It will apply to the nearest article element or to the entire document. Do not use any of the content section elements in an address element.

Here is the address element in use:

<footer>
    <address>
        Please contact me at my <a href="#">website</a>
    </address>
</footer>

aside

The aside element is for supplemental content:

<aside></aside>

Description

Use the aside element to highlight the content that is tied to the main article. Some examples in the context of the blog would be the author's profile, other posts by this author, or even related advertisements.

Here is an example of aside:

<aside>
    Peyton Manning is a 5-time MVP (2003, 2004, 2008, 2009, 2013)
    
</aside>

p

The p element is known as the paragraph element. This is a block element, its syntax is as follows:

<p></p>

Description

The p element should be used to distinguish between separate paragraphs in a document. This element is associated with the text and inline elements. You will not want to use a div element, for example. If you find yourself wanting to do this, you may want to build your document differently.

Here are a couple of paragraphs:

<p>This is an intro paragraph.</p>
<p>This paragraph will build upon the opening.</p>

Content sections

The content sections are quite similar to the semantic content sections. The main difference is that the use of all the given elements are not driven by the outline or purpose of the document like the semantic sections are.

hr

The hr element is the horizontal rule element, its syntax is as follows:

<hr>

Description

By default, the hr element will draw a horizontal line in the content. You can change the look of this element through CSS.

This element should never have any content inside of it:

<p>This is a paragraph.</p>
<hr/>
<p>This paragraph goes in another direction.</p>

pre

The pre element is the preformatted text:

<pre></pre>

Description

The text in an HTML document is usually not shown in the browser with the same whitespace or line breaks as it is in a text document. The pre element allows you to display text in the same way as it is in the document. Whitespace and line breaks will be preserved.

Here is an example of using line breaks:

<pre>This text
has some
line breaks.</pre>

blockquote

The syntax of a blockquote element is as follows:

<blockquote cite></blockquote>

Attributes

The cite attribute is used in the blockquote element to point to the URL of the cited document.

Description

The blockquote element is used when pulling a quotation out of a document or text.

Here is an example:

<blockquote cite="https://www.packtpub.com/">
    <p>Contact Us</p>
</blockquote>

ol

The ol element is the ordered list element, which has the following syntax:

<ol reversed start type></ol>

Attributes

The attributes that are used in the ol element are as follows:

reversed: This is a Boolean value. It denotes that the list is in a reverse order.
start: This accepts a value as a number to start with.
type: This will change the type of the numbered elements. By default, we can have a numbered list (1), but we can change to other types, such as lowercase letters (a), uppercase letters (A), lowercase Roman numerals (i), and uppercase Roman numerals (I).

Description

The ol element can be used in the same situations as a ul element, except that an ol element is numbered instead of bulleted. For example, you would use a ul element for a grocery list and an ol element for a numbered set of instructions. You can have multiple ul or ol elements nested within each other.

The items in the list will be the li elements.

Here is an example of a list that uses Roman numerals and starts at 10.

<ol start="10" type="i">
    <li>Roman numeral 10</li>
    <li>Roman numeral 11</li>
</ol>

ul

The ul element is an unordered list element:

<ul></ul>

Description

The ul element can be used in the same situations as an ol element, but a ul element will be bulleted and an ol element will be numbered.

When you style this list, you should use CSS and not the older HTML 4 attributes.

You can nest the ul and ol elements multiple times.

Here is an example of the ul element:

<ul>
    <li>Items in</li>
    <li>no particular</li>
    <li>order</li>
</ul>

li

The li element is the list item element:

<li value></li>

Attributes

The value attribute is used in the li element with the ol element and it is the value of the item in the ordered list.

Description

You will use the li element for each item in a list.

Here is an example:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

dl

The dl element is the definition list element:

<dl></dl>

Description

The dl element is a list where the items have a term and definition; however, the dl element can be used for more than just terms and definitions.

You must use the dt element followed by the dd element when building the list for the dl element. Each dt element can have multiple dd elements after it.

Here is an example:

<dl>
    <dt>PactPub</dt>
    <dd>Packt Publishing</dd>
</dl>

dt

The dt element is the definition term element:

<dt></dt>

Description

The dt element is the first item in a definition list, the dd element being the other item.

Here is an example:

<dl>
    <dt>PactPub</dt>
    <dd>Packt Publishing</dd>
</dl>

dd

The dd element is the definition description element:

<dd></dd>

Description

The dd element is the second item in a definition list, the other one being the dt element.

Here is an example:

<dl>
    <dt>PactPub</dt>
    <dd>Packt Publishing</dd>
</dl>

figure

The syntax of the figure element is as follows:

<figure></figure>

Description

The figure element is a new element introduced with HTML5. In much the same way as an article adds some meaning where there was none, a figure adds meaning too. A figure is an image or any other item of information that is related to the document. This has more meaning than just using an img element.

Here is an example:

<figure>
     <img src="figure1.jpg" title="Figure 1" />
     <figcaption>Figure One</figcaption>
</figure>

figcaption

The figcaption element is the figure caption element:

<figcaption></figcaption>

Description

The figcaption element was introduced in HTML5 along with the figure. This element provides the caption for a figure. This element must be inside a figure element and it must be either the first or last child of the figure element.

Here is a simple example of the figcaption element:

<figure>
     <img src="figure1.jpg" title="Figure 1" />
     <figcaption>Figure One</figcaption>
</figure>

div

The div element is the division element:

<div></div>

Description

The div element is one of the most used elements in HTML today. It is the element used to split up your document into arbitrary divisions. The div element has no default styling. These divisions could be for placement, styling, or any other reason. A div element does not affect the semantic meaning of the document. It should only be used when no other element suits your requirements.

Here is an example:

<div>
    You can put whatever you want in here!
    <div>
        More elements.
    </div>
</div>

main

The syntax of the main element is as follows:

<main></main>

Description

The main element should have the main content of the document inside it. You cannot have this element as a descendant of the article, aside, footer, header, or nav elements. This differs from an article, in that, an article should be a self-contained element.

Here is an example of the main element in use:

<main>
    This is the main content of the document.
    <article>
        Here is the article of the document.
    </article>
</main>

Inline elements

The following elements can all wrap text- and block-level elements to give them functionality, style, and meaning.

a

The a element is the anchor element. This is where HTML gets the HyperText (HT), the syntax is as follows:

<a download href media ping rel target type></a>

Attributes

Here are the attributes that are used in the a element:

download: This attribute lets the browser know that the item should be downloaded. The dialog will default to the filename in this attribute.
href: This is the link target.
media: This states the media that the stylesheet should apply to based on a media query.
ping: This makes a URL to ping and notify if the link is followed.
rel: This states the relationship of the document being linked to.
target: This states where the target link is to be displayed.
type: This states the MIME type of the linked resource.

Description

The a element is one of the most important and useful elements. It allows you to link documents together and you can easily jump between elements. We can say that the Web would not be as popular as it is now without this very easy-to-use element.

The link can be that of an anchor tag in the document, a relative URL, or any external resource. When linking to an anchor tag in the current document, use the a tag and the id attribute.

The content you put inside the a element will become part of what the user can click on to follow the link. This includes the text, img, and div elements, to name a few.

Here is an example of an img element with an image:

<a href="http://www.packtpub.com">
    <img src="packt_logo.png" />
</a>

Here is an example of a PDF document that will be downloaded; this will track each click:

<a download="report.pdf" href="assests/report.pdf" media="min-width: 1024px" ping="track/click" rel="alternate" target="_blank" type=" application/pdf"></a>

abbr

The abbr element is the abbreviation element:

<abbr></abbr>

Description

The abbr element is used to show what an abbreviation stands for. You should put the full word in the title attribute. Most browsers will display this as a tooltip when you hover over this element.

Here is an example:

<abbr title="abbreviation">abbr</abbr>

bdo

The bdo element is the bi-direction override element:

<bdo dir></bdo>

Attributes

The dir attribute is used in the bdo element, which gives the direction of the text. Its values can be ltr, rtl, and auto.

Description

The bdo element will override the current direction of the text for the direction defined in the element.

Here is an example:

<bdo dir="rtl">Right to Left.</bdo>

br

The br element is the line break element:

<br>

Description

The br element adds a line break. This is needed as line breaks in text are ignored when rendered in the browser. This should not be used to help place elements, as that is the job of CSS.

Here is an example:

First Name<br>
LastName

cite

The cite element is the citation element:

<cite></cite>

Description

The cite element is used to cite another source. Most browsers will render this in italics.

Here is an example:

This quote is from <cite>Web Developer's Reference</cite>

code

The syntax of the code element is as follows:

<code></code>

Description

The code element is used to display the programming code in a document. The browser will use a monospace font for it.

Here is an example:

Here is some JavaScript: <code>var a = 'test'</code>

dfn

The dfn element is the defining instance element:

<dfn></dfn>

Description

The dfn element is used to create a defining instance or the first time a specific word is introduced and explained.

Here is an example of the dfn element:

<dfn>HTML</dfn>, or HyperText Markup Language.

em

The em element is the emphasis element:

<em></em>

Description

The em element is used to add more emphasis to a specific word or phrase. By default, browsers will render this in italic font, but it should not just be used for italics.

kbd

The kbd element is the keyboard input element:

<kbd></kbd>

Description

The kbd element is used for text that the user should input. This does not mean that the user inputs data into the element, rather they will enter it into a window, console, or some application on their computer.

Here is an example:

Press <kbd>Win + R</kbd> to open the Run dialog.

mark

The syntax of the mark element is as follows:

<mark></mark>

Description

The mark element is used to highlight text.

Here is an example:

<mark>This</mark> will be highlighted

q

The q element is the quote element:

<q cite></q>

Attributes

The cite attribute used in the q element states the URL of the source of the quote.

Description

The q element is used for short quotes. For longer quotes, use blockquote.

Here is an example:

<q cite="http://en.wikiquote.org/">Don't quote me on this.</q>

s

The s element is the strikethrough element:

<s></s>

Description

The s element should be used when a piece of information in the document is no longer accurate. This is different than a revision made to the document.

Here is an example:

Today is the <s>twenty-fifth<s> twenty-sixth.

samp

The samp element is the sample output element:

<samp></samp>

Description

The samp element is used to show the sample output from a command or program.

Here is an example:

The command should output <samp>Done!</samp>

small

The syntax of the small element is as follows:

<small></small>

Description

The small element is used to make the text smaller. This is usually done with text such as the copyright or legal text.

Here is an example:

<small>Copyright 2014</small>

span

The syntax of the span element is as follows:

<span></span>

Description

The span element is much like the div element; in that, it is just an arbitrary container. The div element is a block-level element, and the span element is an inline element. The element does not add any semantic meaning to the text or document. Often, it is used to add a CSS style to the text:

<span>This text is in the span element.</span>

strong

The syntax of the strong element is as follows:

<strong></strong>

Description

The strong element should be used when certain text needs more importance. This carries some semantic meaning. The strong element's default style in most browsers is bold. This should not then be interchangeable with the b element, as that does not carry any semantic meaning.

Here is an example:

<strong>Warning!</strong> JavaScript must be enabled.

sub

The sub element is the subscript element:

<sub></sub>

Description

The sub element will render the text as a subscript.

Here is an example:

H<sub>2</sub>O

sup

The sup element is the superscript element:

<sup></sup>

Description

The sup element will render the text as a superscript.

Here is an example:

x<sup>2</sup> is what x squared should look like

time

The syntax of the time element is as follows:

<time datetime></time>

Attributes

The datetime attribute used in the time element gives a string that is the date and time value.

Description

The datetime element allows browsers to easily parse dates out of a document. You can wrap a date or the description of a date (tomorrow or July 4, for example) and still have an exact date for the browser to read.

Here is an example:

The party is on <time datetime="2014-11-27 14:00">Thanksgiving @ 2PM</time>

var

The var element is the variable element:

<var></var>

Description

The var element is used for variables in a mathematical expression or for programming.

Here is an example:

The variable <var>x</var> is equal to the string test in this example.

wbr

The wbr element is the word break opportunity element:

<wbr>

Description

The wbr element is a new element that was introduced with HTML5. We use this element to let the browser know of a good spot to break between words. This does not force a break, but if a break is needed, then the browser will respect the element.

It is an empty tag, meaning that it should not have an ending tag.

Here is an example:

If you have a really short width <wbr>then you <wbr>could have breaks.

Embedded content

The following elements are used to embed media or other objects into the document.

img

The img element is the image element:

<img alt crossorigin height ismap sizes src srcset width />

Attributes

The attributes that are used in the img element are as follows:

alt: This is the alternate text for the image. Use this to describe the image. This is used to enhance accessibility.
crossorigin: This lets the browser know whether this image should be fetched with a CORS request. If the image will be modified in a canvas element and not from the same domain name, then a CORS request must be used.
height: This is an attribute to set the height of the image.
ismap: This lets the browser know whether the image is used in a server-side map.
sizes: This is a list of media conditions that will map to a size. This is used to help the browser determine which image to use. By default, this will be 100 VW, which is 100% of the view width.
src: This is the most important attribute, it is the image URL.
srcset: This is a list of multiple images that can be used for display on our web page. This is used to target different screen sizes or pixel densities.
width: This is an attribute to set the width of the image.

Description

The img element is used if you want an image in the document. This element has many attributes, but the src and alt attributes are the only required attributes. The alt attribute should be used to describe the image in almost 100% of the cases. The main exception is when the image is only used as a decorative image, for example, when an image is used instead of a horizontal rule. The width and height can be used if the image is of a different size than what is needed on the page; otherwise, it defaults to the size of the image.

The crossorigin element can be confusing. It is used to ensure that you have ownership of an image before you modify the image in a canvas element. The image needs to either be from the same fully qualified domain name or the server's response must let the browser know whether the current domain can use the image.

Finally, srcset is used to give the browser a list of images that it can use. This is done with a comma-separated list of URLs and a descriptor. A descriptor can either be a width descriptor, which would be a number followed by w, or a pixel descriptor, which is a number followed by x. The width descriptor tells the browser the width of the image. The pixel descriptor tells the browser the pixel density it should use for the image.

Note

The width descriptor can also be used by the browser when the pixel density changes. For example, if you have an image that is double the resolution and the pixel density doubles as well, the browser will choose the larger resolution.

The sizes element is used along with srcset to help the browser identify a break point. This is done using a media condition, for example, "(min-width: 1600px) 25vw, 100vw". This states that if the width of the page is at least 1600 pixels, the images will be 25% of the view width, otherwise the view width is 100%. This helps the browser know where you want a break point and how large you want the image to be.

Note

The best way to think about srcset is that you are letting the browser know about all the images that can be used in a specific img element. You include the information that the browser is most concerned about—width and pixel density—and let the browser choose.

Here are a few examples. The first example is a simple img tag and the next one uses crossorigin:

<img src="example.png" alt="This is an example image"/>
<img src="example.png" crossorigin="anonymous" alt="This is an example image"/>

Here is a srcset example that lets the browser choose the image based on pixel density:

<img src="normal.jpg" srcset="normal.jpg 1x, retina.jpg 2x" alt="Image of Person in article" />

The following is an example using srcset and widths:

<img src="regular.jpg" srcset="double_size.jpg 1000w, regular.jpg 500w" sizes="100vw" alt="A bird"/>

iframe

The iframe element is the inline frame element:

<iframe height name seamless src width></iframe>

Attributes

The attributes that are used in the iframe element are as follows:

height: This is the attribute to set the height.
name: This states a name that can be used in the target attribute.
seamless: This makes iframe appear as part of the content of the document. This will apply the outer context CSS and enables us to open links in the outer context.
src: This is the URL of the embedded document.
width: This is the attribute to set the width.

Description

The iframe element is used to embed another full HTML document inside the current document.

Here is an example that loads the Google homepage and another that loads Packt Publishing's page:

<iframe src="http://www.google.com"></iframe>
<iframe height="100px" name="remote-document" seamless src="https://www.packtpub.com/" width="100px"></iframe>

embed

The syntax of the embed element is as follows:

<embed height src type width/>

Attributes

The attributes that are used in the embed element are as follows:

height: This is the attribute to set the height
src: This is the URL of the object to be embedded
type: This is the MIME type of the object
width: This is an attribute to set the width

Description

The embed element is used to embed other objects in the document. There are other elements for embedding objects as well, depending on their type. For example, you can embed a video using the video element, as follows:

<embed src="example.mp4" type="video/mp4"/>

object

The syntax of the object element is as follows:

<object data height type width></object>

Attributes

Here are the attributes that are used in the object element:

data: This is the URL of the object to be embedded
height: This is the attribute to set the height
type: This is the MIME type of the object
width: This is the attribute to set the width

Description

The object element can be used very much like the embed element. This has historically been used for the Flash objects.

Here is an example:

<object data="example.swf" type="application/x-shockwave-flash"></object>

param

The param element is the parameter element:

<param name="movie" value="video.swf"/>

Attributes

The attributes that are used in the param element are as follows:

name: This is the name of the parameter
value: This is the value of the parameter

Description

The param element defines a parameter for the object element. The parent of this element should be an object element.

Here is an example. This example is useful when using objects on older browsers:

<object data="example.swf" type="application/x-shockwave-flash">
    <param name="movie" value="example.swf" />
</object>

video

The syntax of the video element is as follows:

<video autoplay buffered controls crossorigin height loop muted played poster src width></video>

Attributes

The attributes that are used in the video element are as follows:

autoplay: This is a Boolean attribute that tells the browser to start playing the video as soon as it can play after the loading has stopped
buffered: This is a read object that tells how much of the video has buffered
controls: This is a Boolean attribute to decide whether to display the controls
crossorigin: This attribute is used make a CORS request if you plan on modifying the video in a canvas and the video is not hosted at the same fully qualified domain name
height: This is the attribute to set the height
loop: This states whether or not to loop the video
muted: This states whether or not to mute the audio
played: This is a read object, which reads how much of the video has been played
poster: This is a URL of an image that will be displayed until the video can played
src: This is the URL of the video
width: This is the attribute to set the width

Description

The video element is a new element introduced in HTML5. You can use this to play a video directly in the browser. This is very useful as the user does not need a plugin or special player to view the video. In addition to this, you can use the video element as a source for the canvas element.

You can also use the source element to include multiple sources in case the browser can only play a certain type of file. If the browser does not support the video element or the file type, you can put the fallback content into the element.

Here is an example using the video element and another that demonstrates possible values for all of the attributes:

<video src="example.mp4" autoplay poster="example-poster.png"></video>
<video autoplay buffered controls crossorigin="anonymous" height="100px" loop muted played poster="cover.jpg" src="video.ogg" width="100px"></video>

audio

The syntax of the audio element is as follows:

<audio autoplay buffered controls loop muted played src volume></audio>

Attributes

The attributes that are used in the audio element are as follows:

autoplay: This is the attribute in which the browser will start playing the audio as soon as it can without loading
buffered: This is the attribute that has the buffered time ranges
controls: This is the attribute that has the browser display controls
loop: This is the attribute that decides whether or not to loop the audio
muted: This is the attribute that decides whether or not to mute the audio
played: This is the attribute that has the time ranges of the audio played
src: This is the attribute that gives the URL of the audio
volume: This is the attribute that ranges the volume from 0.0 to 1.0

Description

The audio element was introduced in HTML5. You can add an audio to your page and make the browser play it.

You can also use the source element to include multiple sources in case the browser can play a certain type of file. If the browser does not support the audio element or the file type, you can put fallback content into the element.

Here is an example using the audio element:

<audio src="test.mp3" autoplay loop>
    Your browsers does not support the audio element.
</audio>

source

The syntax of the source element is as follows:

<source src type />

Attributes

The attributes that are used in the source element are as follows:

src: This is the URL of the resource
type: This is the MIME type of the resource

Description

The source element is used to add multiple sources to the audio, picture, and video elements. It must be a child of one of these elements. You can use this to specify multiple formats of the same resource. For example, you can have two different video encodings for a video. If the browser cannot play the first, it will fall back to the other.

Here is an example with an audio element:

<audio autoplay controls>
    <source src="test.ogg" type="audio/ogg" />
    <source src="test.mp3" type="audio/mpeg">
</audio>

track

The syntax of the track element is as follows:

<track default kind label src />

Attributes

Here are the attributes that are used in the track element:

default: This states whether the chosen track is the default track or not.
kind: This states the different kinds of tracks that can be loaded. Here are the values: subtitles, captions, descriptions, chapters, or metadata.
label: This is the title of the track.
src: This is the URL of the resource.

Description

You will mainly use the track element to add captions or subtitles to videos.

Here is an example video with captions:

<video src="test.mp4">
    <track label="English" kind="captions" src="en.vtt" default>
    <track label="Spanish" kind="captions" src="sp.vtt">
</video>

Tables

Tables are useful for showing data. They make defining rows and columns very easy. In the past, tables were used to create layouts, but today, that is done with CSS. They should be used to only display the tabular data.

table

The syntax of the table element is as follows:

<table></table>

Description

The table element is the root element for creating a table. All the other elements in this section must be children of this element.

Here is a simple example of the table element:

<table>
    <tr>
        <td>Column in Row 1</td>
    </tr>
</table>

caption

The syntax of the caption element is as follows:

<caption></caption>

Description

The caption element will be the title of the table. This element must be the first child of the table element.

Here is a simple example:

<table>
    <caption>Caption for the table</caption>
    <tr>
        <td>Column in Row 1</td>
    </tr>
</table>

colgroup

The colgroup element is the column group element:

<colgroup span></colgroup>

Attributes

The span attribute states the number of columns the group spans.

Description

The colgroup element is used to define styles that are common to all columns or groups of columns. This element is not as useful as it once was as the new CSS selectors can target all the columns and even some specific columns.

tbody

The tbody attribute is the table body element:

<tbody></tbody>

Description

The tbody attribute is the main part of a table. All of the data rows and columns should go in this element. This element should have one or more tr elements as its children.

Here is an example:

<table>
    <tbody>
        <tr>
            <td>Column in Row 1</td>
        </tr>
    </tbody>
</table>

thead

The thead element is the table head element:

<thead></thead>

Description

The thead element is the row that has all of the column headings. It must appear before the tbody or tfoot elements.

Here is an example:

<table>
    <thead>
        <tr>
            <th>Heading 1</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Column in Row 1</td>
        </tr>
    </tbody>
</table>

tfoot

The tfoot element is the table footer element:

<tfoot></tfoot>

Description

The tfoot element is the footer for the table. It must be used after any thead elements, but can be either before or after tbody. The placement of the tfoot element does not affect where it is rendered, which is always at the bottom.

Here is an example:

<table>
    <tbody>
        <tr>
            <td>Column in Row 1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Footer 1</td>
        </tr>
    </tfoot>
</table>

tr

The tr element is the table row element:

<tr></tr>

Description

The tr element is the row element. Every time you need another row in a table, use this element. This element can be the child of a table, tbody, thead, or tfoot element. You must use either a td or th as its child.

Here is an example:

<table>
    <tbody>
        <tr>
            <td>Column in Row 1</td>
        </tr>
    </tbody>
</table>

td

The td element is the table cell element:

<td colspan headers rowspan></td>

Attributes

The attributes that are used in the td element are as follows:

colspan: This tells how many columns it will span as an integer
rowspan: This tells how many rows the rowspan attribute will span as an integer
headers: This is a space-separated list of strings that match the ID of any th element

Description

The td element is the basic table column element. The colspan and rowspan attributes allow you to make the column wider and taller, respectively.

Here is an example:

<table>
    <tbody>
        <tr>
            <td>Column in Row 1</td>
        </tr>
    </tbody>
</table>

th

The th element is the table header cell element:

<th colspan rowspan></th>

Attributes

The attributes that are used in the th element are as follows:

colspan: This states the number of columns the colspan attribute will span as an integer
rowspan: This states the number of rows the rowspan attribute will span as an integer

Description

The th element is used when we add a column to the thead element.

Here is an example:

<table>
    <thead>
        <tr>
            <th>Header</th>
        </tr>
    </thead>
</table>

Forms

Forms are great for getting information from the user. They usually have multiple elements inside them that accept input from the user. The data acquired from the input of the user is then sent to the server to process.

Form

The syntax of the form element is as follows:

<form accept-charset action autocomplete enctype method name novalidate target></form>

Attributes

The attributes that are used in the form element are as follows:

accept-charset: This is a list of character encodings that the server accepts. This can be a space- or comma-delimited list.
action: This is the URL that will process the form.
autocomplete: This lets the browser know whether it can autocomplete this form with previous values.
enctype: This sets the MIME type for the content being sent to the server.
method: This is the HTTP method that will be used to submit the form. It can be Post or Get.
name: This is the name of the form.
novalidate: This tells the browser not to validate the form.
target: This states where the response will be displayed. This can be: _self, _blank, _parent, or _top.

Description

The form element is the root element of a form in a document. When submitted, the form will contain all the data that is entered into the different elements inside of the form.

Here is a simple form of the syntax:

<form action="processForm" method="post">
    <input type="text" name="text-input"/>
    <button type="submit">Submit!</button>
</form>

fieldset

The syntax of the fieldset element is as follows:

<fieldset disabled form name></fieldset>

Attributes

The attributes that are used in the fieldset element are as follows:

disabled: This disables all the elements in the fieldset
form: This is the ID of the form the form attribute belongs to
name: This is the name of fieldset

Description

The fieldset element allows us to group related inputs together. The default style of most browsers is to put a border around the fieldset.

If the first element is a legend element, then the fieldset will use that as its label.

Here is an example of using the fieldset element:

<form action="processForm" method="post">
    <fieldset>
        <legend>This is a fieldset</legend>
        <input type="text" name="text-input" />
    </fieldset>
</form>

legend

The syntax of the legend element is as follows:

<legend></legend>

Description

The legend element will become the label of the fieldset element that it is a child of.

label

The syntax of the label element is as follows:

<label accesskey for form></label>

Attributes

The attributes that are used in the label element are as follows:

accesskey: This is a shortcut for the accesskey element
for: This is the ID of a form element that this is the label for
form: This is the ID of the form the form attribute is associated with

Description

The label element is for labeling inputs. You can either put the element in the label or use the for attribute. When the label is correctly linked to an input, you can click the label and the cursor will be in the input.

Here is an example that covers each different way of labeling an element:

<form action="processForm" method="post">
    <label>First name: <input type="text" name="firstName" /></label>
    <label for="lastNameInput">Last name: </label><input id="lastNameInput" type="text" name="lastName" />
</form>

input

The syntax of the input element is as shown:

<input accept autocomplete autofocus checked disabled form formaction formenctype formmethod formnovalidate formtarget height inputmode max maxlength min minlength multiple name placeholder readonly required size spellcheck src step tabindex type value width></input>

Attributes

The attributes that are used in the input element are as follows:

accept: This is used to specify which file types are accepted for the web page.
autocomplete: This says whether the browser can autocomplete this input based on previous values.
autofocus: This lets the browser automatically focus on the element. This should only be used on one element.
checked: This is used with the radio or checkbox. This will select the value on page load.
disabled: This says whether or not to disable the element.
form: This states the ID of the form.
formaction, formenctype, formmethod, formnovalidate, and formtarget: These will override the form's value if these attributes are associated with a button or image.
height: This is used to set the height of the image.
inputmode: This gives a hint to the browser of what keyboard to display. For example, you can use numeric to specify only the keypad.
max: This is the maximum number or date-time of the system.
maxlength: This is the maximum number of characters that can be accepted in the web page.
min: This is the minimum number or date-time of the system.
minlength: This is the minimum number of characters.
multiple: This says whether there can be multiple values or not. This is used with email or file.
placeholder: This is the text that is displayed in the element when there is no value assigned to this attribute.
readonly: This makes the element of the read-only format.
required: This is the element that is required to be assigned a value and cannot be blank.
size: This is the size of the element.
src: This will be the URL of the image if it is of the img type.
step: This is used with the min and max attributes to determine the incremental steps.
tabindex: This is the order of the elements when using tab.
type: Refer to the next section for the description.
value: This is the initial value of the element.
width: This is the attribute to set the width.

Description

The input element is the main way to get data from the user. This element can vary quite a bit based on the type that is used. HTML5 has added a few inputs that also give you validation. For example, the email type will also validate that the e-mail is a valid email. In addition to this, the type can give hints to the browser about what keyboard to display. This is important for mobiles, which have many different virtual keyboards. For example, the tel type will show a number pad instead of the regular keyboard. Here is a rundown of the different types of keyboards and their description:

button: This is a button.
checkbox: This is a checkbox.
color: For most browsers, this will create a color picker; however, it is not required by HTML5.
date: This creates a date picker.
datetime: This creates a date and time picker using a time zone.
datetime-local: This creates a date and time picker without a time zone.
email: This is a text input for e-mail addresses. This type validates e-mails.
file: This selects a file.
hidden: This attribute will not be displayed, but the value will still be part of the form.
image: This essentially creates an image button.
month: This can enter the month and year.
number: This is used for a floating point number.
password: This is a text input where the text is not shown.
radio: This is a control to group multiple elements using the same name attribute. Only one from the provided list can be selected.
range: This a way to select a range of numbers.
reset: This resets the form.
search: This is a text input.
submit: This is a button that will submit the form.
tel: This is an input to enter a phone number.
text: This is your basic text input.
time: This is the time without a time zone.
url: This an input to enter a URL. This will do validation as well.
week: This is to enter the week number.

Here is an example of the text, e-mail, and tel inputs:

<input type="text" name="name" placeholder="enter email"/>
<input type="email" />
<input type="tel" />

button

The syntax of the button element is as follows:

<button autofocus disabled form formaction formenctype formmethod formnovalidate formtarget name type value></button>

Attributes

The attributes that are used in the button element are as follows:

autofocus: This lets the browser automatically focus on the element that this is an attribute of. This should only be used on one element.
disabled: This states whether or not to disable the element.
form: This is the ID of the form.
formaction, formenctype, formmethod, formnovalidate, and formtarget: These will override the form's value if this is a button or image.
name: This is the name of the button for the form.
type: This changes what the button does. The values are submit—which submits the form, reset— which resets the form, button—which is the default that does nothing.
value: This is the initial value of the element.

Description

The button element creates a button that can be clicked on. Changing the type attribute will change its behavior.

Here is an example of the reset and submit buttons:

<button type="reset">Reset</button>
<button type="submit">Submit</button>

select

The syntax of the select element is as follows:

<select autofocus disabled form multiple name required size ></select>

Attributes

The attributes that are used in the button element are as follows:

autofocus: This lets the browser automatically focus on this element. This should only be used on one element.
disabled: This states whether or not to disable the element.
form: This is the ID of the form.
multiple: This states whether or not multiple items can be selected.
name: This is the name of the element.
required: This checks whether the option needs a value.
size: This determines the number of rows for the element.

Description

The button element is used with the option element. Multiple option elements can be added to the list to select or choose from. The value of the selected option is used when the form is submitted.

Here is an example:

<select name="select">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

optgroup

The optgroup element is the option group element:

<optgroup disabled label></optgroup>

Attributes

The attributes that are used in the optgroup element are as follows:

disabled: This disables the group
label: This is the heading in the drop-down menu

Description

The optgroup element allows you to group options together. The children of this element need to be the option elements. They are not selectable and do not have a value.

Here is an example of the outgroup element with car makes and models:

<select name="cars">
   <optgroup label="Ford">
       <option value="Fiesta">Fiesta</option>
       <option value="Taurus">Taurus</option>
   </optgroup>
    <optgroup label="Honda">
        <option value="Accord">Accord</option>
        <option value="Fit">Fit</option>
    </optgroup>
</select>

option

The syntax of the option element is as shown:

<option disabled selected value></option>

Attributes

The attributes that are used in the option element are as follows:

disabled: This states whether or not the element is disabled.
selected: This states whether or not the option is selected. We can set only one option per selected element.
value: This states the value of the option.

Description

The option elements are the actual items in the select element. They can either be the child of a select or optgroup element.

Here is an example:

<select name="select">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

textarea

The syntax of the textarea element is as follows:

<textarea autocomplete autofocus cols disabled form maxlength minlength name placeholder readonly required rows spellcheck wrap></textarea>

Attributes

The attributes that are used in the textarea element are as follows:

autocomplete: This states whether the browser can autocomplete this input based on previous values or not.
autofocus: This lets the browser automatically focus on this element. This should only be used on one element.
cols: This states the width of the textarea element in characters.
disabled: This states whether or not to disable the element.
form: This is the ID of the form.
maxlength: This is the maximum number of characters.
minlength: This is the minimum number of characters.
name: This is the name of the element.
placeholder: This is the text that is displayed in the element when there is no value.
readonly: This makes the element read-only.
required: This states that the element is required and cannot be blank.
rows: This states the number of rows for textarea.
spellcheck: This states whether or not the element should have the spelling checked.
wrap: This states how the lines are wrapped.

Description

You will use this when you need more text than just a single line.

Here is an example:

<textarea cols="20" rows="10" placeholder="Input text here"></textarea>

Drawing elements

In previous versions of HTML, if you wanted a graphic or image, you had to create it in another application and use the img element to pull it into your document. HTML5 has brought some new elements and features to replace the old elements that allow you to draw your own images in the browser.

canvas

The syntax of the canvas element is as follows:

<canvas height width></canvas>

Attributes

The attributes that are used in the canvas element are as follows:

height: This is an attribute to set the height
width: This is an attribute to set the width

Description

The canvas element is used for drawing. You can use JavaScript to draw lines, shapes, and images; pull frames from videos; and use WebGL, to name just a few features. The HTML element is just the canvas (aptly named!) that you use to make a drawing. All of the interaction happens in JavaScript.

Here is an example of a small canvas element:

<canvas height="400" width="400">
    Your browser does not support the canvas element.
</canvas>

svg

The svg element is the Scalable Vector Graphics (SVG) element:

<svg height viewbox width ></svg>

Attributes

The attributes that are used in the svg element are as follows:

height: This is the attribute that sets the height.
viewbox: This sets the bounds for the element. It takes four numbers that map to min-x, min-y, width, and height.
width: This is the attribute that sets the width.

Description

SVG is not a true HTML element. It is its own specification with many elements and attributes. There are books written entirely about SVG. This element is here because you can now create inline SVG in an HTML document. This gives you a lot of flexibility with two-dimensional drawings that images do not give you.

Here is an example that demonstrates the difference between height, width, and viewport. The viewport takes up the bounds of the element, and height and width give the element its size:

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio=""
    width="200" height="100" viewBox="0 0 400 200">
    <rect x="0" y="0" width="400" height="200" fill="yellow" stroke="black" stroke-width="3" />
</svg>

Thomas Apr 25, 2016

I have been writing software since the time when ALL phones had wires. And I have been working with HTML since the birth of the Internet.This is the most thorough and complete reference I have ever seen. I learn something new simply browsing the pages!You cannot work as a developer on the web without touching Javascript.The introduction to Javascript in this book is equally valuable for an “old-salt” like me who has bad habits from days-gone-by or someone approaching it anew.Some of those quirky things about Node and the less-oft-used jewels in Bootstrap are collected here in a single reference.I highly recommend purchasing this in electronic format; “search" is an essential tool when you need to find something.The section on Angular is right up-to-date with recent changes, making it highly valuable as a resource.I am already a big fan of Packt Publishing. This is another great guide from Packt.

Amazon Verified review

Rahul May 11, 2016

This is without doubt one of the best guides for web applications development. I'd recommend this book to anyone who is embarking on a journey to become a web developer.

Jack W Jul 06, 2016

This book has a very good index and table of contents. It is also written like a cross between a classroom text and reference book. Most sections begin with some discussion of the language and enough background to clear up some basic terms and orient you to what the scope of the section / chapter is.I think they do a good job providing short examples that are easy to read and provide enough depth so you can actually see how a particular function works. They also provide narrative for things that are not obvious including the examples. The book is completely absent of war stories or anything rehashing the history of computing since ENIAC, thank goodness! Historical passages are short and relevant to understanding the content in my opinion.The books use of English is a little odd for me as an American but it's not a problem. If you've worked with diverse international teams, you'll be fine. If you haven't some things might take a 2nd or 3rd read. I don't think this is really any better or worse than other programming books. Developers tend to use English in strange ways anyway ...Last and not at all least, I have not stumbled into any technical errors, inaccuracies, or stylistic conventions I would consider unacceptable.What I would like to see are references or discussions about uniform conventions that almost seem like they are part of the language. For instance the use of "e" to pass and event object into a Javascript function. For beginners or folks like myself trying to transition into a different technology these 'little' things can take hours to sort out.

Web Developer's Reference Guide: A one-stop guide to the essentials of web development including popular frameworks such as jQuery, Bootstrap, AngularJS, and Node.js

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Attributes

Description

Description

title

Description

link

Attributes

Description

See also

meta

Attributes

Description

Note

See also

style

Attributes

Description

See also

base

Attributes

Description

See also

script

Attributes

Description

noscript

Description

Attributes

Description

Description

Description

article

Description

Description

See also

Description

See also

Description

Description

Description

Description

Description

Description

Attributes

Description

Attributes

Description

See also

Description

See also

Attributes

Description

See also

Description

See also

Description

See also

Description

See also

Description

See also

Description

See also

Description

main

Description

Attributes

Description

Description

Attributes

Description

Description

Description

Description

Description