HTML and CSS are among the technologies QA engineers regularly encounter. In this article, we’ll tell you about the basics of HTML and CSS. Hopefully, it will help you understand the principles of web technologies better and make everyday communication with developers easier.
What Are HTML and CSS?
HTML and CSS are two core technologies for web page building.
HTML is an acronym for Hypertext Markup Language. It is a standardized markup language for resources designed to be displayed in a web browser. In other words, HTML allows us to describe the structure of a web page in a way a browser can understand and render it, displaying it to a user.
CSS stands for Cascading Style Sheets. It is a special language that describes the appearance of a document created with HTML. CSS allows us to format what has been written with HTML. Being one of the core web technologies, it has become very functional.
- CSS provides relatively easy and fast development. Once created, the design can be applied to many pages.
- It increases the flexibility and usability of editing. If you want to change the style of a particular element on all pages, it is enough to edit CSS once.
- CSS makes the code simpler by reducing the repetition of elements. Therefore, it is lighter and easier to read for developers.
- It also speeds up the load times. You can set up cashing, letting a system load CSS during the first opening and just read it every next time.
- CSS increases the number of visual solutions for presenting content, allowing every brand to create its individual style.
It is important to remember that HTML and CSS are not programming languages. They are technologies used for structural purposes. Meanwhile, programming languages have functional purposes. In other words, HTML and CSS do not contain any instructions and, thus, do not contain programming logic.
The Structure of HTML and CSS
HTML is a set of tags that allow creating and modifying website markup. Tags are basic formatting tools. Each of them comes with a unique name enclosed in brackets. Thus, we have <> for the opening tag and </> for the closing tag.
For example, the <b> is the opening tag, and </b> is the closing one. The text in-between appears in bold. The brackets do not appear on the screen. They only act as a command for a browser that the word enclosed between these tags should be displayed in bold.
Each tag performs its own specific functions. To create web pages, you need to know what different tags stand for.
CSS is a set of rules that describe how a particular element should look. It usually consists of a selector and a declaration value.
For example if we have body {background: #fffff;} in the code,
- body is an identifier showing what part of the page we are formatting;
- {background: #fffff;} are a selector and a value correspondingly, describing the style of a formatted part.
Main HTML Tags
<html> indicates that the document you are working with is an HTML document. It contains all other tags, including <head> and <body>.
<head> marks the spot where the information that won’t be displayed appears. This is where the document title tag and tags for the search engines are located.
<body> marks the visible part of a document. It stores the page content displayed in a browser window.
We can use the mentioned above tags only once in a document.
HTML and Text Formatting
- <h1> to <h6> tags are used for headings and subheadings, ranging by their level and/or importance on the page.
- <p> marks the beginning and the end of a paragraph.
- <a> allows you to embed links in the text.
- <img> makes it possible to insert images into the HTML.
- <strong> makes the text bold, helping to draw attention to a piece of content.
- <em> also allows you to emphasize a piece of text, but this time by using italic.
- <small> reduces font size by one unit compared to regular text.
- <del> highlights the text that has been removed from the new document version.
- <sub> tag allows you to write text in subscript.
- <sub> displays the text in superscript.
- <table> functions as a container for elements used to create a table.
- <tr> and <td> indicate rows and columns accordingly.
- <caption> allows a user to add a caption to a table.
- <div> is a generic element used to group one or several blocks.
- <span> is one more generic element used for applying a specific style for inline elements.
HTML supports three types of lists:
- <ol> – ordered list. It is a numbered list that uses numbers or letters to indicate the sequence.
- <ul> – unordered list. It is a bulleted list, where each element starts with a graphical marker.
- <dl> – description list. It encloses a group of terms and descriptions and is often used for definitions.
To Sum Up
These are some of the frequently used HTML tags QA engineers should know. Of course, these are only the basics: there is much more to HTML and CSS. Still, remembering them will be enough for the beginning, helping to understand website structure better.