Industry standards are technical regulations that help to maintain the structure and integrity of a particular product, service, or profession. Web regulations protect those who access and use information available on the internet and help reduce the risk of various types of cyber threats on the World Wide Web. This module will introduce you to key web standards set forth by the World Wide Web Consortium (W3C). You will also learn about some basic web page styles that, while not universally adopted across the industry, may be useful knowledge for those beginning a career in web design.
As you begin and continue through your career as a web content developer and/or designer, you will discover several best practices that will guide your decisions concerning how you use HTML and CSS to design content. Best practices are generally experience and data driven and are time-tested by experts in each field. An understanding of how to apply best practices will help you to:
- avoid common web design errors
- avoid coding techniques that are inefficient or may not have long-term sustainability due to ongoing web browser upgrades
This module will introduce several best practices for you to consider.
The creation of web content may often be a combination of your original work as a designer and original works that were created by other people. This may include text, images, video, and other forms of media. During this module, you will learn about how copyright laws protect original expression and the conditions under which content may be copyrighted. This will be discussed in greater depth in an upcoming unit of this course.
You will also learn about common misconceptions, how to avoid copyright infringement or content misappropriation, and fair use exceptions. Finally, an instructional video about copyright basics and fair use will help you put all this information in perspective.
This module will cover the following topics:
- rules and regulations
- basic styles
- HTML and CSS good practices
- HTML recommended practices
- CSS recommended practices
- copyright issues
By the end of this module you should be able to answer the following questions:
- Why is it challenging for governments to enforce criminal laws regarding the internet?
- What are some desirable characteristics of web pages and why are these characteristics desirable?
- Why is it a good practice to be consistent in HTML and CSS coding?
- What is copyright and fair use?
Rules and Regulations
Learning Objectives
- Apply industry-standard design and color principles to web pages.
The Web standards are set by the World Wide Web Consortium – W3C, which is not a governmental institution and, therefore, does not have the authority to enforce any law or regulation. It is up to the laws and regulations of each country to enforce and regulate actions over the Web. A growing concern remains that the internet has no boundaries. Additionally, a service provider may often be located in one country while its users are in another. Consequently, it can be a challenge for governments to enforce civil and criminal laws to protect their citizens when it comes to internet issues.
Enforcement of laws related to internet use, cybersecurity, and mitigation of cyber threats must necessarily rely upon collaboration between international governments. Luckily, other multilateral relations have found a way to build international agreements accepted by most countries in the world. Examples of such global issues and the multinational organizations that support them include:
- international trade (World Trade Organization (WTO))
- intellectual property issues (World Intellectual Property Organization (WIPO))
- global level criminal activity (International Police (Interpol))
- child protection (United Nations Children’s Fund UNICEF)).
Thankfully, technological aspects of governance are more clearly delineated. Strict technical regulations are generally adhered to by government officials at the global level to keep the Web infrastructure running. The W3C provides the technical guidelines for all aspects of information exchange on the Web, including, but not limited to:
- XML
- HTML
- CSS standards
- Web as Web of Devices
- Web of Services
- Semantic Web.
Read “Standards W3C” (opens new tab) from W3.org.
This article provides a panorama of guidelines offered by the W3C.
As you read, consider the following questions:
- Which W3C standard contributes to keeping the Web accessible by any hardware or software tool?
- Browsers and Authoring tools
- What is the Web of documents?
- The Semantic Web of data that is enabling computers to do more userful work and to develop systems that can support trusted interactions over the network
Basic Styles
Learning Objectives
- Create basic web pages using the most current version of Hypertext Markup Language (HTML).
- Apply industry-standard design and color principles to web pages.
“web page wireframe” © WGU 2020
The main purpose of this course is to learn the technological aspects of web development. Design aspects, i.e. the considerations for the aesthetic quality of web pages, is slightly out of the scope of this course. However, there are industry standards that suggest some basic styles for the look and feel of a web page, which should be consistent with the web page’s purpose and intended audience. For example, a web page intended to describe technical content tends to be quite distinct from a web page intended to provide personal content.
You will discover, as a web designer, that web page design decisions are often very personal. Web page style and structure may incorporate elements that often reflect the web designer’s own subjective preferences and/or that of the client for whom web page content is being developed. Hence, basic style standards are less discrete than those provided by W3C standards and are far from being universally adopted throughout the industry. Your reading will provide insights concerning some basic web designs you may consider adopting as you learn to develop web pages for different types of content and audiences.
Read “The 8 Types of Websites and How to Design Them” (opens new tab) from 99Designs.com.
This article demonstrates different types of web pages and how they are designed.
As you read, consider the following questions:
- What are the basic differences between Portfolio and e-commerce websites?
- portfolio showcases someone’s work while e-commerce sells a product
- What is the difference between a web page and a website?
- a page is one page on the internet while a website is the whole collection of pages making up the idea
HTML and CSS Good Practices
Learning Objectives
- Create basic web pages using the most current version of Hypertext Markup Language (HTML).
- Apply industry-standard design and color principles to web pages.
- Apply basic aspects of CSS.
Recall that unlike XML, which is strict about the syntax, HTML and CSS are very tolerant to imprecisions in their code. Web browsers have been designed to adapt to HTML coding errors in a web page, to ensure that the content will reach as many users as possible. However, there are many best practices suggested by the industry that are intended to provide web pages with the following desirable characteristics:
- Reliability: a web page complying with all HTML standards is likely to be displayed correctly in every browser
- Example: web page complies with all HTML commands instead of relying on the browser’s tolerance with HTML syntax
- Readability: a web page is less prone to errors if it can be clearly read
- Example: web page code limits the HTML statements to one per line
- Maintainability: a well-designed web page is easy to adapt
- Example: web page code includes comments to help locate portions of the HTML code
- Responsiveness: a web page with the correct use of its elements is likely to display correctly regardless of the window or screen size
- Example: web page code uses relative dimensions instead of specifying sizes in pixels
HTML Recommended Practices
Learning Objectives
- Apply industry standards to guide the design process of a web page.
- Apply industry-standard design and color principles to web pages.
As developers, it is good practice to establish conventions that create consistent and clean HTML code. These conventions provide consistency across all developed web pages, while also make the HTML code readable should other developers ever need to make changes or improve upon the code. This is not an exhaustive list and should not be construed as such.
Declare the Document Type
The first line of the HTML document should indicate the document type. As you have seen previously, this is a simple declaration with HTML5 :
<!DOCTYPE html>
However, with older versions of HTML, the declaration is more complex:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Lowercase element names
While HTML allows the developer to mix uppercase and lowercase letters in element names, it is recommended to use lowercase because lowercase results in cleaner-looking code that is easier for the developer to write.
Recommended:
<body>
<p>Paragraphs of text go here. </p>
</body>
NOT recommended:
<BODY>
<P>Paragraphs of text go here. </P>
</BODY>
Close all HTML elements
While it is true that the web browser will automatically close all HTML elements, it is a best practice to close all elements within the HTML code. This can potentially improve web page performance.
Recommended:
<body>
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
</body>
Not recommended:
<body>
<p>This is the first paragraph
<p>This is the second paragraph
</body>
Specify alt, width, and height for images
It is imperative that the developer always specifies the <alt> attribute for all images. The <alt> attribute is used if the image cannot be displayed. The <alt> attribute is also used for accessibility, especially for those visitors who cannot view the images.
It is also recommended to specify the width and height of images, because this allows the web browser the opportunity to reservice space on the web page before the image loads.
Recommended:
<img src="some_image.jpg" alt="This is the alt text" style="width:100px;height:75px">
Not recommended:
<img src="some_image.jpg">
Code Indentation
While HTML was designed as a format for creating web pages, HTML code best practices should also take human readability into account. Using code indentation helps any future code developer review and comprehend the initial code.
Recommended:
<html>
<head>
<title>Title Page</title>
</head>
<body>
<h1 style="background-color:Tomato;">This is a heading</h1>
<h2 style="background-color:LightGray;">This is another heading</h2>
<p>This is the first paragraph of the page.</p>
</body>
</html>
Not recommended:
<html><head><title>Title Page</title></head><body>
<h1 style="background-color:Tomato;">This is a heading</h1><h2 style="background-color:LightGray;">This is another heading</h2>
<p>This is the first paragraph of the page.</p></body></html>
<title> element
Search engine optimization (SEO) uses the title page to determine the order when listing web pages in search results. If a web page does not have a title, that web page may not be included in the search results. Furthermore, the <title> element defines the title in the browser toolbar, making it easier for visitors to keep track of open web page tabs on the browser. It is also recommended that the web page title be as accurate and meaningful as possible. For example:
<title>HTML Recommended Practices</title>
Note:
The W3C Markup Validation Service (opens new tab) checks the markup validity of documents created using HTML, XHTML, etc. It works by taking in the URL of the document to be validated through a simple form, processes the target document, and then returns a list of any markup issues that were found. These issues include things such as missing attributes, missing tags, etc.
CSS Recommended Practices
Learning Objectives
- Apply basic aspects of CSS.
- Apply industry standards to guide the design process of a web page.
- Apply industry-standard design and color principles to web pages.
Maintaining a CSS style sheet with a small number of items is a fairly simple and straightforward endeavor. However, as the style sheet grows in size and complexity, it becomes more challenging to maintain the code and the readability of that code. Therefore, establishing CSS coding practices allows the developer to keep the CSS code manageable as well as easily readable. This is not an exhaustive list and should not be construed as such.
Consistent Code
Consistency is always a vital component to any programming project. Oftentimes, there is not a right or wrong way to code CSS; the important thing to remember is you should be consistent in how you code the CSS. Developers should always use the same naming conventions within the CSS code, and the developer should create and maintain a consistent code format (e.g., how the developer will indent the code). Creating and following a set of rules will allow the developer to create and maintain consistent CSS code.
Readable Code
Much like with HTML, creating readable CSS can be based around personal preference and can also result in how the developer chooses to indent or separate the CSS code. From a readability and maintenance perspective, having each CSS property on its own distinct line makes for code that is easier to read, understand, and maintain.
Example:
.circle {background-color: #003057; }
h3 {background-color: #4986AD; color: black; }
This code is completely acceptable. However, we can restructure the code to make it easier to read and understand by having each property and value pair on a new line:
.circle {
background-color: #003057;
}
h3 {
background-color: #4986AD;
color: black;
}
Comment the CSS Code
Commenting CSS code allows future developers working on the code to better understand how the code functions. Furthermore, the developer can use code comments to break the stylesheet into various sections, which assists with stylesheet organization and eases future maintenance.
.circle {
background-color: #003057;
}
h3 {
background-color: #4986AD; /* This CSS code sets the background to a light blue based on WGU color scheme */
color: black;
}
Organize the Stylesheet
It is good practice to create different sections to make the stylesheet more manageable and readable. You can use CSS comments to delineate the different sections of the stylesheet:
/* General Styles Section */
…
/* Navigation Section */
…
According to MDN, it is a good practice to have all the general styling first within the stylesheet (MDN Web Docs, n.d.):
<body><p>- Headings
<ul>and<ol><table>properties- hyperlinks
Copyright Issues
Learning Objectives
- Apply industry-standard design and color principles to web pages.
- Document web page and website creation.
Web page content is authored by various individuals and, therefore, represents the original thought and works of those individuals. United States federal laws, along with international copyright laws, provide copyright protection for these original works.
Even though copyright laws vary throughout the world, some general agreements are accepted by most countries. Because of that, it is important to be aware of the following facts about copyright laws:
- The progress and well-being of humanity rests on its capacity to create and invent. Copyright is intended to encourage that progress and protect the works of those who contribute to technology and culture.
- Copyright is intended to provide protection of an expression, not an idea.
- Examples of copyrighted materials include a web page’s design, website text, and any media produced for a web page
- Items are automatically copyrighted when the work is “expressed.” The presence of the copyright sign (©) is not required for a work to be under copyright protection.
- There are popular misconceptions about copyright that should be avoided:
- If you do not charge users for it, it is not violating the copyright of the owner..
- If it is distributed freely by the owner, it is in the public domain.
- Fair use is the right to use copyrighted material without permission or payment under certain circumstances, especially when the cultural or social benefits are predominant. This is particularly the case when the intention is for criticism, comment, teaching, scholarship, or research.
It is your responsibility as a web designer to ensure that you provide proper acknowledgements—in the form of citations and/or attributions—when using materials that have been authored by someone other than yourself. This may require you to obtain permission, when applicable. If you are not sure, ask for permission or find an alternative source that has open-use licensing. Copyright infringement can subject you to heavy penalties, so take the necessary steps to adhere to copyright law.
Watch the two videos “Copyright and Fair Use” (opens new tab) and “Image Appropriation” (opens new tab) from LinkedIn Learning.
These videos teach you about how to maintain compliance with the use of open-source and copyrighted materials, and to see examples of where web-sourced images may or may not be used, depending on copyright licensing.
As you watch, consider the following questions:
- What do you need to do to protect your web page with copyright?
- If you copy an existing web page and make some changes in the style, is this still considered a copyright violation?
- Yes unless you get permission
Which laws enforce rules and regulations over web pages around the world?
There are no laws covering the rules and regulations over the WWW.
Correct! No organization has jurisdiction to enforce any law throughout the entire world, but most disputes over national law infringements can be handled by multilateral organizations like WIPO, WTO, and Interpol.
Industry Standards & Best Practices – Summary
The W3C sets standards governing web design, web devices, architectures, XML technology, and browser and authoring tools. You have seen how these standards help to promote consensus, ensure quality, and instill public accountability for the information that is created and distributed on the internet. You are encouraged to frequently refer to W3C standards to ensure your practice aligns with these standards.
Consistency is a key aspect to code development, especially with HTML and CSS. Adhering to best practices allows the developer to create fully functional code that can be easily read by others. Following best practices helps the developer minimize any potential issues created by non-standardized coding practices. While challenging initially, following best practices will make the developer more efficient and will ultimately result in higher-quality programming code.
Finally, you have read that any original work may be copyrighted, and that copyright allows the author to decide how their original work may be used by others. This may include content that is in the public domain. It is important to always check the source of media content to determine if it is copyrighted, understand any licensing terms, and be aware of the extent and limitations of fair use. Always properly cite the source of any materials you use and seek and gain permission when it is required to do so.
During this module you learned the following:
- guidelines offered by the W3C
- web page desirable characteristics
- reliability
- readability
- maintainability
- responsiveness
- HTML and CSS recommended practices
- facts about copyright laws