The goal of Page Fragments is to take a mock-up design and realize it on a web page as accurately as possible. To do this, developers are given a space where they have a “blank slate.” You have three tools at your disposal to accomplish this:
HTML: The markup of the fragment. Fragments use standard HTML with special tags to add dynamic behavior.
CSS: CSS styles and positions the fragment’s markup.
JavaScript: JavaScript provides dynamic behavior to the fragment.
The HTML, CSS, and JavaScript are all completely standard, just like anywhere else on the web, but are also enhanced with Liferay-specific features. You can specify text and images as editable, as well as providing for “rich text”: that is, text with additional formatting. Liferay portlets can also be embedded in Fragments as “widgets,” making pages with Fragments more dynamic than regular web content.