W3cubDocs

/CodeIgniter 4

HTML Helper

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

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 attributes
Returns:

HTML image tag
Return type:

string

Lets you create HTML <img /> tags. The first parameter contains the image 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 that specifics 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 attribute is 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" />
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 string
  • $hreflang (string) – Hreflang type
Returns:

HTML link tag
Return type:

string

Lets you create HTML <link /> 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 have the 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() function for 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" />
script_tag([$src = ''[, $indexPage = false]])
Parameters:
  • $src (mixed) – The source name of a JavaScript file
  • $indexPage (bool) – Whether to treat $src as a routed URI string
Returns:

HTML script tag
Return type:

string

Lets you create HTML <script></script> tags. The parameters is src, with optional indexPage.

indexPage is a boolean value that specifies if the src should have the 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() function for 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 attributes
Returns:

HTML-formatted unordered list
Return type:

string

Permits you to generate unordered HTML lists from simple or multi-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 attributes
Returns:

HTML-formatted ordered list
Return type:

string

Identical to ul(), only it produces the <ol> tag for ordered lists instead of <ul>.

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 element
Return type:

string

Permits you to generate HTML video element from simple or source 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 element
Return type:

string

Identical to video(), only it produces the <audio> tag instead of <video>.

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 attributes
Returns:

HTML source tag
Return type:

string

Lets you create HTML <source /> tags. The first parameter contains the source 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 tag
Return type:

string

Lets you create HTML <embed /> tags. The first parameter contains the embed 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() function
Returns:

HTML object tag
Return type:

string

Lets you create HTML <object /> tags. The first parameter contains the object data. Example:

echo object('movie.swf', 'application/x-shockwave-flash', 'class="test"');

echo object
(
    'movie.swf',
    'application/x-shockwave-flash',
    'class="test"',
    [
        param('foo', 'bar', 'ref', 'class="test"'),
        param('hello', 'world', 'ref', 'class="test"')
    ]
);

The above code will produce this:

<object data="movie.swf" class="test"></object>

<object data="movie.swf" class="test">
  <param name="foo" type="ref" value="bar" class="test" />
  <param name="hello" type="ref" value="world" class="test" />
</object>
param($name = ''[, $type = false[, $attributes = '']])
Parameters:
  • $name (string) – The name of the parameter
  • $value (string) – The value of the parameter
  • $attributes (array) – HTML attributes
Returns:

HTML param tag
Return type:

string

Lets you create HTML <param /> tags. The first parameter contains the param 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 attributes
Returns:

HTML track tag
Return type:

string

Generates a track element to specify timed tracks. The tracks are formatted 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 name
Returns:

HTML DocType tag
Return type:

string

Helps you generate document type declarations, or DTD’s. HTML 5 is 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 type Option Result
XHTML 1.1 xhtml11 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
XHTML 1.0 Strict xhtml1-strict <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
XHTML 1.0 Transitional xhtml1-trans <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
XHTML 1.0 Frameset xhtml1-frame <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
XHTML Basic 1.1 xhtml-basic11 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML Basic 1.1//EN” “http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd”>
HTML 5 html5 <!DOCTYPE html>
HTML 4 Strict html4-strict <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
HTML 4 Transitional html4-trans <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
HTML 4 Frameset html4-frame <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
MathML 1.01 mathml1 <!DOCTYPE math SYSTEM “http://www.w3.org/Math/DTD/mathml1/mathml.dtd”>
MathML 2.0 mathml2 <!DOCTYPE math PUBLIC “-//W3C//DTD MathML 2.0//EN” “http://www.w3.org/Math/DTD/mathml2/mathml2.dtd”>
SVG 1.0 svg10 <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN” “http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd”>
SVG 1.1 Full svg11 <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
SVG 1.1 Basic svg11-basic <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1 Basic//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd”>
SVG 1.1 Tiny svg11-tiny <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1 Tiny//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd”>
XHTML+MathML+SVG (XHTML host) xhtml-math-svg-xh <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN” “http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd”>
XHTML+MathML+SVG (SVG host) xhtml-math-svg-sh <!DOCTYPE svg:svg PUBLIC “-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN” “http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd”>
XHTML+RDFa 1.0 xhtml-rdfa-1 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML+RDFa 1.0//EN” “http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd”>
XHTML+RDFa 1.1 xhtml-rdfa-2 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML+RDFa 1.1//EN” “http://www.w3.org/MarkUp/DTD/xhtml-rdfa-2.dtd”>

© 2014–2020 British Columbia Institute of Technology
Licensed under the MIT License.
https://codeigniter.com/userguide4/helpers/html_helper.html