What is the difference between static and dynamic webpages?

Overview

Webpages differ in the way they display content and facilitate user interaction. There are two main types of web pages:

• Static
• Dynamic

Static webpages remain unchanged for every user. On the other hand, dynamic webpages support user interaction and may display different content for every user.

Static webpages

A static web page consists of fixed content and structure. It does not change according to a user's action, such as clicking a button. Hence, the webpage will be the same for every user.

Content included in a static web page includes the following:

• Images
• Audio and video
• Static forms

Static webpages are typically created using HTML, CSS, and JavaScript. They're stored on the web server. Any alteration to the page needs to be done manually by editing the HTML source code. The client first sends an HTTP request to the server. The server then replies with an HTTP response and the requested web page without any additional processing. The process is shown below:

Dynamic webpages

A dynamic webpage is less rigid in its structure and content. It supports user interaction, and the display may change accordingly.

Content included in a dynamic web page includes the following:

• Database
• Real-time data, such as weather forecast
• Chat applications

Dynamic webpages depend on both client-side and server-side programming, such as using HTML and CSS alongside JavaScript or PHP. While the final display page is still an HTML document, the server may introduce additional processing in response to the sent HTTP request. It does this by forwarding the HTTP request to an application program, which executes and produces an HTML output. The process is shown below:

Differences between static and dynamic web pages

Static and dynamic webpages each have their advantages and hence, can be used according to individual needs and goals. Some important differences are outlined in the table below: