3: HTML Quick Reference

# Getting Started

HTML Quick Reference

This page is intended to provide an easy referencing point for all HTML markup that you may create, edit, or otherwise use throughout the template. Please note, in the examples below, some code samples may appear to run off the page. However, all samples are scrollable, meaning that any run-on code can be viewed by scrolling left and right.

## HTML

html
In the below code samples, italicized markup represents user-defined values.
<html>
<body>
<background>...</background>
<content>...</content>
<section>
<content>...</content>
</section>
</body>
</html>

## Body

body
In the below code samples, italicized markup represents user-defined values.
<body id="ecore" color1="primary_color" color1="secondary_color" btncolor="tint_amount" btnhover="shade_amount">
...
</body>

#### color1

The primary color for the template's color scheme.

All possible values include:
• Standard eCore Colors (eColors) – see Colors section of the Template Guide for more details
• Standard HTML Colors – see Colors section of the Template Guide for more details
• HEXs – prefixed with #
• RGBs – formatted as rgb(R,G,B)

#### color2

The secondary color for the template's color scheme.

All possible values include:
• Standard eCore Colors (eColors) – see Colors section of the Template Guide for more details
• Standard HTML Colors – see Colors section of the Template Guide for more details
• HEXs – prefixed with #
• RGBs – formatted as rgb(R,G,B)

#### btncolor

The amount of tint (lightness) for all navigation buttons. By default, this value is set to 10% if undeclared.

All possible values include:
• Percentages – ranging from 0% (no tint) to 100%
• Decimals – as a representation of a percentage equivalent, ranging from 0.00 (no tint) to 1.00

#### btnhover

The amount of shade (darkness) for all navigation buttons on hover. By default, this value is set to 10% if undeclared.

All possible values include:
• Percentages – ranging from 0% (no shade) to 100%
• Decimals – ranging from 0.00 (no shade) to 1.00 and representing of a percentage equivalent

In the below code samples, italicized markup represents user-defined values.
<leader type="prefix" lang="prefix_language" cont="is_continued">
...


#### type

The prefix to be added to the leader text. If this value is undeclared, by default, no prefix will be added.

All possible values include:
• Undefined – no prefix added
• intro – adds the prefix INTRODUCTION
• lesson – adds the prefix LESSON
• unit – adds the prefix UNIT
• module – adds the prefix MODULE
• chapter – adds the prefix CHAPTER
• preface – adds the prefix PREFACE
• prologue – adds the prefix PROLOGUE
• epilogue – adds the prefix EPILOGUE
• glossary – adds the prefix GLOSSARY
• appendix – adds the prefix APPENDIX
• index – adds the prefix INDEX
• foreword – adds the prefix FOREWORD
• afterword – adds the prefix AFTERWORD
• footnotes – adds the prefix FOOTNOTES
• endnotes – adds the prefix ENDNOTES
• part – adds the prefix PART

#### lang

The language of the prefix to be added to the leader text. If this value is undeclared and a type has been set, by default, prefixes will be in English.

All possible values include:
• undefined – defaults to English
• en – sets the prefix language to English
• es – sets the prefix language to Spanish
• fr – sets the prefix language to French

#### cont

The suffix to be added to the leader text to indicate a continuation. If this value is undeclared and a type has been set, by default, the suffix will not be added.

All possible values include:
• undefined – no suffix added
• yes – adds the suffix (continued)
• no – no suffix added

In the below code samples, italicized markup represents user-defined values.
<header>
<background>
<img valign="vertical_alignment" alt="alternative_text" desaturate="saturation_amont" src="image_url"/>
<colorize bgcolor="background_color" opacity="transparency_amount"></colorize>
<pattern align="horiztonal_alignment" valign="vertical_alignment" opacity="transparency_amount" src="pattern_url" size="pattern_size"></pattern>
</background>
<content>
<h1>...</h1>
<sh1>...</sh1>
</content>
<header>
<img src="image_url" alt="alternative_text" valign="vertical_alignment" desaturate="saturation_amount"/>

#### src

The source of the image.

All possible values include:
• Absolute Paths – URLs
• Relative Paths – file directories

#### alt

The text alternative to the image.

All possible values include:
• user-defined – for all images complementary to the page's content as provided by the content author
• null – for decorative images only

#### valign

The vertical alignment of the image within its container. By default, this value is set to middle if undeclared and an src is given.

