Cool HTML Features


index
Disabled back button Next Section
printable version
Section 1: contenteditable

The contenteditable attribute makes it possible to edit and store text within a web browser.

contenteditable has three possible states:

  • contenteditable="" or contenteditable="true" – Indicates that the element is editable.
  • contenteditable="false" – Indicates that the element is not editable.
  • contenteditable="inherit" – Indicates that the element is editable if its immediate parent element is editable. This is the default value.

Here is an example:

<body contenteditable="true">

The above example can be seen here, and it allows every item in the page to be edited.

You can apply the contenteditable attribute to individual elements (demo), rather than to the entire document:

<ul contenteditable="true">

Tryit

Try jotting some notes in the box below.


Notes:

Remember, if links appear in an element that is set to contenteditable, the links will not work unless each anchor element has contenteditable set to false.

If you make changes in a page viewed in a browser, you can save your changes on a local drive for personal use.

Related "Stuff"

  • See also the "user-modify" CSS property.
  • designMode: This attribute of the document element can make the entire document editable.

Resources

Section 2: Highlighter

The mark element indicates that the enclosed text is highlighted or "marked" in some fashion to indicate that that text has relevance in some other context beyond the current page.

Basically, it is used to bring the reader's attention to a part of the text that might not have been considered important or overlooked.

Example:

<p>In other words, use it to <mark>highlight stuff</mark>!</p>

Results:

In other words, use it to highlight stuff!

Resources

Section 3: Time Element

The <time> tag, as its name implies, is intended to designate timestamps and other time-related data on web pages.

  • This adds additional semantic context to this type of information when it shows up on the web and makes it more machine-readable.
  • It also gives front-end developers the opportunity to more easily style timestamps using CSS.

Resources

Section 4: iframe Element

The iframe element allows you to embed other web pages directly into your web page.

The following link shows the attributes for the iframe tag:

Example

<iframe style="border:thin black solid; overflow:scroll;" src="../../../Research"></iframe>

Demo:

Resources

Section 5: noscript

The <noscript> element is used to provide alternative content for people accessing the web page with a browser that either doesn't support client-side scripting, or that has had its script support disabled by the user, perhaps for security reasons.

  • <noscript> can be used to redirect a user to a page that doesn't require scripts on an otherwise script-laden site.
    • The content inside the noscript will only appear if scripts aren't supported, or are disabled in the user's browser.
  • Here is an example: link
    • Notice that a noscript inside the <head> section can contain only text.
    • A noscript inside the <body> section can include the same HTML elements that you'd include in the body element; for example, headings, paragraphs, and other elements that are appropriate to the doctype that you specify.
    • Not all validators tolerate the use of HTML tags inside the noscript element.
  • Note that it’s not just humans who might benefit from noscript content.
    • If you have a web page that uses client-side scripting to create navigation, for example, those links will be all but hidden from search engines, which won't parse the scripts contained in the script element.
    • A simplified navigation block within the noscript element can provide a route for search engines to follow when they're indexing your site, regardless of whether the users ever see that content.

Resources

Section 6: Mobile Sites

Developing sites for the mobile web is a hot topic today.

  • More and more users are using a mobile device to traverse the web, which means it's becoming critical for developers to optimize their sites for the mobile browsers.

To find out more about developing sites for mobile users, read the links below. (They might be on the exam!)

Section 7: Drag and drop

JavaScript required...

Drag and drop allows the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.

  • A translucent representation of what is being dragged will follow the mouse pointer during the drag operation.
  • The drop location may be a different application.

Does that sound cool? All it takes is the draggable attribute, and some JavaScript. (example)

The bottom line is that we won't learn how to use drag and drop in this class, but here are some links if you want to explore it after an interactive web development course:

Section 8: Canvas

JavaScript required...

The element that is probably at the top of the HTML5 spec in terms of "wow factor" – the canvas element – is in fact an element that requires the use of JavaScript to make it work.

  • Using JavaScript, you can draw on that canvas using methods that look a lot like a graphics scripting language.
  • JavaScript basically grabs the canvas by its id attribute, using document.getElementById(), and then gets a context.
  • Most of the examples online that are really jaw-dropping use the 3D canvas, but there's a 2D canvas that’s a lot better entry-point if you're new to this sort of thing.
  • Once you’ve got a context, you can operate upon that object, using properties like fillStyle, and methods like fillRect(top, left, width, height).
  • The days of needing Flash to really do anything visually interesting are gone.

Resources

There are tons of web tutorials out there in both 2D and 3D, and a slew of :good video and publications:

Section 9: Offline Storage

Programming skills required...

If you're interested in offline storage, read the link below. (And I might include a test question or two.)

Section 10: Geolocation

Programming skills required...

The Geolocation API provides a method to locate the user’s exact (more or less) position.

  • This is useful in a number of ways ranging from providing a user with location specific information to providing route navigation.

Here are some links about geolocation:

Section 11: Example Pages