What can you tell about HTML?

HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser.

Basic concepts:

Tags: Markup elements enclosed in angle brackets (<>). Most tags are paired (<tag>...</tag>), but there are also self-closing tags (<br>, <img>).
Attributes: Provide additional information to tags, defining their properties. They are written as name="value" inside the opening tag.
Elements: Consist of an opening tag, content, and a closing tag (or only an opening tag for self-closing elements).

HTML document structure:

<!DOCTYPE html>: Document type declaration.
<html>: Root element of the document.
<head>: Contains meta-information about the document (page title, links to styles, scripts, etc.).
- <title>: Page title, displayed in the browser tab.
- <meta charset="UTF-8">: Specifies character encoding.
<body>: Contains the visible content of the page (text, images, links, tables, etc.).

Examples of commonly used tags:

Headings: <h1> - <h6>
Paragraph: <p>
Link: <a href="url">Link text</a>
Image: <img src="path_to_image" alt="Description">
List:
- Unordered (<ul>)
- Ordered (<ol>)
- List item (<li>)
Table:
- <table>
- <tr> (row)
- <th> (header cell)
- <td> (data cell)
Block elements: <div> (generic container)
Inline elements: <span> (generic container)
Forms:
- <form>
- <input type="..."> (input field)
- <button>

Importance for QA:

Checking structure and validity: Ensure HTML is correctly written according to standards (W3C Validator).
Accessibility: Verify the use of semantically correct tags and attributes (alt for images, aria attributes) to ensure content accessibility for users with disabilities and screen readers.
Cross-browser testing: How pages display in different browsers and devices.
Interaction with elements: Understanding HTML structure is necessary for writing locators in UI automation testing (XPath, CSS Selectors).

<!DOCTYPE html>
<html>
<head>
    <title>Sample HTML</title>
    <meta charset="UTF-8">
</head>
<body>
    <h1>Welcome!</h1>
    <p>This is a simple paragraph of text.</p>
    <a href="https://www.example.com">Visit Example</a>
    <img src="/images/logo.png" alt="Company Logo">
    <h2>Shopping list:</h2>
    <ul>
        <li>Apples</li>
        <li>Milk</li>
        <li>Bread</li>
    </ul>
</body>
</html>