A web user interface can be decomposed into three parts:
- structure, what are the contents and how they are organized;
- presentation, how the contents should be displayed;
- behavior, how the contents change based on user’s actions.
The separated organization has the following benefits:
- It makes the code portable/reusable across different browsers.
- It makes the web site (both content and code) easy to maintain.
The basic process of developing a web page has the following steps:
- Markup the content with HTML based on the semantics. Identify the title, headings, sections, paragraphs, tables, lists, figures, etc.
- Add CSS styles to enhance the presentation. Design a consistent and reusable style for different components of the web page.