HTML Helper

The HTML Helper file contains functions that assist in working withHTML.

• Loading this Helper
• Available Functions

Loading this Helper

This helper is loaded using the following code:

helper('html');

Available Functions

The following functions are available:

• img([$src = ''[, $indexPage = false[, $attributes = '']]])

Parameters:

• $src (mixed) – Image source data
• $indexPage (bool) – Whether to treat $src as a routed URI string
• $attributes (mixed) – HTML attributesReturns:HTML image tagReturn type:string

Lets you create HTML tags. The first parameter contains theimage source. Example:

echo img('images/picture.jpg');
// <img src="http://site.com/images/picture.jpg" />

There is an optional second parameter that is a true/false value thatspecifics if the src should have the page specified by$config['indexPage'] added to the address it creates.Presumably, this would be if you were using a media controller:

echo img('images/picture.jpg', true);
// <img src="http://site.com/index.php/images/picture.jpg" alt="" />

Additionally, an associative array can be passed as the first parameter,for complete control over all attributes and values. If an alt attributeis not provided, CodeIgniter will generate an empty string.

Example:

$imageProperties = [
    'src'    => 'images/picture.jpg',
    'alt'    => 'Me, demonstrating how to eat 4 slices of pizza at one time',
    'class'  => 'post_images',
    'width'  => '200',
    'height' => '200',
    'title'  => 'That was quite a night',
    'rel'    => 'lightbox'
];
 
img($imageProperties);
// <img src="http://site.com/index.php/images/picture.jpg" alt="Me, demonstrating how to eat 4 slices of pizza at one time" class="post_images" width="200" height="200" title="That was quite a night" rel="lightbox" />

• linktag([$href = ''[, $rel = 'stylesheet'[, $type = 'text/css'[, $title = ''[, $media = ''[, $indexPage = false_]]]]]])

Parameters:

• $href (string) – The source of the link file
• $rel (string) – Relation type
• $type (string) – Type of the related document
• $title (string) – Link title
• $media (string) – Media type
• $indexPage (bool) – Whether to treat $src as a routed URI stringReturns:HTML link tagReturn type:string

Lets you create HTML tags. This is useful for stylesheet links,as well as other links. The parameters are href, with optional rel,type, title, media and indexPage.

indexPage is a boolean value that specifies if the href should havethe page specified by $config['indexPage'] added to the address it creates.

Example:

echo link_tag('css/mystyles.css');
// <link href="http://site.com/css/mystyles.css" rel="stylesheet" type="text/css" />

Further examples:

echo link_tag('favicon.ico', 'shortcut icon', 'image/ico');
// <link href="http://site.com/favicon.ico" rel="shortcut icon" type="image/ico" />
 
echo link_tag('feed', 'alternate', 'application/rss+xml', 'My RSS Feed');
// <link href="http://site.com/feed" rel="alternate" type="application/rss+xml" title="My RSS Feed" />

Alternately, an associative array can be passed to the link_tag() functionfor complete control over all attributes and values:

$link = [
    'href'  => 'css/printer.css',
    'rel'   => 'stylesheet',
    'type'  => 'text/css',
    'media' => 'print'
];
 
echo link_tag($link);
// <link href="http://site.com/css/printer.css" rel="stylesheet" type="text/css" media="print" />

• scripttag([$src = ''[, $indexPage = false_]])

Parameters:

• $src (mixed) – The source name of a JavaScript file
• $indexPage (bool) – Whether to treat $src as a routed URI stringReturns:HTML script tagReturn type:string

Lets you create HTML tags. The parameters is src, with optional indexPage.

indexPage is a boolean value that specifies if the src should havethe page specified by $config['indexPage'] added to the address it creates.

Example:

echo script_tag('js/mystyles.js');
// <script src="http://site.com/js/mystyles.js" type="text/javascript"></script>

Alternately, an associative array can be passed to the script_tag() functionfor complete control over all attributes and values:

$script = ['src'  => 'js/printer.js'];
 
echo script_tag($script);
// <script src="http://site.com/js/printer.js" type="text/javascript"></script>

• ul($list[, $attributes = ''])

Parameters:

