Nehoray

Intro to HTML


HTML, or HyperText Markup Language, is the backbone of the World Wide Web. If you've ever wondered how websites are made, HTML is the key ingredient that makes it all possible. In this article, we'll take a journey into the world of HTML, breaking down its basics and exploring why HTML matters in QA.


What is HTML?

HTML is a markup language used to structure content on the web. It stands for HyperText Markup Language, where "hyper" refers to the interconnectedness of web pages and "markup" implies the use of tags to define elements within a document.

In simpler terms, HTML is like the framework of a building. It provides the structure for web pages, allowing browsers to interpret and display content in a visually appealing way.


Why HTML Matters in QA

In the QA world, HTML is the keystone for ensuring web applications' functionality and integrity. It allows QA professionals to monitor webpage elements, ensuring accurate content presentation, proper formatting, and cross-browser compatibility. HTML is not just a code; it's a toolkit for enhancing user experience and accessibility, making it an indispensable focus for QA specialists.


The Building Blocks: HTML Tags

At the heart of HTML are its tags. Tags are like commands that tell the browser how to display different parts of a web page. They are enclosed in angle brackets (< >) and come in pairs – an opening tag and a closing tag. The content to be affected is placed between these tags.

Here's a basic example: 

<p>This is a paragraph.</p>

In this example <p> is the opening tag, and </p> is the closing tag. The text between them, "This is a paragraph," is the content of the paragraph.


Document Structure: The HTML Skeleton

Every HTML document has a basic structure that serves as its skeleton. It includes the <!DOCTYPE html> declaration, the <html> element, the <head> section, and the <body> section. 

<!DOCTYPE html>
        <html>
        <head>
            <title>My First HTML Page</title>
        </head>
        <body>
            <h1>Welcome to My Website</h1>
            <p>This is a simple HTML page.</p>
        </body>
        </html>

  • <!DOCTYPE html>: This declaration defines the document type and version of HTML being used.
  • <html>: This is the root element of the HTML document.
  • <head>: Contains metadata about the document, such as the title (displayed in the browser tab).
  • <body>: Holds the content of the web page, including text, images, links, and more.


Adding Structure: Common HTML Elements

HTML offers a variety of elements to structure content. Here are some common ones:

  • Headings: <h1> to <h6> for different levels of headings.
  • Paragraphs: <p> for text paragraphs.
  • Lists: <ul> for unordered lists, <ol> for ordered lists, and <li> for list items.
  • Links: <a> for hyperlinks.
  • Images: <img> for embedding images.


Attributes: Adding Extra Information

HTML tags can also include attributes, providing additional information about an element. For example, the <img> tag can have a src attribute to specify the image source: 

<img src="my-image.jpg" alt="A beautiful landscape">

Here, src contains the path to the image file, and alt provides alternative text for accessibility.


Conclusion

Armed with these basics, you've initiated your journey into HTML, a capital skill for future QA web specialists. Uncover the synergy between HTML and JavaScript for interactivity. HTML is your starting point, laying the foundation for mastering web application quality.


❮ Previous Next ❯