HTML and CSS are fundamental technologies that play a crucial role in building and testing websites. Knowledge of HTML and CSS helps in testing some UI corner cases, building test automation scenarios, and generally understanding what's happening "under the hood" of user actions. They are the building blocks of web pages and are used to structure and style content on the web. So let's get to the bottom of what's what.
What is HTML
HTML (HyperText Markup Language) is a markup language used to create the structure and content of web pages. HTML defines what elements are on a page and how they interact with each other. HTML uses tags to identify different elements and their properties. HTML consists of a series of "elements" that tell the browser how to display the content. Elements are represented by "tags", which are enclosed in angle brackets. For example, <p> is a paragraph tag, and any text between <p> and </p> will be displayed as a paragraph.
When developing HTML, great care is taken to create a semantic structure for web content. Semantic HTML elements such as <header>, <nav>, <section> and <footer> give meaning to the content, making it easier for search engines, assistive technologies, and developers to understand and work with the page structure.
A typical HTML page structure includes the following elements:
<!DOCTYPE> declaration. This is a declaration at the beginning of the document that specifies the version of HTML that the page uses. For example, <!DOCTYPE html> indicates that the page uses HTML5.
<html> element. It represents the root element of the entire HTML page. All other elements on the page are inside this element.
<head> section. It contains metadata about the page, such as the title, meta tags for search engines, links to styles, and external scripts. It also defines the page title, which is displayed in the browser tab.
<meta> meta tags. It is used to provide information about the page such as character encoding, page description, keywords, and other metadata.
<title> It defines the page title that is displayed in the browser tab.
<link> and <style> for styles. The <link> elements are used to link the page to external style sheets (CSS), while the <style> element allows you to define styles directly on the page.
<script> for scripts. Is used to insert JavaScript code into the page, allowing you to add interactivity and dynamic behavior.
<body> content. It contains the main content of the page, such as text, images, links, and other elements that are visible to users.
Let's understand the above HTML elements with examples. These are the basic elements that are present in any website.
The <header> element usually contains introductory information or a set of navigation links. It is often placed at the top of a web page and may contain elements such as the site logo, page title, and main navigation. On a website, we might see it like this, for example:
The <nav> element is used for navigation menus or links. It usually contains links to different sections of the site. For example, if we click Today's Deals in the header, a new page will open with a different link and content.
The <section> element is used to define sections of content within a webpage. It doesn't have any specific visual styling but helps in structuring the page's content for search engines and assistive technologies.
The <footer> element typically appears at the bottom of a web page and contains information about the page or site. It can include copyright information, contact details, and links to privacy policies and terms of use.
Tags are also one of the basic elements of HTML code. These are special characters or keywords that are used to define and structure the content of a web page. Here are examples of the most popular tags:
<div> used to create containers and sections on a web page. Typically used with CSS to style and position elements.
<p> tag is used to create paragraphs of text on a page.
<a> creates hyperlinks, allowing users to link to other web pages or resources.
<img> used to insert images into the page.
<ul> and <ol>. <ul> creates an unordered (bulleted) list, and <ol> creates an ordered (numbered) list. List elements are specified using the <li> tag.
<h1>, <h2>, ..., <h6> define headings at different levels. <h1> is the most important and largest heading, and <h6> is the smallest.
<form> used to create forms on a page, including input elements such as text fields and buttons.
<input> creates input fields such as text boxes, radio buttons, and checkboxes.
<table>, <tr>, <td> used to create tables with cells, rows, and headers.
HTML includes elements for creating interactive forms to collect user data and feedback. Testers often need to ensure that forms work correctly, validate user input, and generate the correct error messages. HTML also allows for the integration of multimedia elements such as images, audio, and video. Testers must ensure that these elements load and play correctly, and check compatibility with various file formats.
CSS is for what?
While HTML provides the structure of a web page, CSS is used to style this content. CSS – Cascading Style Sheets – a style sheet language used for describing the look and formatting of a document written in HTML. If we think of HTML as the blueprint for a house, then Cascading Style Sheets (CSS) are the paint and decorations. CSS is the creative tool we use to change the look and feel of websites. It's where we define our choice of colors, fonts, spacing, layouts, and much more.
CSS is written in a file separate from HTML. This separation not only simplifies testing and maintenance but also increases the reusability of our styles. When styles are embedded directly in HTML, they are restricted to that specific page and cannot be used across multiple web pages.
Most CSS is fairly straightforward. You identify the HTML element you want to style, specify which property you want to change and define the value you want to apply. By repeating this process, you can achieve a great deal. The complexity of CSS comes when you want to create complex layouts, and animations, or use CSS functions.
The first thing to note about CSS is the so-called "cascading" of styles. Styles can be defined in multiple places (external style sheets, internal styles, inline styles), and CSS uses a specific order of precedence to determine which styles should be applied. Understanding this cascade helps testers effectively diagnose style-related problems.
CSS plays a critical role in the creation of responsive web designs. Testers need to ensure that web pages adapt to different screen sizes and orientations, so they can use media queries to test how a site looks on different devices, from smartphones to large desktop monitors.
CSS provides layout techniques, such as flexbox and grid layout, which allow deeper and more flexible control over page layout. Testers can evaluate how these layout methods affect the structure and responsiveness of the site.
CSS can also be used to add animations and transitions to web elements. Testers may need to check that these animations are smooth, non-distracting, and enhance the user experience rather than cause problems.
Note that different web browsers may interpret CSS rules slightly differently. Testers need to ensure that CSS styling is consistent and visually appealing across browsers such as Chrome, Firefox, or Safari.
Why does a tester need HTML and CSS?
The answer is simple: understanding these languages allows you to perform deeper and more accurate testing. To do this effectively, they need to understand HTML and CSS because they are the building blocks of web pages. A QA engineer can use them to pinpoint the exact location of an element on the page. This is necessary not only for automated UI checks but also for pinpointing the exact location of an element (e.g. in a bug report). There are several aspects in which knowledge of HTML and CSS will help the tester work faster and more correctly.
Testers can verify that web page elements are created correctly using HTML tags and that content is displayed correctly. For example, we can change the text on the page of any website. Let's take the popular online shop Amazon. Let's open the devtools tab and use the inspector to identify some elements on the site. To do this, in the devtools header, click on the leftmost icon – Inspector, and point it at one of the categories on the site, for example, Today's Deals.
Now change the contents of the tag to whatever we want, and click Enter. For example, LOVELY GIFT FOR KIDS:
Once the page refreshes, all of our changes will be deleted.
Testers can verify that the visual aspects of the page, specified using CSS, are displayed appropriately for the design. This includes checking colors, fonts, sizes, and positioning of elements.
HTML and CSS play a key role in creating a responsive design that displays correctly on different devices and screens. Testers can test how web pages behave on different resolutions and devices.
The layout and visual design of web pages affect the user experience. Testers check that the design is not only esthetically pleasing but that it also meets the user's functional expectations.
HTML and CSS often interact with other technologies such as JavaScript and databases. Testers check that these components are correctly integrated. It's possible to check that all scripts and styles are loaded and applied correctly.
In some cases, poorly secured HTML and CSS elements can introduce vulnerabilities. Testers can look for potential security threats in the page code.
Conclusion
In conclusion, HTML and CSS are fundamental to web development, and therefore to web testing. Understanding them will not only make you a better tester, but will also facilitate communication with your development team, enhance your ability to use automated testing tools, and improve the quality of your accessibility testing. While there's much more to learn about these languages, this overview should give you a solid foundation to start with. Happy testing!