• $list (array) – List entries
• $attributes (array) – HTML attributesReturns:HTML-formatted unordered listReturn type:string

Permits you to generate unordered HTML lists from simple ormulti-dimensional arrays. Example:

$list = [
    'red',
    'blue',
    'green',
    'yellow'
];
 
$attributes = [
    'class' => 'boldlist',
    'id'    => 'mylist'
];
 
echo ul($list, $attributes);

The above code will produce this:

<ul class="boldlist" id="mylist">
    <li>red</li>
    <li>blue</li>
    <li>green</li>
    <li>yellow</li>
</ul>

Here is a more complex example, using a multi-dimensional array:

$attributes = [
    'class' => 'boldlist',
    'id'    => 'mylist'
];
 
$list = [
    'colors' => [
        'red',
        'blue',
        'green'
    ],
    'shapes' => [
        'round',
        'square',
        'circles' => [
            'ellipse',
            'oval',
            'sphere'
        ]
    ],
    'moods'  => [
        'happy',
        'upset'   => [
            'defeated' => [
                'dejected',
                'disheartened',
                'depressed'
            ],
            'annoyed',
            'cross',
            'angry'
        ]
    ]
];
 
echo ul($list, $attributes);

The above code will produce this:

<ul class="boldlist" id="mylist">
    <li>colors
        <ul>
            <li>red</li>
            <li>blue</li>
            <li>green</li>
        </ul>
    </li>
    <li>shapes
        <ul>
            <li>round</li>
            <li>suare</li>
            <li>circles
                <ul>
                    <li>elipse</li>
                    <li>oval</li>
                    <li>sphere</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>moods
        <ul>
            <li>happy</li>
            <li>upset
                <ul>
                    <li>defeated
                        <ul>
                            <li>dejected</li>
                            <li>disheartened</li>
                            <li>depressed</li>
                        </ul>
                    </li>
                    <li>annoyed</li>
                    <li>cross</li>
                    <li>angry</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

• ol($list, $attributes = '')

Parameters:

• $list (array) – List entries
• $attributes (array) – HTML attributesReturns:HTML-formatted ordered listReturn type:string

Identical to ul(), only it produces the

tag forordered lists instead of
.

• video($src[, $unsupportedMessage = ''[, $attributes = ''[, $tracks = [][, $indexPage = false]]]])

Parameters:

• $src (mixed) – Either a source string or an array of sources. See source() function
• $unsupportedMessage (string) – The message to display if the media tag is not supported by the browser
• $attributes (string) – HTML attributes
• $tracks (array) – Use the track function inside an array. See track() function
• $indexPage (bool) – Returns:HTML-formatted video elementReturn type:string

Permits you to generate HTML video element from simple orsource arrays. Example:

$tracks =
[
    track('subtitles_no.vtt', 'subtitles', 'no', 'Norwegian No'),
    track('subtitles_yes.vtt', 'subtitles', 'yes', 'Norwegian Yes')
];
 
echo video('test.mp4', 'Your browser does not support the video tag.', 'controls');
 
echo video
(
    'http://www.codeigniter.com/test.mp4',
    'Your browser does not support the video tag.',
    'controls',
    $tracks
);
 
echo video
(
    [
      source('movie.mp4', 'video/mp4', 'class="test"'),
      source('movie.ogg', 'video/ogg'),
      source('movie.mov', 'video/quicktime'),
      source('movie.ogv', 'video/ogv; codecs=dirac, speex')
    ],
    'Your browser does not support the video tag.',
    'class="test" controls',
    $tracks
 );

The above code will produce this:

<video src="test.mp4" controls>
  Your browser does not support the video tag.
</video>
 
<video src="http://www.codeigniter.com/test.mp4" controls>
  <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian No" />
  <track src="subtitles_yes.vtt" kind="subtitles" srclang="yes" label="Norwegian Yes" />
  Your browser does not support the video tag.
</video>
 
<video class="test" controls>
  <source src="movie.mp4" type="video/mp4" class="test" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mov" type="video/quicktime" />
  <source src="movie.ogv" type="video/ogv; codecs=dirac, speex" />
  <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian No" />
  <track src="subtitles_yes.vtt" kind="subtitles" srclang="yes" label="Norwegian Yes" />
  Your browser does not support the video tag.