All possible values include:
• top – align the top of the image to the top of the container
• middle – align the middle of the image to the middle of the container
• bottom – align the bottom of the image to the bottom of the container

#### desaturate

The amount of desaturation applied to the image. By default, this value is set to 75% if undeclared and an src is given.

All possible values include:
• Percentages – ranging from 0% (no desaturation) to 100%
• Decimals – ranging from 0.00 (no desaturation) to 1.00 and representing of a percentage equivalent
<colorize bgcolor="background_color" opacity="transparency_amount">

#### bgcolor

The background color of the element, for use as a solid or overlay. By default, this value is set to ecore-light-grey if undeclared (see Colors section of the Template Guide for more details).

All possible values include:
• Standard eCore Colors (eColors) – see Colors section of the Template Guide for more details
• Standard HTML Colors – see Colors section of the Template Guide for more details
• HEXs – prefixed with #
• RGBs – formatted as rgb(R,G,B)

#### opacity

The amount of transparency applied to the element. By default, this value is set to 50% if undeclared.

All possible values include:
• Percentages – ranging from 0% (no transparency) to 100%
• Decimals – ranging from 0.00 (no transparency) to 1.00 and representing of a percentage equivalent
<pattern src="pattern_url" opacity="transparency_amount" align="horizontal_alignment" valign="vertical_alignment" size="pattern_size">

#### src

The source of the pattern.

All possible values include:
• Absolute Paths – URLs
• Relative Paths – file directories

#### opacity

The amount of transparency applied to the pattern. By default, this value is set to 100% if undeclared and an src is given.

All possible values include:
• Percentages – ranging from 0% (no transparency) to 100%
• Decimals – ranging from 0.00 (no transparency) to 1.00 and representing of a percentage equivalent

#### align

The horizontal alignment of the pattern within its container. By default, this value is set to auto if undeclared and an src is given.

All possible values include:
• Percentages – relative to the left side of the pattern, ranging from 0% to 100%
• Pixels – relative to the left side of the pattern, suffixed with px
• Decimals – relative to the left side of the pattern, representing a pixel equivalent
• Left – align the left of the pattern to the left of the container
• Center – align the center of the pattern to the center of the container
• Right – align the right of the pattern to the right of the container

#### valign

The vertical alignment of the pattern within its container. By default, this value is set to auto if undeclared and an src is given.

All possible values include:
• Percentages – relative to the top side of the pattern, ranging from 0% to 100%
• Pixels – relative to the top side of the pattern, suffixed with px
• Decimals – relative to the top side of the pattern, representing a pixel equivalent
• Top – align the top of the pattern to the top of the container
• Center – align the center of the pattern to the center of the container
• Bottom – align the bottom of the pattern to the bottom of the container

#### size

The size of the pattern relative to its original size. By default, this value is set to contain if undeclared and an src is given.

All possible values include:
• Percentages – relative to the original pattern size, ranging from 0% to 100%
• Contain – fit into available space
• Cover – fill all available space

## Section

section
In the below code samples, italicized markup represents user-defined values.
<section image="icon_image" fit="icon_size" shape="icon_shape">
<h2>...</h2>
<sh2>...</sh2>
<content>
...
</content>
</section>

#### image

The source to an icon or other image.

All possible values include:
• Standard eCore Icons – see Icons section of the Template Guide for more details
• Absolute Paths – URLs
• Relative Paths – file directories

#### fit

The size of the image relative to its original size. By default, this value is set to 100% the original width if undeclared and an image is given.

All possible values include:
• Percentages – without a suffix, relative to the original width
• Percentages – with the suffix %w or w%, relative to the original width
• Percentages – with the suffix %h or h%, relative to the original height
• Width – 100% the original width
• Height – 100% the original height

#### shape

The shape of the image. By default, this value is set to circle if undeclared and an image is given.

All possible values include:
• circle
• square

## Define

define
In the below code samples, italicized markup represents user-defined values.
<define xmlsrc="xml_doc_url" term="xml_vocab_term">
...
</define>

#### xmlsrc

The source to an XML document containing a list of definitions. If left undefined, the definition lookup will not work.

• Absolute Paths – URLs to XML documents with the file extension .xml
• Relative Paths – file directories to XML documents with the file extension .xml

#### term

The exact term matching an entry in the relevant XML document. This attribute is optional but should be set if the term inside the opening and closing define tag varies from the exact word or phrase listed in the relevant XML document.

