HTML Helper¶
The HTML Helper file contains functions that assist in working with HTML.
Page Contents
Loading this Helper¶
This helper is loaded using the following code:
$this->load->helper('html');
The following functions are available:
br()¶
- br($count = 1)
Parameters: - $count (int) – Number of times to repeat the tag
Returns: string
Generates line break tags (<br />) based on the number you submit. Example:
echo br(3);
The above would produce: <br /><br /><br />
heading()¶
- heading($data = '', $h = '1', $attributes = '')
Parameters: - $data (string) – Content
- $h (string) – Heading level
- $attributes (array) – HTML attributes
Returns: string
Lets you create HTML heading tags. The first parameter will contain the data, the second the size of the heading. Example:
echo heading('Welcome!', 3);
The above would produce: <h3>Welcome!</h3>
Additionally, in order to add attributes to the heading tag such as HTML classes, ids or inline styles, a third parameter is available:
echo heading('Welcome!', 3, 'class="pink"')
The above code produces: <h3 class=”pink”>Welcome!<<h3>
img()¶
- img($src = '', $index_page = FALSE, $attributes = '')
Parameters: - $src (string) – Image source data
- $index_page (bool) – Whether to treat $src as a routed URI string
- $attributes (array) – HTML attributes
Returns: string
Lets you create HTML <img /> tags. The first parameter contains the image source. Example:
echo img('images/picture.jpg'); // gives <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['index_page'] added to the address it creates. Presumably, this would be if you were using a media controller:
echo img('images/picture.jpg', TRUE); // gives <img src="http://site.com/index.php/images/picture.jpg" alt="" />
Additionally, an associative array can be passed to the img() function for complete control over all attributes and values. If an alt attribute is not provided, CodeIgniter will generate an empty string.
Example:
$image_properties = array(
'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($image_properties);
// <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" />
link_tag()¶
- ling_tag($href = '', $rel = 'stylesheet', $type = 'text/css', $title = '', $media = '', $index_page = FALSE)¶
Parameters: - $href (string) – What are we linking to
- $rel (string) – Relation type
- $type (string) – Type of the related document
- $title (string) – Link title
- $media (string) – Media type
- $index_page (bool) – Whether to treat $src as a routed URI string
Returns: 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 index_page.
index_page is a boolean value that specifies if the href should have the page specified by $config['index_page'] added to the address it creates.
Example:
echo link_tag('css/mystyles.css');
// gives <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" />
Additionally, an associative array can be passed to the link() function for complete control over all attributes and values:
$link = array(
'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" />
nbs()¶
- nbs($num = 1)
Parameters: - $num (int) – Number of space entities to produce
Returns: string
Generates non-breaking spaces ( ) based on the number you submit. Example:
echo nbs(3);
The above would produce:
ul() and ol()¶
- ul($list, $attributes = '')¶
Parameters: - $list (array) – List entries
- $attributes (array) – HTML attributes
Returns: string
Permits you to generate ordered or unordered HTML lists from simple or multi-dimensional arrays. Example:
$list = array(
'red',
'blue',
'green',
'yellow'
);
$attributes = array(
'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 = array(
'class' => 'boldlist',
'id' => 'mylist'
);
$list = array(
'colors' => array(
'red',
'blue',
'green'
),
'shapes' => array(
'round',
'square',
'circles' => array(
'ellipse',
'oval',
'sphere'
)
),
'moods' => array(
'happy',
'upset' => array(
'defeated' => array(
'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: string
Identical to ul(), only it produces the <ol> tag for ordered lists instead of <ul>.
meta()¶
- meta($name = '', $content = '', $type = 'name', $newline = "n")
Parameters: - $name (string) – Meta name
- $content (string) – Meta content
- $type (string) – Meta type
- $newline (string) – Newline character
Returns: string
Helps you generate meta tags. You can pass strings to the function, or simple arrays, or multidimensional ones.
Examples:
echo meta('description', 'My Great site');
// Generates: <meta name="description" content="My Great Site" />
echo meta('Content-type', 'text/html; charset=utf-8', 'equiv');
// Note the third parameter. Can be "equiv" or "name"
// Generates: <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
echo meta(array('name' => 'robots', 'content' => 'no-cache'));
// Generates: <meta name="robots" content="no-cache" />
$meta = array(
array(
'name' => 'robots',
'content' => 'no-cache'
),
array(
'name' => 'description',
'content' => 'My Great Site'
),
array(
'name' => 'keywords',
'content' => 'love, passion, intrigue, deception'
),
array(
'name' => 'robots',
'content' => 'no-cache'
),
array(
'name' => 'Content-type',
'content' => 'text/html; charset=utf-8', 'type' => 'equiv'
)
);
echo meta($meta);
// Generates:
// <meta name="robots" content="no-cache" />
// <meta name="description" content="My Great Site" />
// <meta name="keywords" content="love, passion, intrigue, deception" />
// <meta name="robots" content="no-cache" />
// <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
doctype()¶
- doctype($type = 'xhtml1-strict')
Parameters: - $type (string) – Doctype name
Helps you generate document type declarations, or DTD’s. XHTML 1.0 Strict is used by default, but many doctypes are available.
Example:
echo doctype(); // <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
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 doctype choices. These are configurable, and pulled from application/config/doctypes.php
Doctype | Option | Result |
---|---|---|
XHTML 1.1 | doctype(‘xhtml11’) | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd“> |
XHTML 1.0 Strict | doctype(‘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 | doctype(‘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 | doctype(‘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 | doctype(‘xhtml-basic11’) | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML Basic 1.1//EN” “http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd“> |
HTML 5 | doctype(‘html5’) | <!DOCTYPE html> |
HTML 4 Strict | doctype(‘html4-strict’) | <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd“> |
HTML 4 Transitional | doctype(‘html4-trans’) | <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“> |
HTML 4 Frameset | doctype(‘html4-frame’) | <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd“> |
MathML 1.01 | doctype(‘mathml1’) | <!DOCTYPE math SYSTEM “http://www.w3.org/Math/DTD/mathml1/mathml.dtd“> |
MathML 2.0 | doctype(‘mathml2’) | <!DOCTYPE math PUBLIC “-//W3C//DTD MathML 2.0//EN” “http://www.w3.org/Math/DTD/mathml2/mathml2.dtd“> |
SVG 1.0 | doctype(‘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 | doctype(‘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 | doctype(‘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 | doctype(‘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) | doctype(‘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) | doctype(‘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 | doctype(‘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 | doctype(‘xhtml-rdfa-2’) | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML+RDFa 1.1//EN” “http://www.w3.org/MarkUp/DTD/xhtml-rdfa-2.dtd“> |