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.
The DOCTYPE element defines the document type of the file, as follows:
<!DOCTYPE documentType>
The documentType attribute that you can see in the preceding code lets the browser know the type of document you will use.
HTML5 has a simple document type declaration, <!DOCTYPE html>. This lets the browser know that the document is HTML5. The previous versions of HTML needed a formal definition of the version being used, but HTML5 has removed this for simplicity.
Most browsers will enforce strict adherence to the document type declared and try and figure out what it is based on looking at the document. This can lead to rendering issues, so it is recommended that you do follow the standards.
Here is an HTML5 declaration:
<!DOCTYPE html>
The html element is the root element of the HTML document:
<html manifest></html>
The html element must directly follow the DOCTYPE element. This is the root element that all other elements must be descendants of.
The html element must have one head element and one body element as its children. All other elements will be inside these tags.
Here is what a simple HTML page looks like:
<!DOCTYPE html>
<html manifest="offline.appcache"><head>
</head>
<body>
Hey
</body>
</html>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.
The head element is the metadata parent element. All other metadata elements will be children of this element:
<head></head>
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>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>
The
link element links a resource to the current document:
<link crossorigin href media rel sizes type></link>
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 nothref: This indicates the URL of the resourcemedia: This selects the media that this resource applies torel: This indicates the relationship of this resource to the documentsizes: This is used withrelwhen it is set toiconstype: This indicates the type of content of the resource
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>
The meta element contains metadata about the document. The syntax is as follows:
<meta content http-equiv name></meta>
The attributes that are used in the meta element are as follows:
content: This states the value of either thenameorhttp-equivattribute.http-equiv: This attribute, in the case of HTML5, can be set todefault-style, which sets the default style. Alternatively, it can be set torefresh, which can specify the number of seconds taken to refresh the page and a different URL for the new page if needed, for example,http-equiv="1;url=http://www.google.com".
The meta tag has many nonstandard applications. The standardized applications can be viewed in Chapter 2, HTML Attributes.
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" />
The
style element contains the style information.
CSS:
<style media scoped type></style>
The attributes that are used in the style element are as follows:
media: This is a media queryscoped: The styles contained in this element only apply to the parent elementtype: This sets the type of document; the default value istext/css
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>The base element is the base URL for the document. The syntax is as follows:
<base href target>
The attributes that are used in the base element are as follows:
href: This indicates the URL to be used as the base URLtarget: This indicates the default target to be used with the URL
The script element allows you to reference or create a script for the document:
<script async crossorigin defer src type><script>
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.
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>The noscript element will be parsed if scripting is turned off in the browser. The syntax is as follows:
<noscript></noscript>
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>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.
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>
The section element describes the content section of a document. For example, this can be a chapter of a book:
<section></section>
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>The nav element is the navigation element:
<nav></nav>
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>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>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>
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>
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>
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>The footer element provides a footer of a particular group of content, its syntax is as follows:
<footer></footer>
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>The address element is used for the contact address of the author or organization, its syntax is as follows:
<address></address>
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>The aside element is for supplemental content:
<aside></aside>
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>The p element is known as the paragraph element. This is a block element, its syntax is as follows:
<p></p>
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>
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.
The pre element is the preformatted text:
<pre></pre>
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>
The syntax of a
blockquote element is as follows:
<blockquote cite></blockquote>
The ol element is the ordered list element, which has the following syntax:
<ol reversed start type></ol>
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).
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>The ul element is an unordered list element:
<ul></ul>
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>The li element is the list item element:
<li value></li>
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.
The dl element is the definition list element:
<dl></dl>
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>The dt element is the definition term element:
<dt></dt>
The dd element is the definition description element:
<dd></dd>
The syntax of the
figure element is as follows:
<figure></figure>
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>The figcaption element is the figure caption element:
<figcaption></figcaption>
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>The div element is the division element:
<div></div>
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.
<div>
You can put whatever you want in here!
<div>
More elements.
</div>
</div>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>The following elements can all wrap text- and block-level elements to give them functionality, style, and meaning.
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>
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.
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>
The bdo element is the bi-direction override element:
<bdo dir></bdo>
The q element is the quote element:
<q cite></q>
The syntax of the span element is as follows:
<span></span>
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>
The syntax of the
strong element is as follows:
<strong></strong>
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.
The syntax of the
time element is as follows:
<time datetime></time>
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>
The wbr element is the word break opportunity element:
<wbr>
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.
The following elements are used to embed media or other objects into the document.
The img element is the image element:
<img alt crossorigin height ismap sizes src srcset width />
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.
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"/>
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 makesiframeappear 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.
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>
The syntax of the embed element is as follows:
<embed height src type width/>
The attributes that are used in the embed element are as follows:
height: This is the attribute to set the heightsrc: This is the URL of the object to be embeddedtype: This is the MIME type of the objectwidth: This is an attribute to set the width
The syntax of the
object element is as follows:
<object data height type width></object>
Here are the attributes that are used in the object element:
data: This is the URL of the object to be embeddedheight: This is the attribute to set the heighttype: This is the MIME type of the objectwidth: This is the attribute to set the width
The
param element is the parameter element:
<param name="movie" value="video.swf"/>
The attributes that are used in the param element are as follows:
name: This is the name of the parametervalue: This is the value of the parameter
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>The syntax of the video element is as follows:
<video autoplay buffered controls crossorigin height loop muted played poster src width></video>
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 stoppedbuffered: This is areadobject that tells how much of the video has bufferedcontrols: This is a Boolean attribute to decide whether to display the controlscrossorigin: 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 nameheight: This is the attribute to set the heightloop: This states whether or not to loop the videomuted: This states whether or not to mute the audioplayed: This is areadobject, which reads how much of the video has been playedposter: This is a URL of an image that will be displayed until the video can playedsrc: This is the URL of the videowidth: This is the attribute to set the width
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>
The syntax of the audio element is as follows:
<audio autoplay buffered controls loop muted played src volume></audio>
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 loadingbuffered: This is the attribute that has the buffered time rangescontrols: This is the attribute that has the browser display controlsloop: This is the attribute that decides whether or not to loop the audiomuted: This is the attribute that decides whether or not to mute the audioplayed: This is the attribute that has the time ranges of the audio playedsrc: This is the attribute that gives the URL of the audiovolume: This is the attribute that ranges the volume from 0.0 to 1.0
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>The syntax of the source element is as follows:
<source src type />
The attributes that are used in the source element are as follows:
src: This is the URL of the resourcetype: This is the MIME type of the resource
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>The syntax of the track element is as follows:
<track default kind label src />
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, ormetadata.label: This is the title of the track.src: This is the URL of the resource.
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.
The
tfoot element is the table footer element:
<tfoot></tfoot>
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>The tr element is the table row element:
<tr></tr>
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>The td element is the table cell element:
<td colspan headers rowspan></td>
The th element is the table header cell element:
<th colspan rowspan></th>
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.
The syntax of the
form element is as follows:
<form accept-charset action autocomplete enctype method name novalidate target></form>
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 bePostorGet.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.
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>The syntax of the fieldset element is as follows:
<fieldset disabled form name></fieldset>
The attributes that are used in the fieldset element are as follows:
disabled: This disables all the elements in the fieldsetform: This is the ID of the form theformattribute belongs toname: This is the name of fieldset
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>The syntax of the label element is as follows:
<label accesskey for form></label>
The attributes that are used in the label element are as follows:
accesskey: This is a shortcut for theaccesskeyelementfor: This is the ID of a form element that this is the label forform: This is the ID of the form theformattribute is associated with
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>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>
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, andformtarget: 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.multiple: This says whether there can be multiple values or not. This is used withemailorfile.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 theimgtype.step: This is used with theminandmaxattributes 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.
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" />
The syntax of the
button element is as follows:
<button autofocus disabled form formaction formenctype formmethod formnovalidate formtarget name type value></button>
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.formaction,formenctype,formmethod,formnovalidate, andformtarget: 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 aresubmit—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.
The syntax of the select element is as follows:
<select autofocus disabled form multiple name required size ></select>
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.
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>The
optgroup element is the option group element:
<optgroup disabled label></optgroup>
The attributes that are used in the optgroup element are as follows:
disabled: This disables the grouplabel: This is the heading in the drop-down menu
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>The syntax of the option element is as shown:
<option disabled selected value></option>
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 theoption.
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>
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 thetextareaelement 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 fortextarea.spellcheck: This states whether or not the element should have the spelling checked.wrap: This states how the lines are wrapped.
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.
The syntax of the canvas element is as follows:
<canvas height width></canvas>
The attributes that are used in the canvas element are as follows:
height: This is an attribute to set the heightwidth: This is an attribute to set the width
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>The svg element is the Scalable Vector Graphics (SVG) element:
<svg height viewbox width ></svg>
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 tomin-x,min-y,width, andheight.width: This is the attribute that sets the width.
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>