• user-defined – lookup uses the term given, which should match exactly to its entry in the relevant XML document
• undefined – lookup performed using the word or phrase inside the define tag instead

## Lists

ul and ol
In the below code samples, italicized markup represents user-defined values.

### Unordered Lists

Bulleted
<ul marker="marker_type">
<lt marker="marker_type">List title...</lt>
<li marker="marker_type">List item...</li>
<ls marker="marker_type">List item and subtitle...</ls>
</ul>

#### marker

The marker by name.

All possible values include:
• Standard HTML Markers – see Markers section of the Template Guide for more details
• Custom Markers – see Markers section of the Template Guide for more details

### Ordered Lists

Numbered
<ol marker="marker_type">
<lt marker="marker_type">List title...</lt>
<li marker="marker_type">List item...</li>
<ls marker="marker_type">List teim and subtitle...</ls>
</ol>
<ul>
<li>List level 1 item 1...
<ul>
<li>List level 2 item 1...</li>
</ul>
</li>
<ls>
<ol>
<li>List level 3 item 1...</li>
</ol>
</ls>
</ul>
</li>
</ul>
<ul class="keywords">
<li>Keyword 1...</li>
<li>Keyword 2...</li>
...
<li>Keyword n...</li>
</ul>

## Images, Videos, Audio, Objects, and iFrames

img, video, audio, object, and iframe
In the below code samples, italicized markup represents user-defined values, bolded markup represents custom attributes specific to the given element in the given context, and highlighted markup represents standard attributes that are used specifically for the given element in the given context only.

### Images

#### Outside multimedia

<img src="image_url" alt="alternative_text" title="title_text" float="relative_position" lspace="left_spacing" rspace="right_spacing"/>

#### float

The position of the media relative to any wrapped text. By default, this value is set to none.

All possible values include:
• left – position the media off-left with text wrapping to the right
• right – position the media off-right with text wrapping to the left
• center – position the media horizontally center
• sidebyside – position two or more medias next to one another
• none – position the media as normal without text wrapping
By default, the float attribute's sidebyside value will align two media elements side-by-side with no spacing between the two elements. For aligning more than two media elements side-by-side, you can use the float attribute in conjunction with the standard width attribute to achieve the desired results. For instance, setting width33% and floatsidebyside for three consecutive images will align all three images side-by-side. To learn how to apply spacing between or around floated media objects, see the next two sections below.

#### lspace

The left spacing to be added to the media. By default, this value is set to 20 when floatright or 0 otherwise.

All possible values include:
• Digits – without a suffix, representative of a pixel value
• Pixels – with the px suffix
• Percents – with the % suffix
When using spacing on media with floatsidebyside, it's important to make sure that all applied width, lspace, rspace attributes for the your series of floated objects always totals 100% or as close to 100% as possible. This will ensure that all floated objects in the series remain side-by-side.

#### rspace

The right spacing to be added to the media. By default, this value is set to 20 when floatleft or 0 otherwise.

All possible values include:
• Digits – without a suffix, representative of a pixel value
• Pixels – with the px suffix
• Percents – with the % suffix
When using spacing on media with floatsidebyside, it's important to make sure that all applied width, lspace, rspace attributes for the your series of floated objects always totals 100% or as close to 100% as possible. This will ensure that all floated objects in the series remain side-by-side.

#### Inside multimedia

<img src="image_url" alt="alternative_text" title="title_text"/>

### Videos

#### Outside multimedia

##### Generic Player
<video float="relative_position" lspace="left_spacing" rspace="right_spacing" controls>
<source src="video_url" type="video_type">
<track src="track_url" srclang="track_language" kind="track_type" label="track_title">
</video>
##### Custom Player (Preferred)
<video float="relative_position" lspace="left_spacing" rspace="right_spacing" preload="metadata" crossorigin="anonymous">
<source src="video_url" type="video_type" resolution="video_resolution">
<track src="track_url" srclang="track_language" kind="track_type" label="track_title">
<cue in="in_point" out="out_point">Cue name...</cue>
</video>

#### resolution

The resolution of the source file. If left undefined, the source file is assumed to be 1080p.

All possible values include:
• 1080p or 1920x1080 – sets the quality setting to 1080p
• 720p or 1280x720 – sets the quality setting to 720p
• 480p or 854x480 – sets the quality setting to 480p
• 360p or 640x360 – sets the quality setting to 360p
• 240p or 426x240 – sets the quality setting to 240p
• 144p or 254x144 – sets the quality setting to 144p

