Understanding HTML

What Is HTML?

HTML stands for HyperText Markup Language. HyperText denotes text embedded with links leading to other texts or resources. Whenever you click on an emphasized link directing you to another page, that's utilizing hypertext. As these linked pages grow, they interconnect to form a vast "web" of information, giving rise to the term World Wide Web.

Markup involves the special symbols or codes within a document that instruct the web browser on displaying the content. For instance, markup code can dictate text to appear in bold or italics, identify headings versus paragraphs, and more. HTML represents just one among several languages utilizing this markup code to structure and format information on the web.

HTML serves as the cornerstone of any website, providing the fundamental structure and content, encompassing text, links, tables, and connections to images.

CSS, or Cascading Style Sheets, plays a crucial role in defining a page's design, determining the appearance and layout. It allows specifications for elements' sizes, fonts, background colors, and border widths, contributing to the overall visual presentation.

JavaScript, a more intricate language, facilitates interactive features within web pages. Actions like image transformations upon mouse hovering or automatic updates to a shopping cart upon item selection rely on JavaScript's ability to modify the underlying HTML code.

While CSS and JavaScript enhance a site's aesthetics and functionality, HTML lays the essential groundwork. Interestingly, even if CSS or JavaScript encounters issues, most websites will still display HTML content, showcasing its foundational importance in web development.

Structure

The appearance of HTML code is akin to regular text, distinguished mainly by the use of angle brackets that envelop the markup instructions for the browser.

<!DOCTYPE HTML>
<html>
<head
<title> A Simple HTML Example
</head>
<body>
<h1> This is a header </h1>
<p> This is a Sentence in a paragraph.</p>
<p> And this is the second paragraph with <strong> bold text</strong>.</p>
</body>
</html>

If you save this code into a text file with the filename “It.html” and open it in your browser, it should display a page like this:

A Simple HTML Example

This is a header

This is a paragraph, centered on the page.

And this is the second paragraph with bold text.

Tags

Tags are used to separate HTML code from regular text.

Any text written inside the angle brackets will not be displayed in the browser
The text inside the angle brackets is just used to tell the browser how to display or transform regular text located between the opening tag (also called the start tag) and the closing tag (also called the end tag).

Some of the tags in HTML

<html>: Defines the root of an HTML document.

<head>: Contains meta-information about the document such as title, links to stylesheets, scripts, etc.

<title>: Sets the title of the HTML document displayed in the browser's title bar or tab.

<body>: Contains the visible content of the document.

<h1> to <h6>: Headings, where h1 is the most important and h6 is the least important.

<p>: Defines a paragraph.

<a>: Creates a hyperlink to another webpage or resource.

<img>: Embeds an image in the document.

<ul>: Defines an unordered (bulleted) list.

<ol>: Defines an ordered (numbered) list.

<li>: Represents a list item within ul or ol.

<div>: Defines a division or a section in an HTML document. Used for layout purposes.

<span>: Defines an inline section in an HTML document. Often used for styling small portions of text.

<input>: Creates an input field for various types of user input.

<form>: Wraps form elements and defines an interactive form on the webpage.

<button>: Creates a clickable button.

<table>: Defines a table.

<tr>: Defines a table row.

<td>: Defines a table cell.

<thead>, <tbody>, <tfoot>: Sections of a table for the header, body, and footer respectively.

<iframe>: Embeds another HTML page within the current page.

<video>: Embeds video content.

<audio>: Embeds audio content.

<script>: Embeds or links to a script, typically JavaScript.

<b>:Renders text in a bold font. Historically used for presentation but semantically less meaningful than <strong>. Often used when no strong emphasis is implied, just visual styling.

eg:This is bold text.

<i>:Renders text in italic. Similar to <b>, it's traditionally used for presentation but has less semantic meaning compared to <em>.

eg:This is italic text.

<u>:Underlines text. Previously used to denote hyperlinks, but in modern web design, it's often avoided for non-link text due to its association with links.

eg:This is underlined text.

<strong>:Indicates strong importance, typically rendering as bold. Semantically stronger than <b>, implying stronger importance or emphasis.

eg:Important: Please read the instructions carefully.

<em>:Emphasizes text, rendering as italic. Semantically signifies emphasis, providing a slight distinction compared to <i>.

eg:Caution: Handle with care.

<mark>:Highlights or marks text. Useful for highlighting portions of text for reference or emphasis.

eg:Select the important points.

<sub>:Renders text as a subscript, typically used for footnotes or mathematical equations where smaller text is needed below the baseline.

eg:H₂O is water.

<sup>:Renders text as a superscript. Commonly used for footnotes, exponents, or citations where text is placed above the baseline.

eg:The area of a circle is π^r².

<strike>:Renders text with a strikethrough line. Often used to denote content that is no longer relevant or has been removed.

eg:~~Old Price:~~ rs20

<code>:Used to denote inline code snippets within a paragraph or text. It maintains spacing and uses a monospaced font.

eg:To install, use the command npm install package-name.

<pre>:Preformatted text that maintains spacing and line breaks as written in the HTML code. Typically used for displaying code blocks or maintaining text formatting. Contains CSS code to style HTML elements.used for displaying code blocks or maintaining text formatting.

function greet() {
    console.log("Hello, world!");
}

How to create a Table in HTML

HTML tables serve an excellent purpose for presenting organized data, such as an address book or product descriptions with prices. However, it's important to note that while tables are ideal for displaying information, they shouldn't be employed to dictate the layout of an entire webpage.

To build a table in HTML, we utilize the <table > tag.

To craft our table, we proceed by constructing each row individually using the <tr> tag for every row.

For the initial row, employing the <th> tag helps delineate the headings for respective columns.

Subsequently, for each consecutive row, employing the <td> tag allows us to specify the data for individual cells.

When you view the document in the browser, the table should look like this:

Name	Age	Country
Amrutha	18	Canada
Ann maria	35	USA
Anush	19	India

In conclusion, HTML serves as the foundation of the web, empowering us to craft engaging and dynamic online experiences. We've explored the basics of HTML structure, delved into various elements and their attributes, and discovered how these components form the backbone of web development. From understanding the significance of tags and attributes to constructing tables, forms, and other essential elements, this journey into HTML provides a solid footing for further exploration. Remember, mastering HTML is not just about creating web pages; it's about architecting the digital landscape we engage with daily.

As you venture forth in your HTML journey, continue experimenting, exploring new elements, and embracing the evolving standards of the web. Let your creativity flourish, shaping the digital world one tag at a time.

Thank you for joining us on this exploration of HTML's boundless possibilities. Keep coding, keep creating, and keep pushing the boundaries of what's possible in the web universe!