The Web is one of the places where the ideas of information design are practiced most systematically. How are web pages represented, and what design techniques do they use? In this lesson, we will learn the basics of representing information on the Web, focusing on the division of roles between HTML and CSS.
How Web Pages Work
Web pages are written in a language called HTML (HyperText Markup Language). HTML gives each part of a document a meaning (structure), such as "this is a heading," "this is a paragraph," or "this is a link." For example, the h1 tag represents the highest-level heading, the p tag represents a paragraph, and the a tag represents a hyperlink. The system by which web pages are connected to one another by links is called hypertext, and it is the foundation of the World Wide Web. A page's location is indicated by its URL, and a browser receives HTML from a web server and displays it.
Separating Structure and Appearance — HTML and CSS
Appearance (design), such as text color, size, and placement, is specified not by HTML but by CSS (Cascading Style Sheets). The division of roles "structure is HTML, appearance is CSS" (separating structure and presentation) has major advantages. ① The design of an entire site can be unified or changed by replacing one CSS file; ② the same HTML can be displayed differently according to screen size, such as on a computer or smartphone (responsive design); ③ clearly structured HTML is correctly interpreted by screen readers and search engines, improving accessibility.
Information Design for Websites
On websites consisting of multiple pages, the "structuring" learned in the previous lesson becomes useful. The entire site is usually designed as a hierarchical structure with the home page at the top. Navigation (menus) and breadcrumbs (for example, Home > Product Information > Details) help users understand "where they are now" and "where they can go." A visual clue that communicates "how something can be operated," such as making something that looks like a button clickable or making blue underlined text a link, is called a signifier. Designs that follow conventions help first-time users operate a site intuitively (the UD principle of "simple and intuitive use").
Steps for Designing Information Communication
When communicating information on the Web, proceed through the following steps: ① determine the purpose and audience (who needs to know what); ② collect, organize, and structure information (create a sitemap); ③ design the page layout (create a placement diagram called a wireframe); ④ produce it; ⑤ after publication, observe users' responses and improve it. The process does not end when the site is made; repeatedly evaluating and improving it is the same as the problem-solving process learned in Unit 1.
- HTML = document structure (meaning); CSS = appearance. Dividing these roles is the principle.
- Advantages of separation: unified design changes, responsive support, and improved accessibility.
- Hypertext (documents connected by links) is the foundation of the Web.
- Design sites hierarchically, and show the current location with navigation and breadcrumbs.
- Signifier = a clue to operation. Following conventions makes a site more intuitive.
- Communication follows the steps "clarify purpose and audience → structure → layout → production → evaluation and improvement."
Practice Questions
- Explain the difference between the roles of HTML and CSS.
- Give at least two advantages gained by separating structure and appearance.
- What is a breadcrumb trail? Explain it together with its benefits for users.
- If links on a web page are plain black text with neither underlining nor a color change, what problem may occur? Explain using the word "signifier."
Answers and Explanations
- Answer: HTML is a language that gives meaning (structure) to parts of a document, such as headings, paragraphs, and links. CSS is a language that specifies the appearance (design) of a page, such as text color, size, and placement.
Explanation: The core answer is "HTML for structure, CSS for appearance." The modern principle is not to build the appearance into HTML. - Answer: (Examples) ① The design of an entire site can be changed or unified at once simply by replacing or modifying the CSS file. ② The display can switch according to screen size, such as on a computer or smartphone, while keeping the same HTML (responsive design). ③ Because the structure is clear, screen readers and search engines can correctly interpret the content, improving accessibility.
Explanation: Any two of the three are correct. The common principle is that meaning and appearance can be changed independently. - Answer: A breadcrumb trail is a display such as "Home > Product Information > Details" that shows where the current page is located within the site's hierarchical structure. Users can understand where they are and return to a higher level, making it less likely that they will get lost.
Explanation: The name comes from the fairy tale "Hansel and Gretel," in which breadcrumbs were dropped to show the way home. The two benefits are understanding one's current location and moving to a higher level. - Answer: Underlining and color changes function as signifiers that tell users "this can be clicked (it is a link)." Removing them makes it difficult for users to know which text is a link or realize that it can be clicked, so they may be unable to reach necessary information.
Explanation: A signifier is a visual clue that communicates operability. Understanding that breaking conventions such as "blue underlined text = link" creates a learning cost is sufficient.