#### in

The in-point of the cue. A value is required in order for the cue to work.

All possible values include:
• start – sets the value to the start-point of the video
• 00:00:00 – a time formatted as hh:mm:ss, with or without the leading zero in hh
• 00:00 – a time formatted as mm:ss, with or without the leading zero in mm
• 0.00 – a time formatted as s.ss, with or without decimal places
The value of the in attribute cannot be greater than or equal to the value of the out attribute or less than the starting point of the video (0).

#### out

The out-point of the cue. A value is required in order for the cue to work.

All possible values include:
• end – sets the value to the end-point of the video
• 00:00:00 – a time formatted as hh:mm:ss, with or without the leading zero in hh
• 00:00 – a time formatted as mm:ss, with or without the leading zero in mm
• 0.00 – a time formatted as s.ss, with or without decimal places
The value of the out attribute cannot be less than or equal to the value of the in attribute or greater than the ending point of the video (the video's duration).

#### Inside multimedia

##### Generic Player
<video controls>
<source src="video_url" type="video_type">
<track src="track_url" srclang="track_language" kind="track_type" label="track_title">
</video>
##### Custom Player (Preferred)
<video preload="metadata" crossorigin="anonymous">
<source src="video_url" type="video_type" resolution="video_resolution">
<track src="track_url" srclang="track_language" kind="track_type" label="track_title">
<cue in="in_point" out="out_point">Cue name...</cue>
</video>

### Audio

#### Outside multimedia

<audio float="relative_position" lspace="left_spacing" rspace="right_spacing" controls>
<source src="audio_url" type="audio_type">
</audio>

#### Inside multimedia

<audio controls>
<source src="audio_url" type="audio_type">
</audio>

### Objects

#### Outside multimedia

<object data="object_url" type="object_type" float="relative_position" lspace="left_spacing" rspace="right_spacing"></object>

#### Inside multimedia

<object data="object_url" type="object_type"></object>

### iFrames

#### Outside multimedia

##### Fixed Size
<iframe src="frame_url" width="pixel_width" height="pixel_height" float="relative_position" lspace="left_spacing" rspace="right_spacing"></iframe>
##### Scalable Size (2nd Preferred)
<iframe src="frame_url" width="percent_width" origwidth="pixel_width" origheight="pixel_height" float="relative_position" lspace="left_spacing" rspace="right_spacing" autoscale></iframe>

#### origwidth

The original width of the iframe. Usually, when copying-and-pasting an embed code from a video provider, the default width attribute of the iframe object will contain the value of the video's original width. Simply move that value into the origwidth attribute instead, replacing the width attribute value with your desired width in percents.

All possible values include:
• Digits – the original width of the video as a plain number, no suffixes included

#### origheight

The original height of the iframe. Usually, when copying-and-pasting an embed code from a video provider, the default height attribute of the iframe object will contain the value of the video's original height. Simply move that value into the origheight attribute instead. You can remove the inital height attribute altogether.

All possible values include:
• Digits – the original height of the video as a plain number, no suffixes included

#### autoscale

The auto-scale trigger, which indicates that a video should be scaled according to its aspect ratio. If the attribute is not provided, the video will not scale automatically. Providing the attribute enables this functionality.

All possible values include:
• autoscale – no attribute value is needed
##### Fluid Size (1st Preferred)
<iframe src="frame_url" width="pixel_width" height="pixel_height" fluid></iframe>
The custom attributes float, lspace, and rspace cannot be used because they do not work with the custom fluid attribute.

#### Inside multimedia

##### Fixed Size
<iframe src="frame_url" width="pixel_width" height="pixel_height"></iframe>
##### Scalable Size (2nd Preferred)
<iframe src="frame_url" width="percent_width" origwidth="pixel_width" origheight="pixel_height" autoscale></iframe>
##### Fluid Size (1st Preferred)
<iframe src="frame_url" width="pixel_width" height="pixel_height" fluid></iframe>
Captions can be added to any of the above types of media using the same format outlined below.
<img class="caption"
src="image_url"
alt="alternative_text"
title="title_text"
float="relative_position"
lspace="left_spacing"
rspace="right_spacing"
caption="caption_text"
caption-src="caption_url"
caption-state="is_showing"
caption-mode="caption_mode"/>

#### caption

The caption to be displayed. If no value is given or the caption attribute is missing but classcaption has been set, by default, the contents of the alt attribute will be used instead if present.

All possible values include:
• User Defined – the media's caption
You may wish to add a link (a) around a word or phrase in your caption. Doing so is permissible, but must be approached with caution. Any double-quotes (") inside the HTML code must be escaped using &quot; or replaced with single-quotes ('). But wait, if you want to add a link around your entire caption, it is recommended that you use the caption-src attribute instead (see below for more details).

#### caption-src

The link to be added to the caption. If no value is given or the caption attribute is missing but classcaption has been set, by default, no link will be added.

All possible values include:
• URL – the web address to be opened on click
• Named Anchors – the ID of an anchor point on the current page to be jumped to on click

#### caption-state

The visible state of the caption. This can bed toggled to hide the caption when only attribution is desired. If no value is given, an invalid value is given, or the caption-state attribute is missing but classcaption has been set, by default, this value will be set to true.

All possible values include:
• false – or the derivatives off or no to hide captions
• true – or the derivatives on or yes to show captions
Negating the caption-state value with false, or any of its derivatives such as off or no, is required when you wish to turn off captioning. Setting the caption-state attribute to a positive value when you wish to turn on captioning is not required since this is the default behavior. However, setting the value of the caption-state attribute to true, or any of its derivatives such as on or yes, may be preferred for consistency and standardization.

#### caption-mode

The style of caption to be used. If no value is given, an invalid value is given, or the caption-mode attribute is missing but classcaption has been set, by default, this value will be set to show.

All possible values include:
• box – a box underneath the media
• overlay – a box overtop the lower portion of the media
• hide – a visible box overtop the lower portion of the media, which slides out of view on hover
• show – a hidden box underneath the media, which slides in to view on hover
The caption-mode attribute is only required when changing the captioning mode from its default style. However, setting the value of the caption-mode attribute may be preferred for standardization purposes.
##### Examples

An example of each caption-mode is show below:

Hover to try it out. Hover to try it out.
Attributions can be added to any of the above types of media using the same format outlined below.
<img class="caption"
src="image_url"
alt="alternative_text"
title="title_text"
float="relative_position"
lspace="left_spacing"
rspace="right_spacing"
by="image_author"
from="source_name"
from-src="source_url"
derivative="is_derived"/>

The visible state of the attribution. This can be toggled to show the attribution when corresponding attributes are given (see the follwing sections for more details on corresponding attributes). If no value is given, an invalid value is given, or the attribution-state attribute is missing but classcaption has been set, by default, this value will be set to false.

All possible values include:
• false – or the derivatives off or no to show attributions
• true – or the derivatives on or yes to hide attributions
Affirming the attribution-state value with true, or any of its derivatives such as on or yes, is required when you wish to turn on attributing. Setting the attribution-state attribute to a negative value when you wish to turn off attributing is not required since this is the default behavior. However, setting the value of the attribution-state attribute to false, or any of its derivatives such as off or no, may be preferred for consistency and standardization.

The license belonging to the media. This attribute requires that attribution-state be set to true. If no value is given, an invalid value is given, or the license attribute is missing but classcaption and attribution-statetrue have been set, by default, this attribute will be ignored.

All possible values include:
• Standard License Names – see below on Standard Licenses for more details
• User Defined – the name of any non-standard license as defined below

Version1.0

TitleCC 0

Image

Version4.0

TitleCC BY 4.0

Image

Version3.0

TitleCC BY 3.0

Image

Version2.5

TitleCC BY 2.5

Image

Version2.0

TitleCC BY 2.0

Image

Version1.0

TitleCC BY 1.0

Image

Version4.0

TitleCC BY-SA 4.0

Image

Version3.0

TitleCC BY-SA 3.0

Image

Version2.5

TitleCC BY-SA 2.5

Image

Version2.0

TitleCC BY-SA 2.0

Image

Version1.0

TitleCC BY-SA 1.0

Image

Version4.0

TitleCC BY-ND 4.0

Image

Version3.0

TitleCC BY-ND 3.0

Image

Version2.5

TitleCC BY-ND 2.5

Image

Version2.0

TitleCC BY-ND 2.0

Image

Version1.0

TitleCC BY-ND 1.0

Image

Version4.0

TitleCC BY-NC 4.0

Image

Version3.0

TitleCC BY-NC 3.0

Image

Version2.5

TitleCC BY-NC 2.5

Image

Version2.0

TitleCC BY-NC 2.0

Image

Version1.0

TitleCC BY-NC 1.0

Image

Version4.0

TitleCC BY-NC-SA 4.0

Image

Version3.0

TitleCC BY-NC-SA 3.0

Image

Version2.5

TitleCC BY-NC-SA 2.5

Image

Version2.0

TitleCC BY-NC-SA 2.0

Image

Version1.0

TitleCC BY-NC-SA 1.0

Image

Version4.0

TitleCC BY-NC-ND 4.0

Image

Version3.0

TitleCC BY-NC-ND 3.0

Image

Version2.5

TitleCC BY-NC-ND 2.5

Image

Version2.0

TitleCC BY-NC-ND 2.0

Image

Version1.0

TitleCC BY-NC-ND 1.0

Image

The source of the license. This attribute requires that attribution-state be set to true and that license attribute is set. If no value is given, an invalid value is given, or the license-src attribute is missing, with or without the license attribute being set and with the classcaption and attribution-statetrue having been set, by default, this attribute will be ignored.

All possible values include:
• URLs – the web address to be opened on click

#### by

The author of the media. This attribute requires that attribution-state be set to true. If no value is given or the by attribute is missing but classcaption and attribution-statetrue have been set, by default, this attribute will be ignored.

All possible values include:
• User Defined – the media's author

#### from

The website name of the site the media was retrieved from. This attribute requires that attribution-state be set to true. If no value is given or the from attribute is missing but classcaption and attribution-statetrue have been set, by default, this attribute will be ignored.

All possible values include:
• User Defined – the name of the website the media was retrieved from

#### from-src

The source the media was retrieved from. This attribute requires that attribution-state be set to true. If no value is given or the from-src attribute is missing but classcaption and attribution-statetrue have been set, by default, this attribute will be ignored.

All possible values include:

The copyright owner of the media. This attribute requires that attribution-state be set to true. If no value is given or the copyright-owner attribute is missing but classcaption and attribution-statetrue have been set, by default, this attribute will be ignored.

All possible values include:
• User Defined – the copyright owner of the media
Do note, it is not necessary to provide copyright information for any Creative Commons works or media in the Public Domain. Creative Commons works are universally understood by their respective licenses to be "Some rights reserved," with the reservation of rights outlined by the work's specific license. Thus, this reservation of some rights is already given to the person being attributed and adding copyright information is only redundant. On the other hand, Public Domain pieces are universally understood to be "No rights reserved," or free from copyright.

The copyright year of the media. This attribute requires that attribution-state be set to true. If no value is given or the copyright-year attribute is missing but classcaption and attribution-statetrue have been set, by default, this attribute will be ignored.

All possible values include:
• Year – formatted as YYYY with digits only
• Year Range – formatted as YYYY-YYYY with digits only separated by a single dash (-)

#### derivative

The derivative status of the media, used to indicate whether or not the media is a derivative. This can toggled to add a (derivative) suffix to the attribution. If no value is given, an invalid value is given, or the derivative attribute is missing but classcaption has been set, by default, this value will be set to false.

All possible values include:
• false – or the derivatives off or no to subtract the (derivative) suffix from the attribution
• true – or the derivatives on or yes to add the (derivative) suffix to the attribution
Affirming the derivative value with true, or any of its derivatives such as on or yes, is required when you wish to add the (derivative) suffix to your attribution. Setting the derivative attribute to a negative value when you wish to subtract the (derivative) suffix from your attribution is not required since this is the default behavior. However, setting the value of the derivative attribute to false, or any of its derivatives such as off or no, may be preferred for consistency and standardization.

## Subsection

subsection
In the below code samples, italicized markup represents user-defined values.
<subsection image="icon_image" fit="icon_size" shape="icon_shape" position="icon_position">
<h3>...</h3>
<sh3>...</sh3>
<subcontent>
...
</subcontent>
</subsection>

#### image

The source to an icon or other image.

All possible values include:
• Standard eCore Icons – see Icons section of the Template Guide for more details
• Absolute Paths – URLs
• Relative Paths – file directories

#### fit

The size of the image relative to its original size. By default, this value is set to 100% the original width if undeclared and an image is given.

All possible values include:
• Percentages – without a suffix, relative to the original width
• Percentages – with the suffix %w or w%, relative to the original width
• Percentages – with the suffix %h or h%, relative to the original height
• Width – 100% the original width
• Height – 100% the original height

#### shape

The shape of the image. By default, this value is set to circle if undeclared and an image is given.

All possible values include:
• circle
• square

#### position

The position of the image relative to the subsection. If undeclared, by default, this value is set to left and an image is given.

All possible values include:
• left – position the image at the top left of the subsection
• center – position the image at the top center of the subsection
• right – position the image at the top right of the subsection

## Boxes

boxes
In the below code samples, italicized markup represents user-defined values.
<boxes>
<box image="icon_image" fit="icon_size" shape="icon_shape" position="icon_position" align="horizontal_alignment">
<h4>...</h4>
<sh4>...</sh4>
...
</box>
</boxes>

#### image

The source to an icon or other image.

All possible values include:
• Standard eCore Icons – see Icons section of the Template Guide for more details
• Absolute Paths – URLs
• Relative Paths – file directories

#### fit

The size of the image relative to its original size. By default, this value is set to 100% the original width if undeclared and an image is given.

All possible values include:
• Percentages – without a suffix, relative to the original width
• Percentages – with the suffix %w or w%, relative to the original width
• Percentages – with the suffix %h or h%, relative to the original height
• Width – 100% the original width
• Height – 100% the original height

#### shape

The shape of the image. By default, this value is set to circle if undeclared and an image is given.

All possible values include:
• circle
• square

#### position

The position of the image relative to the box. By default, this value is set to center the image to the center of the box if undeclared and an image is given.

All possible values include:
• left – position the image at the top left of the box
• center – position the image at the top center of the box
• right – position the image at the top right of the box

#### align

The horizontal alignment of text inside the box. By default, this value is set to center the text inside the box if undeclared.

All possible values include:
• left
• center
• right
• justify
By default on page load, each box element is assigned a background color equal to the template's primary theme color and given 15% opacity. If you wish to prevent this default behavior, you can do so by adding the skipbg class to the box element's class attribute. However, this is only recommended if setting a custom background style on a box element. Additionally, a hover and focus effect is also added to each box element: When a box is moused over or in focus, the box's hue changes. To prevent this behavior on mouseover and focus, you can use the nohover class when and where desired.

## Grid

grid
In the below code samples, italicized markup represents user-defined values.
<grid width="grid_width" spacing="item_spacing">
<griditem width="item_width">...</griditem>
</grid>

#### grid width

The width of the grid area. By default, this value is set to 100% if undeclared.

All possible values include:
• Percentages – with the suffix %, relative to the grid width
• Pixels – with or without the suffix px
• Digits – without a suffix, interpreted as pixels (px)

#### griditem width

The width of the grid item. This value is required and must be set by the user. In other words, there is no default, and any undeclared values will cause the grid layout to break.

All possible values include:
• Percentages – with the suffix %, relative to the grid width
• Pixels – with or without the suffix px
• Digits – without a suffix, interpreted as pixels (px)

#### spacing

The space between grid items. By default, this value is set to 0 the original width if undeclared.

All possible values include:
• Percentages – with the suffix %, relative to the grid width
• Pixels – with or without the suffix px
• Digits – without a suffix, interpreted as pixels (px)

## Accordion

accordion
In the below code samples, italicized markup represents user-defined values.
<accordion>
<panel topic="panel_title">...</panel>
</accordion>

#### topic

A short phrase or keyword describing the panel's contents.

All possible values include:
• user-defined – the panel's visible text in its closed state

## Callout

callout
In the below code samples, italicized markup represents user-defined values.
<callout image="icon_image">
<memo>...</memo>
</callout>

#### image

The source to an icon or other image.

All possible values include:
• Standard eCore Icons – see Icons section of the Template Guide for more details
• Absolute Paths – URLs
• Relative Paths – file directories

## Table

table
In the below code samples, italicized markup represents user-defined values, and bolded markup represents custom attributes specific to the given element in the given context.
<table float="relative_position" lspace="left_spacing" rspace="right_spacing">
<caption>Description of table for accessibility...</caption>
<tbody>
<tr>
<th scope="col_or_row">Scope used for accessibility...</th>
<th scope="col_or_row">...</th>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>

#### float

The position of the media relative to any wrapped text. By default, this value is set to none.

All possible values include:
• left – position the media off-left with text wrapping to the right
• right – position the media off-right with text wrapping to the left
• center – position the media horizontally center
• sidebyside – position two or more medias next to one another
• none – position the media as normal without text wrapping
By default, the float attribute's sidebyside value will align two media elements side-by-side with no spacing between the two elements. For aligning more than two media elements side-by-side, you can use the float attribute in conjunction with the standard width attribute to achieve the desired results. For instance, setting width33% and floatsidebyside for three consecutive images will align all three images side-by-side. To learn how to apply spacing between or around floated media objects, see the next two sections below.

#### lspace

The left spacing to be added to the media. By default, this value is set to 20 when floatright or 0 otherwise.

All possible values include:
• Digits – without a suffix, representative of a pixel value
• Pixels – with the px suffix
• Percents – with the % suffix
When using spacing on media with floatsidebyside, it's important to make sure that all applied width, lspace, rspace attributes for the your series of floated objects always totals 100% or as close to 100% as possible. This will ensure that all floated objects in the series remain side-by-side.

#### rspace

The right spacing to be added to the media. By default, this value is set to 20 when floatleft or 0 otherwise.

All possible values include:
• Digits – without a suffix, representative of a pixel value
• Pixels – with the px suffix
• Percents – with the % suffix
When using spacing on media with floatsidebyside, it's important to make sure that all applied width, lspace, rspace attributes for the your series of floated objects always totals 100% or as close to 100% as possible. This will ensure that all floated objects in the series remain side-by-side.
While it's not recommended to use tables due to their incompatibility with mobile devices, when using tables, be sure to take into account users' needs, such as accessibility and printer-friendliness: For accessibility, use a caption immediately after the opening table tag to provide an explanation of the table and use the scope attribute on table headers (th) to clarify whether the header is for a column (col) or row (row). For printing, make use of the thead, tbody, and tfoot tags to indicate which header and/or footer rows, if any, should be repeated on each page of the printed document.

## Multimedia

multimedia
In the below code samples, italicized markup represents user-defined values.
<multimedia image="icon_image">
<description align="horizontal_alignment">...</description>
<media>...</media>
<transcript>...</transcript>
</multimedia>

#### image

The source to an icon or other image.

All possible values include:
• Standard eCore Icons – see Icons section of the Template Guide for more details
• Absolute Paths – URLs
• Relative Paths – file directories

#### align

The horizontal alignment of text inside the description. By default, this value is set to left align the text inside the description if undeclared.

All possible values include:
• left
• center
• right
• justify

## Transcript

transcript
In the below code samples, italicized markup represents user-defined values.
<transcript>
<trans>
<time>MM:SS</time>
<person>Speaker 1</person>
<noise>[Sound 1]</noise>
<span>Transcribed line 1...</span>
</trans>
<trans>
<time>MM:SS</time>
<person>Speaker 2</person>
<noise>[Sound 2]</noise>
<span>Transcribed line 2...</span>
</trans>
...
<trans>
<time>MM:SS</time>
<person>Speaker n</person>
<noise>[Sound n]</noise>
<span>Transcribed line n...</span>
</trans>
</transcript>

## Hoverable

hoverable
In the below code samples, italicized markup represents user-defined values.
<hoverable width="hoverable_width" itemwidth="item_width" itemshape="item_shape">
<hoveritem>
<background>...</background>
<content>
<showing align="horizontal_alignment" valign="vertical_alignment">...</showing>
<hiding align="horizontal_alignment" valign="vertical_alignment">...</hiding>
</content>
</hoveritem>
...
</hoverable>

#### width

The width of the hoverable area. By default, this value is set to 100% if undeclared.

All possible values include:
• Percentages – with the suffix %, relative to the container width

#### itemwidth

The width of the hover items. This value is not set by default and should be declared.

All possible values include:
• Percentages – with the suffix %, relative to the hoverable width

#### itemshape

The shape of the hover items. By default, this value is set to square if undeclared.

All possible values include:
• Square
• Rectangle
• Circle

#### align

The horizontal alignment of the text. By default, this value is set to center if undeclared.

All possible values include:
• Left – align the text to the left of the hover item
• Center – align the text to the center of the hover item
• Right – align the text to the right of the hover item

#### valign

The vertical alignment of the text. By default, this value is set to middle if undeclared.

All possible values include:
• Top – align the text to the top of the hover item
• Middle – align the text to the middle of the hover item
• Bottom – align the text to the bottom of the hover item