</video>

• audio($src[, $unsupportedMessage = ''[, $attributes = ''[, $tracks = [][, $indexPage = false]]]])

Parameters:

• $src (mixed) – Either a source string or an array of sources. See source() function
• $unsupportedMessage (string) – The message to display if the media tag is not supported by the browser
• $attributes (string) –
• $tracks (array) – Use the track function inside an array. See track() function
• $indexPage (bool) – Returns:HTML-formatted audio elementReturn type:string

Identical to video(), only it produces the

• source($src = ''[, $type = false[, $attributes = '']])

Parameters:

• $src (string) – The path of the media resource
• $type (bool) – The MIME-type of the resource with optional codecs parameters
• $attributes (array) – HTML attributesReturns:HTML source tagReturn type:string

Lets you create HTML tags. The first parameter contains thesource source. Example:

echo source('movie.mp4', 'video/mp4', 'class="test"');
// <source src="movie.mp4" type="video/mp4" class="test" />

• embed($src = ''[, $type = false[, $attributes = ''[, $indexPage = false]]])

Parameters:

• $src (string) – The path of the resource to embed
• $type (bool) – MIME-type
• $attributes (array) – HTML attributes
• $indexPage (bool) – Returns:HTML embed tagReturn type:string

Lets you create HTML tags. The first parameter contains theembed source. Example:

echo embed('movie.mov', 'video/quicktime', 'class="test"');
// <embed src="movie.mov" type="video/quicktime" class="test"/>

• object($data = ''[, $type = false[, $attributes = '']])

Parameters:

• $data (string) – A resource URL
• $type (bool) – Content-type of the resource
• $attributes (array) – HTML attributes
• $params (array) – Use the param function inside an array. See param() functionReturns:HTML object tagReturn type:string

Lets you create HTML

• param($name = ''[, $type = false[, $attributes = '']])

Parameters:

• $name (string) – The name of the parameter
• $value (string) – The value of the parameter
• $attributes (array) – HTML attributesReturns:HTML param tagReturn type:string

Lets you create HTML tags. The first parameter contains theparam source. Example:

echo param('movie.mov', 'video/quicktime', 'class="test"');
// <param src="movie.mov" type="video/quicktime" class="test"/>

• track($name = ''[, $type = false[, $attributes = '']])

Parameters:

• $name (string) – The name of the parameter
• $value (string) – The value of the parameter
• $attributes (array) – HTML attributesReturns:HTML track tagReturn type:string

Generates a track element to specify timed tracks. The tracks areformatted in WebVTT format. Example:

echo track('subtitles_no.vtt', 'subtitles', 'no', 'Norwegian No');
// <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian No" />

• doctype([$type = 'html5'])

Parameters:

• $type (string) – Doctype nameReturns:HTML DocType tagReturn type:string

Helps you generate document type declarations, or DTD’s. HTML 5is used by default, but many doctypes are available.

Example:

echo doctype();
// <!DOCTYPE html>

echo doctype('html4-trans');
// <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

The following is a list of the pre-defined doctype choices. These are configurable,pulled from application/Config/DocTypes.php, or they could be over-ridden in your .env configuration.

Document typeOptionResultXHTML 1.1xhtml11XHTML 1.0 Strictxhtml1-strictXHTML 1.0 Transitionalxhtml1-transXHTML 1.0 Framesetxhtml1-frameXHTML Basic 1.1xhtml-basic11HTML 5html5HTML 4 Stricthtml4-strictHTML 4 Transitionalhtml4-transHTML 4 Framesethtml4-frameMathML 1.01mathml1MathML 2.0mathml2SVG 1.0svg10SVG 1.1 Fullsvg11SVG 1.1 Basicsvg11-basicSVG 1.1 Tinysvg11-tinyXHTML+MathML+SVG (XHTML host)xhtml-math-svg-xhXHTML+MathML+SVG (SVG host)xhtml-math-svg-shXHTML+RDFa 1.0xhtml-rdfa-1XHTML+RDFa 1.1xhtml-rdfa-2