How to set and id, classes or other attributes to HTML elements?

Mandatory element attributes are given as OCaml named parameters to constructions function.

Optional element attributes are added using the optional OCaml parameter "?a" which is more or less available for every HTML5 elements. This parameter is taking a list of attributes compatible with the element.

div ~a:[a_class ["red";"shadow"];
        a_id "the_div";
        a_onclick {{ fun ev -> Dom_html.window##alert(Js.string "hello") }}]
    [txt "I'm a div with two classes to describe me (red and shadow), ";
     txt "an id to make me unique and an action when you click me."]

Id

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

The id attribute is mostly used to set a style in a style sheet for a particular element, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id. With Eliom client-server apps, you do usually not need to set ids manually for that purpose: just use injections (%v) to refer to a node v created on server side.

Attribute "id" is created by function a_id, taking the value of the attribute as parameter:

~a:[a_id "identifier"]

Classes

The class attribute specifies one or more classnames for an element.

The class attribute is mostly used to point to a class in a style sheet. However, it can also be used by a JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class.

An element can have several classes. Class attribute is generated by function a_class, that takes a list of strings.

~a:[a_class ["blue_button"; "small"]]

Style

The style attribute specifies an inline style for an element. The style attribute will override any style set globally, e.g. styles specified in the header of the page.

Using this attribute to stylish elements is not a good practice. You should rather use an external CSS file.

Its parameter is a string.

~a:[a_style "color: pink; padding: 10px;"]

Title

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

Its parameter is a string.

~a:[a_title "Lorem ipsum dolor sit amet."]

Events

Some attributes allow you to do something when the user do an action. They are many available actions since HTML5.

Its argument is an Eliom event handler, that is a client-side function taking the JS event as parameter:

~a:[a_onclick {{ fun ev -> Dom_html.window##alert(Js.string "hello") }}]

However, we recommend to use Js_of_ocaml_lwt.Lwt_js_events rather than these elements to set event handlers.

How to set and id, classes or other attributes to HTML elements?

Id

Classes

Style

Title

Events

Links