Design elements are the building blocks of visual design, and the principles of design are like the instructions for using these elements to build a coherent visual design that can be perceived as a unified entity, irrespective of whether the design is of an art piece on canvas or screen. The principles of design are largely derived from the observed compulsion of the brain to seek meaning to any visual stimulus, even something as relatively small and seeming insignificant as a point or dot on a blank page. Similarly, if there is more than one point, the brain instinctively tries to connect the points to derive some meaning. The compulsion to connect parts in this manner is known as grouping, or the gestalt effect, and it is how we make out shapes in a seemingly chaotic world. It is also what makes it possible, for example, to convey the essence of a shape with the use of only a few strategically placed lines or dots instead of many.
The gestalt effect (or gestalt) is a central principle of the gestalt theory (developed in the 1920s in Germany), which when translated in relation to a design roughly maintains that the perception that is formed of a design due to the grouping of its elements is distinct from any meaning that can be derived from any of the design’s individual elements alone, and only exists when a design is whole (or unified). The implication of this is that the gestalt effect, in essence, is something that exists only in an individual’s mind and unquantifiable.
The theory also attempts to describe some laws (or principles) that the brain uses to group parts into a unified whole, whether these are basic elements of design like points and lines, or complex elements formed from these basic elements. These principles inform on how best to use and organize the elements of a design to improve the chances of producing the gestalt effect. They are discussed in this section, but the roles of the basic elements of design are discussed first.
1. Basic Elements of Design
The most common fundamental elements of design include point, line, shape, form, space, color, value, and texture. They are abstract, in that singly they seldom represent anything meaningful other than the perception of their shapes. However, they can be useful for performing various diverse functions in design and have application in Web design. This section shows examples of how they can be used.
1.1. Point
A point or a dot is a design element with a position but no extension. Although using it alone may provide little meaning but perhaps intrigue, it is often when different types of points are grouped that they can become very useful in creating a design. For example, they can be used to imply shapes, forms, and patterns, as well as direct attention. Image “A” in Figure 23.1 shows examples of how points can be used to create shapes. The point at the top left, in theory, should attract attention because it is relatively isolated. The point in “B” shows a point that is also being used to attract attention. In theory, it should attract attention because it is surrounded by angular shapes and of a significantly different color.
1.2. Line
Lines are one of the most basic, versatile, and commonly used elements of design, in that they are easy to produce, can be in many forms (e.g., straight, curved, and irregular), and used in the composition of almost any complex design. As a result they have many different functions in design, such as the following, which might give you some ideas:
- Organizing, separating, and connecting objects: Lines can be used to organize, separate, and link elements to indicate order. Figure 23.2 shows some illustrations.
- Creating textures or patterns: Figure 23.3 shows some simple patterns and textures. Textures or patterns may be used, for example, as background or bars in very subdued colors that do not interfere with the perception of foreground elements. Recall from Chapter 16 that patterns can be produced using CSS gradient properties.
- Guiding the eyes to a point of focus: An actual or implied line can be used to lead the eyes to a feature in a design or an image that may otherwise be missed, especially in content presentation, as demonstrated in Figure 23.4.
- Suggesting movement: Oblique lines can be used to suggest movement or dynamism. Figure 23.5 gives an illustration.
- Conveying specific feelings or moods: The direction and orientation of a line can be used to imply certain feelings. For example, horizontal lines (as in shoreline) is believed to project rest, calmness, stability, openness, and quietude; vertical lines (as in pillars) can suggest power, strength, formality, height, dignity, restriction, and sometimes potential movement; diagonal lines (as in a slope) can suggest vitality, dynamism, and agitation; curved lines (as in human body) can suggest grace, beauty, elegance, movement, and sensuality; sharp jagged lines (as in cracked glass) can suggest violence or destruction; and broken lines (as in gaps) can suggest discontinuity. Using these different types of lines in an abstract design, for example, can help communicate specific feelings or moods. Figure 23.6 shows some illustrations. When lines are used to convey moods in Web design, they would usually be used in background image.
- Providing emphasis: Underlining words in text gives them emphasis. Figure 23.7 shows the words “basic” and “versatile” emphasized.
- Defining shapes: Lines are central to the creation of shapes, although shapes can also be created without lines. The types of shapes or designs that lines are used to create include logos and background graphics. Figure 23.8 shows some illustrations of the different roles lines play in creating shape.
- Decorating designs: Lines can be used for beautifying a page or creating effects in various forms, including dashed and dotted lines. Figure 23.9 shows some examples. In the left design, lines are used to beautify the heading as well as depict shadows just by varying width and color. In the right design, lines are used for the hanging bar, the chains, the logo, and to border the page content.
1.3. Shapes
A shape (flat figure) within the context of design elements is basically an enclosed space created as a result of the meeting of actual or implied lines. The three basic categories of shapes used in design are geometric, natural, and abstract. Geometric shapes are structured and include rectangles, circles, triangles, and polygons. Natural shapes (or organic shapes) primarily describe shapes that exist in nature, such as those of leaves. They can also be manmade; an ink blob, for example, is a natural shape. Natural shapes are typically irregular and/ or fluid at the edges. Abstract shapes describe approximated or stylized versions of natural shapes. Symbols on signs, such as the shape of a man or a woman used to identify toilets, fall under abstract shapes. Figure 23.10 shows examples of these different types of shapes.
Traditionally, geometric shapes, particularly those with straight vertical and horizontal lines, are more commonly used in screen designs than other types. This is mainly because squarish shapes tend to allow optimal use of space and facilitate the organization of elements. However, more rounded organic shapes do find applications in some types of websites, particularly in less formal websites, such as games and children’s websites. Figure 23.11 shows some illustrations.
1.4. Size/Scale
Visual size and scale exist together and are similar, but different. Whereas size describes the actual or usual physical dimensions of an element, scale describes the size of an element in relation to other things, including its actual physical size. Scale, in essence, is relative. Size and scale can be used to accomplish many goals in design, such as to emphasize the most important element, attract attention, create hierarchy (i.e., order of importance), create perspective, organize elements, contrast two elements (e.g., adding small text to a large element), and create interest and variety. Giving the right sizes to different elements of a design, such as sidebar, header, and the main content area, creates scale, which if right contributes to the achievement of the gestalt effect. Figure 23.12 shows the example of size and scale in use.
1.5. Space
Space is the area on a page and there are two types from the point of view of design: negative and positive. Negative space is empty space and what a design would normally start with. Positive space is the space that contains an object. The ratio between the two is important in design. For example, a lot of negative space can make an object more conspicuous while too little can make a design appear cluttered and unattractive. Figure 23.13 illustrates negative and positive space.
Figure 23.14 shows how the ratio of negative and positive space can affect the look and feel of a design. Notice how more airy the one on the left is. With a little imagination, it is possible to see how a screen that looks like it would be more aesthetically appealing. Positive space is sometimes also referred to as positive shape and negative space as negative shape.
The other use of space in design is in depicting the illusion of depth. The main techniques used to achieve this include diminishing size and vertical position, overlapping, diminishing details, and linear perspective. Figure 23.15 shows some basic examples.
Image A in the figure demonstrates the notions that the farther away objects are, the smaller they become and also that objects that are smaller and higher on the screen tend to be perceived to be farther away than those that are lower and bigger. Image B demonstrates that when an object is partially blocked by another, it gives the sense it is farther back than the one blocking it. Image C demonstrates that as objects move farther away, their details, such as color and value (i.e., tone), become less distinct both in relation to other objects and the background, making us perceive objects that are clear as being closer relative to those that are faded or indistinct. Image D shows that all lines will eventually come together at a point on the horizon (called the vanishing point) that is farther away. The technique is used to create a focal point in a design, where the most important object is placed. The lines used would usually be implied, using, for example, objects’ alignment. Notice how in the illustration the eyes always seem to be led to the center back of the design by the lines. Any combination of A, B, C, and D can be used to produce an even stronger illusion of depth. Figure 23.16 shows an example of how overlapping is often used in a Web page to create the illusion of depth.
1.6. Hue and Value
Value, as mentioned under the HSL (or HSV) color model in Chapter 9, refers to the relative level of lightness or darkness of a color. The lightest color has the highest value, while the darkest the lowest. So, light colors are sometimes called high-value (or high- key) colors, while dark ones low- value (or low-key) colors. Value is an important element in design and can be used to communicate various visual messages. Gradation in value, for example, can be used to create the illusion of depth, as should be evident in the use of CSS gradient properties in Chapter 16. Figure 23.17 illustrates this with two circles, one filed with plain color and the other with gradient.
Different values can also be used to create contrast. The farther apart the values are, the more pronounced the contrast produced. Contrast is especially useful for creating emphasis and attracting attention. For example, a light figure on a dark background is automatically emphasized, and vice versa. Figure 23.18 shows a design with different-value elements. The color of the button and the angular bar at top-left is red and that of the larger rectangle, which is light pink, was derived from adding high value to the red.
Another important role of value in design is its use in creating mood. In theory, lower values produce designs that are often described as somber and quiet designs, while higher values produce lighter, happier, more vibrant, more cheerful, or more playful ones.
1.7. Texture
Texture refers to the surface quality of an object. It is both visual and tactile. However, it is the visual dimension that is so far typically applicable in Web design. It can be described in various ways, including soft, rough, smooth, wavy, and patterned. When using texture in a design, the aim is to match it to the theme of the design. For example, a design about fashion might use the texture of fiber. It is important, of course, that a texture does not overpower the foreground elements. For example, overpowering text can compromise legibility. Figure 23.19 shows some textures as well as demonstrates the effects of overpowering textures. Notice how overpowering the textures are in the left illustration and how after they have been toned down the text is more legible in the right image. A better design also seems to have been produced.
2. Principles of Design
Any component of a design that can be separated and defined on its own is an element of the design; and the basic elements of design, such as dots and lines, can be organized to create a design that produces the gestalt effect that communicates a meaningful cohesive visual message. The principles described by Gestalt theory for achieving this effect are mainly balance, emphasis, rhythm, proportion, and unity.
2.1. Balance
Balance in visual design relates to the concept of visual equilibrium and refers to the way elements are distributed across a design and the perception of whether the design is visually balanced or lopsided around the pivot point of the design. Within the principle, every area of a design carries a virtual weight in terms of lightness or heaviness. For example, lighter colors appear lighter in weight than darker colors, neutral colors appear lighter than vivid colors, and transparent areas appear lighter in weight than opaque areas. One way to view a design when addressing balance is in terms of a set of scales or see-saw. Using the see-saw analogy, it can be imagined that a page is laid flat and balanced on a fulcrum and the various elements represent weights, as illustrated in Figure 23.20. The general idea is that a page is balanced if the total of the visual weights on one side of the fulcrum roughly balances out the total on the other side. This naturally takes into consideration the distance of each element from the fulcrum, just like with a see-saw. There are two main types of visual balance: symmetrical balance and asymmetrical balance.
Symmetrical balance (also known as formal balance) is when visual weight is equally distributed on either side of the central vertical axis of a design. It is achieved in two ways: pure symmetry and approximate symmetry. In pure symmetry, identical parts are distributed on either side of the central axis of a design. The design produced can be monotonous and uninteresting. In any case, this type of balance seldom lends itself to too many practical applications, as it is seldom possible to distribute elements identically about the vertical axis of a design. In approximate symmetry, the elements in the two halves of a design are varied but still similar. Ways in which this is done include varying value, texture, and shape. Designs that are balanced in this way are often more appealing and interesting. Figure 23.21 shows an illustration each of pure and approximate symmetry.
In contrast to symmetrical balance, asymmetrical balance (also known as informal balance) occurs when both sides of the central axis of a design are not identical but appear to have the same visual weight. This usually happens when several smaller elements on one side of the axis are balanced by a larger one on the other side, or smaller elements are positioned farther away from the center of the screen than a larger one. Figure 23.22 shows some examples.
Other types of balance that are not as commonly considered but might apply to a design are vertical and radial. Vertical balance is essentially balancing the visual weight on either side of the central horizontal axis (i.e., balancing the top part against bottom). Typically, the bottom would be visually heavier than the top. Radial balance is when elements are organized around the center of a design at equal distances. Figure 23.23 shows an example.
It is important for a design to be balanced, as off-balance (or discordant) designs can cause uncomfortable feelings, such as the feeling of motion. This does not mean, of course, that off-balance designs are prohibited in Web design. Sometimes it suits exactly the requirement of an application. For example, a design might be intended to project some artistic merits and be thought-provoking.
2.2. Emph asis
Emphasis makes an element stand out and gives it importance (or dominance). This makes it attract attention. For this reason, emphasis is used to control the attention of the user. Commonly used techniques for implementing emphasis include contrast, placement, and isolation.
2.2.1. Emphasis through Contrast
Contrast causes an abrupt change in the continuity of a design and therefore in eye movement. The contrast may be due to change in any of various characteristics, including color, value, shape, orientation, and size. Figure 23.24 shows some examples. The design on the left shows emphasis through change in orientation, the middle design through change in color, and the design on the right through change in shape. By far the most powerful shape for producing contrast-based emphasis is a circular shape, mainly because most other shapes around us or in most designs are angular. For this reason, circular shapes can attract attention even without being filled with vivid colors or surrounded by white space.
Emphasis through contrast is especially invaluable for producing visual hierarchy of importance to aid the navigation of content. Visual hierarchy essentially controls what to look at first, second, third, and so on. It involves emphasizing important elements and organizing them logically and predictably to help guide viewers’ eyes through content, so that they can view content the way intended. To implement visual hierarchy, content elements are identified based on their importance and then given emphasis accordingly, with the most important elements getting the most emphasis, the second important getting weaker emphasis, and so on. Hierarchy also makes content easily scannable. Other principles used to make text scannable are discussed in Chapter 24. Figure 23.25 shows some examples of visual hierarchy application. In the left image, the eyes are likely to dart back and forth between the design elements. In the middle one, they are likely to be attracted first to the pepper, then the headline, then the footer; while in the third, they are likely to go to the headline, then to the pepper, then to the footer.
Figure 23.26 shows examples of visual hierarchy with simulated textual content. The image on the left represents a screen full of plain text; the middle represents the same text chunked up, with sub-section headings that have larger font size and bolder font style and text with jagged right edges; and the rightmost adds short text in the form of comments and excerpts from the main text. It also adds light graphics in the form of color blocks to provide more contrast.
2.2.2. Emphasis through Isolation
When the element to which attention is to be attracted is placed some distance away from other elements and surrounded by ample space, this is known as creating emphasis through isolation. Figure 23.27 shows a couple of illustrations. The star and word on the right in the images certainly appear to have more importance, simply because they are isolated.
2.2.3. Emphasis through Placement
Emphasis by placement is when an element is positioned uch that it attracts attention. This is achieved in a number of ways. One way is to arrange an element so that other elements in a design point to it. This exploits the human tendency to look in the direction of a pointer or in the direction someone is looking. An element can also be placed in the center of a design, exploiting the human tendency to focus first on the center when a design is homogeneous; or it can be enclosed in a frame that is not so thick or whose color is not such that it overpowers the object. Figure 23.28 shows an illustration of each type. Other types of placements include objects overlapping or placing them such that they touch the outside edge of a design, thereby arousing curiosity.
2.3. Rhythm
Visual rhythm in design describes the timed, regular, or predictable occurrences of elements throughout a design. It is in essence the repetition of elements in a design. An advantage of visual rhythm is that it creates an easy path that the eyes almost instinctively follow. The movement of the eyes can be slow, connected, and flowing, or abrupt and dynamic, or circular, depending on the frequency of repetition, the types of repeated elements, and spacing. The repetition of similar elements or flowing circular elements produces a design that makes the eyes move through it in a connected flowing rhythmic fashion, while the repetition of unrelated elements produces a design that makes the eyes move in an abrupt and dynamic manner. Figure 23.29 shows some basic illustrations that communicate this general principle. Notice that each of the three designs has a different visual rhythm. Assuming they were producing musical beats, the rhythm they would generate would be different. Notice also that out of the three designs, “C” has the most pronounced accent. What this means is that if three different Web pages are designed to simulate the rhythm of each of the designs, the page design that simulates “C” would be the easiest to find items on, because the eyes will be guided from one point to another much more easily.
Rhythm is particularly important in long Web pages or when large amount of information is being presented. Too bland a rhythm can result in nothing standing out more than others, making it difficult for someone to locate things. This, in a sense, relates to the topic of emphasis through contrast discussed earlier. Similarly, too much rhythm can make a page look chaotic. The best approach is to design a page on the basis of how the information it contains is intended to be viewed. It may be that people are intended to read quickly through, or go from one important part to another in the first place and then read the less important parts if they wish. Figure 23.30 shows an example of rhythm being used in a Web page. It is designed to guide people to the important parts of the page. The page basically presents titles of articles and a brief description under each title. Notice how each article is presented using repeated patterns of color, text style, design elements, and alignment. Notice also how the different sections have different rhythm/ style but are not so different as to disrupt the overall feel or theme of the page.
2.4. Proportion
Proportion describes the relationship between the sizes of visual elements of a design as well as between the elements and the design as a whole. It is said to be good or harmonious when there is a correct or desirable relationship between the elements. To help produce designs with proportions that are considered harmonious, mathematically derived grid systems (or grid theories) have long been used by designers. The practice goes back thousands of years, and although it was originally used for technical designs, such as architectural designs, it has since been adopted and adapted in various areas of visual design, including photography, videography, graphic design, and more recently Web design. Grid systems (i.e., the ways grids are divided) vary widely. The two most commonly used are the golden ratio and rule of thirds. While these grid systems are more typically used in shot composition in photography, film, and art, they can sometimes find use in Web design, especially in content design. The grid layout model discussed in Chapter 20 is mostly concerned with the precise placement of elements rather than where best to place them for the purpose of aesthetics.
2.4.1. Golden Ratio
The golden ratio, which is also known by various other names, such as divine proportion, is one of the oldest and most commonly used grid systems in visual design. It was derived hundreds of years ago from the observation that a certain pattern or proportion ratio commonly occurs in natural designs, such as in horns, shells, and flowers, and because of this it is believed that it is probable that humans are genetically programmed to instinctively find it aesthetically pleasing. The value of the ratio, termed phi, is known to be 1.6180339 (approximately 1.618). The proportion between two geometric elements is in the golden ratio if the ratio of their sizes is equal to the ratio of the sum of their sizes to the size of the larger of the two. Using Figure 23.31 to illustrate, this means that b/c = a/b. As also shown in the figure, to achieve the ratio, the size of an element is simply divided by 1.618 to obtain the size for the larger part and this is then subtracted from the size of the element to obtain the size for the smaller part.
The most common evidence of the attempt to apply the golden ratio to design is in the form of the golden rectangle, in which the ratio of the larger part to the smaller part is in golden ratio. This is illustrated in Figure 23.32 with a horizontal length of 960 pixels, which is the width that is left to display a Web page at 1024 x 768 screen resolution in a typical Web browser, after the chrome (the edges of the browser) and space needed for the vertical scrollbar have been accounted for. Many Web pages are designed in this style or its variations.
Of course, the application of the golden ratio involves more than just dividing a rectangle into two aesthetically proportioned parts. Its application extends to using it to determine where to best place elements within a design to produce an aesthetically pleasing composition. This typically involves repeating the division process, starting from every edge of the rectangle, so that a grid like that shown in Figure 23.33, known as the phi grid, is produced. It is believed that when the object of focus is positioned along a grid line or on the intersection of two grid lines, more tension and interest is created than simply placing the object in the center, thereby producing a more aesthetically pleasing composition.
Another interpretation of how the golden ratio should be used involves placing the golden spiral on a design and using it as a guide. The golden spiral, shown in Figure 23.34, is created through connecting the opposite corners of the sequence of squares produced through repeatedly applying the golden-ratio-division process to the smaller of the parts created after each process, until division is no longer practical. In any case, given its relative complexity and the fact that Web page design does not need to be perfect to the pixel, the strict application of the golden ratio is hardly necessary and generally not followed. It is often only used as a guide.
2.4.2. Rule of Thirds
Like the golden ratio, the rule of thirds is hundreds of years old but still relevant. It is an easier system to apply in a design than the golden ratio, in that it involves just dividing a space, such as a screen, into thirds, vertically and horizontally; that is, into a 3 x 3 grid. As with the phi grid, it is believed that a design would be more appealing if the areas of interest in the design are located along the grid lines or at the intersections of the lines. Figure 23.35 shows the rule-of-thirds grid. Notice its similarity to the phi grid. Figure 23.36 shows an example of the grid being used for positioning content.
2.5. Unity
Visual unity is achieved when the various elements of a design, such as typeface, shape, color, texture, line, and space, agree and are in harmony with each other to produce a unified design (i.e., something that the eyes see and the brain likes). It is a very important goal, as it helps project the central theme of a design. It is an indicator that all the other design principles have been applied correctly in relation to each other. Without visual unity, viewers may miss certain elements of a design, or may not get its essence or connect with it. Unity is achieved using a collection of secondary principles, or methods, including proximity, repetition, closure, continuation, and alignment, which are discussed next.
2.5.1. Proximity
When elements are positioned close to one another, they project the sense of belonging together. This can also allow viewers to see a pattern, which can further enhance the connection with a design. To apply this principle effectively, related objects are placed closely together, as shown in Figure 23.37. Notice how the design on the right looks more compact and more structured. Many would see it to be more aesthetically pleasing.
In the design example shown in Figure 23.38, it is clear that it is the proximity between the elements of a group that causes the perception that they are in a group. Notice that even though the ovals and rectangles are of different shapes, their proximity to each other gives the impression they are in the same group. If all the elements in the design have been of equal proximity to one another, for example, it would be ineffective to use proximity for grouping and another technique will have to be used.
2.5.2. Similarity
Elements that look similar tend to seem to belong together. Grouping based on similarity is done using three main properties: size, shape, and color/value. Figure 23.39 shows an illustration of each. Note that the proximity of elements to each other can affect the effectiveness of this principle. So if it is difficult to instantly group by size, color, or shapes respectively in the Figure, it is possibly because the relevant elements are too far apart. The degree to which elements that are supposed to be in a group are similar to the elements of other groups can also play a role, as does, for example, the orientation of elements.
Even when the proximity law is already used to group elements, the similarity law can still influence grouping. In Figure 40, for example, even though the grouping of the elements is informed by proximity between each rectangle and oval in a pair, all rectangles and ovals seem grouped by shape. For example, you would instinctively expect information with the rectangles to be of the same type, and likewise for the ovals. The use of the similarity law to group items is common with websites that sell products. It is what is at play, for example, when the products in a section of the screen are of similar sizes even when they are differently shaped.
2.5.3. Repetition
Repeating elements, such as colors, shapes, textures, and lines, can create visual relationship between different elements. Typically, only the key elements of a design need to be repeated to bind the design together. This allows nonkey elements to be used to add variety, uniqueness, or character to a design to make it interesting. Repetition, of course, equals consistency. For example, consistency in theme across pages that deal with the same subject is a kind of repetition. Figure 23.41 shows a simplistic illustration. The design on the left has no repetitions and therefore looks less unified compared to the one on the right in which the key elements (i.e., the two sidebars and buttons) are identical.
2.5.4. Closure
Generally, complex objects are made up of smaller and simpler elements that the brain puts together as a single entity. For example, a face is a collection of different elements, including mouth, nose, ears, and eyes. The closure principle is based on the idea that if any of these elements is missing, the brain is capable of filling them in to complete a picture. In visual design, the use of the closure principle can make designs different and more interesting, provided care is exercised not to remove the vital parts of an object. Figure 23.42 shows two examples, a triangle and circle with missing parts. When the closure principle is used properly in a design, so that the arrangement of the elements that make up the design projects a discernible shape, it can help unify a design.
2.5.5. Continuity
The principle of continuity is based on the notion that when we perceive a path, we tend to continue looking along its direction, even when the path is intersected by another, until our attention is drawn by something more significant, or we have reached how far we can go in that direction. This is how when two lines intersect; we still can distinguish between them. In design, this means, for example, that if one element points to or overlaps with another, the eyes tend to continue on from the first element to the next, and so on. This tendency is usually exploited to direct a viewer’s attention. Figure 23.43 shows an example of the continuity law being applied in the form of an arrow being used to direct attention to a piece of information that is important but could not be placed in a more noticeable area of the page because information about newer more important items need to be placed there. Because the continuity principle essentially involves connecting one element to another, it can also help in unifying a design.
2.5.6. Alignment
The alignment law involves arranging elements so that their edges or centers align with those of other elements, creating more sense of harmony in a design. Figure 23.44 shows the difference good alignment can make. The design on the right certainly looks more unified and more professional because its elements are well-aligned.
Alignment can also be used in projecting a tone, as illustrated in Figure 23.45. Although there is nothing particularly wrong with the alignment of the elements of the design on the left, it is probably too symmetrical, too formal, and uninteresting. With a different alignment, plus an extra element to ensure balance, the design becomes a little more interesting and less formal, as shown in the design on the right.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.