Chapter 1. Beginning with HTML

15 Views

Introduction:

HTML, also known as Hypertext Markup Language, utilizes a system of elements to represent specific content. Markup in HTML defines the structure of content rather than its visual presentation, which is determined by Cascading Style Sheets (CSS) and rendered by web browsers. Deprecated elements like “font” should not be used by authors.

While HTML is sometimes referred to as a programming language, it lacks logic and is therefore classified as a markup language. HTML tags imbue semantic meaning and machine-readability to the content within a webpage.

Typically, an element comprises an opening tag (<element_name>), a closing tag (</element_name>), and content enclosed between them, such as: <element_name>…ABC…</element_name>.

Certain HTML elements, known as void elements, lack closing tags and content, including <img>, <meta>, <link>, and <input>.

Element names serve as descriptive keywords for the content they encapsulate, such as “video,” “audio,” “table,” and “footer.”

A HTML page may contain numerous elements that are parsed by a web browser, interpreted, and then rendered as human-readable or audible content on the screen.

It’s essential to distinguish between elements and tags in HTML:

Elements: video, audio, table, footer
Tags: <video>, <audio>, <table>, <footer>, </html>, </body>

Elements:

TAGS:

The <p> tag signifies a standard paragraph. Typically, elements consist of both opening and closing tags.

The opening tag includes the element’s name within angle brackets (<p>), while the closing tag is identical except for the addition of a forward slash (/) before the element’s name (</p>).

Content is placed between these tags, such as: <p>…..This is a paragraph…..</p>.

Let’s create a web page with simple HTML code:

Crafting a Basic Web Page Below is an HTML illustration that generates a straightforward “Hello World” webpage.

HTML documents can be authored using any text editor. To ensure recognition as HTML files, they must be saved with either a .html or .htm[2] extension. After creation, these files are accessible for viewing in any web browser.

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Title Page</title>
    </head>

    <body>
        <h1> HEllO WORLD</h1>
        <p> This is a Paragraph</p>
    </body>

</html>

Analysis of the Page Structure:

The example utilizes the following tags:

Tag	Explanation
<!DOCTYPE>	Specifies the HTML version employed in the document, which in this instance is HTML5.
<html>	Initiates the page. No markup should follow the closing tag (</html>). The lang attribute denotes the primary language of the page using ISO language codes (e.g., en for English).
<head>	Commences the head section, containing metadata about the HTML document, although it isn’t visible in the primary browser window. This section may also incorporate imports from external stylesheets and scripts. The </head> tag denotes its closure.
<meta>	Provides the browser with metadata regarding the document. The charset attribute defines the character encoding. While not mandatory, contemporary HTML documents typically employ UTF-8. The <meta> tag doesn’t necessitate a closing tag.
<title>	Specifies the page’s title. Content enclosed between the opening and closing tags (</title>) is exhibited on the tab or title bar of the browser.
<body>	Marks the segment of the document visible to users, encompassing all visible or audible content. No content should follow the </body> closing tag.
<h1>	Denotes a level 1 heading for the page.
<p>	Represents a conventional paragraph of text.