HTML Tutorial

HTML is considered a declarative language because it focuses on describing the structure and content of a web page without specifying how to achieve it. Instead of giving step-by-step instructions for rendering elements, HTML allows developers to declare the desired structure and let the browser handle the rendering process

HTML Explained

HTML (Hypertext Markup Language) is the standard language used to create and structure content on the web. It provides the foundational structure of a webpage by defining elements such as headings, paragraphs, links, images, tables, and more. HTML is used to describe the content and its structure on a webpage, which is then interpreted by web browsers to display the content in a user-friendly way.

Basic Concepts of HTML

  1. Elements and Tags:

    • HTML is composed of elements, which are the building blocks of a webpage. Elements are defined using tags.
    • Tags: Tags are the keywords surrounded by angle brackets (< >). Tags usually come in pairs: an opening tag and a closing tag, like <p> and </p>. Some tags are self-closing, like <img />.

    Example:

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

  2. Attributes:

    • Attributes provide additional information about HTML elements. They are included in the opening tag and usually consist of a name and value pair.

    Example:

    
<a href="https://www.example.com">Visit Example </a>
<img src="image.jpg" alt="An image description" />

  3. Document Structure:

    • HTML documents have a specific structure that includes a <!DOCTYPE> declaration, an <html> root element, and two main sections: <head> and <body>.

    Example:

    
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is where the content goes.</p>
</body>
</html>

Detailed Explanation of HTML Components

  1. <!DOCTYPE html>:

    • The <!DOCTYPE> declaration defines the document type and version of HTML. For modern HTML documents, <!DOCTYPE html> is used, which refers to HTML5.

  2. <html> Element:

    • The <html> element is the root element of an HTML document. It encloses all the content on the webpage.

  3. <head> Element:

    • The <head> element contains metadata about the document, such as the title, character set, linked stylesheets, and scripts. This information is not directly displayed on the page.

    Common Elements in the Head:

    • <title>: Sets the title of the webpage, shown in the browser tab.
    • <meta charset="UTF-8">: Defines the character encoding.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the webpage is responsive, adapting to different devices.
    • <link rel="stylesheet" href="styles.css">: Links to an external CSS file for styling.
    • <script src="script.js"></script>: Links to an external JavaScript file.

  4. <body> Element:

    • The <body> element contains all the content that is displayed on the webpage, such as text, images, videos, and links.

    Common Elements in the Body:

    • Headings: <h1> to <h6> tags are used to create headings, with <h1> being the most important and <h6> the least.
    • Paragraphs: <p> tags are used to define paragraphs.
    • Links: <a> tags are used to create hyperlinks.
    • Images: <img> tags are used to embed images.
    • Lists: <ul> (unordered list), <ol> (ordered list), and <li> (list item) tags are used to create lists.
    • Tables: <table>, <tr> (table row), <th> (table header), and <td> (table data) tags are used to create tables.
    • Forms: <form>, <input>, <textarea>, <button>, and other tags are used to create forms for user input.

Example of a Simple HTML Document


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple HTML Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML document.</p>
<a href="https://www.example.com">Visit Example</a>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<img src="image.jpg" alt="An example image">
</body>
</html>

Types of Markup Languages

There are two types of markup and hence there exists two types of markup languages. They are procedural and generalized.

Procedural Markup Languages

- Procedural markup is typified by its use in typesetting and publishing systems, including word processors.

Generalized Markup Languages (GML)

There is a major shortcoming in the procedural markup languages. That is, if we intend to extract information from the documents, procedural markup language is found wanting. To meet this challenge, a generalized markup language marks up documents in a different way. The characteristics of these languages are:

1. The elements have logical names, rather than expressing detailed formatting instructions. For example, an element H1 is being used to mark up text that is intended to be a first-level header.

2. Software applications that read documents marked up using a GML are free to present them as they see fit, using formatting rules for particular elements that are either defined internally, or specified elsewhere. When displayed in the screen, the H1 element could be associated with a particular combination of font size and weight.

GML elements usually involve both start and end tags so that the original content is fully contained inside an element. Also there is no hint about how this document should be presented. That is, the web browsers are free to reflect the meanings of these elements. The most commonly used generalized markup language is HTML for web documents and WML for mobile contents.

Generalized Markup Rule-sets Each GML has its own elements, its own rules, and its own particular area of application and in order for the language to function properly as a language, those must all somehow be defined. GMLs are themselves written using Generalized Markup Rule-sets (GMRS), also called meta-languages. The two famous meta-languages are Standard Generalized Markup Language (SGML) and the Extensible Markup Language (XML). In a way, XML is a subset of SGML and WML is derived from XML.

Recently another markup language called as Extensible HTML (XHTML) for future web publishing came out. XHTML is a reformulation of HTML 4 in XML. XHTML has to be designed to avoid some undesirable features of HTML.

Though all these features can be accomplished easily using XML, XHTML has been formulated for keeping the large investment made in HTML.

Below is the list of markup languages :-

  1. Application Markup Language (AppML)
  2. Architecture Description Markup Language (ADML)
  3. Artificial Intelligence Markup Language (AIML)
  4. ASN.1 Markup Language (AML)
  5. Astronomical Instrument Markup Language (AIML)
  6. Astronomical Markup Language (AML)
  7. Automatic Site Markup Language (ASML)
  8. Bean Markup Language (BML)
  9. Better Markup Language (BML)
  10. Bibliography Markup Language (BibML)
  11. Bioinformatics Sequence Markup Language (BSML)
  12. BIOML -  BIOpolymer Markup Language
  13. Board Game Markup Language (BGML)
  14. Business Rules Markup Language (BRML)
  15. Comics Markup Language (ComicsML)
  16. Chemical Markup Language( CML)
  17. Claris Dynamic Markup Language (CDML)
  18. DARPA Agent Markup Language (DAML)
  19. Description Logic Markup Language (DLML)
  20. Directory Services Markup Language (DSML)
  21. Document Template Markup Language (DTML)
  22. Dynamic Hypertext Markup Language (DHTML)
  23. Dynamic Markup Language (DML )
  24. E-business eXtensible Markup Language (ebXML)
  25. Earth Science Markup Language (ESML)
  26. Environmental Markup Language (EML)
  27. Financial Products Markup Language (FpML)
  28. eXtensible Application Markup Language (XAML)
  29. eXtensible rights Markup Language (XrML)
  30. eXtensible Telephony Markup Language (XTML)
  31. eXtensible Graph Markup and Modeling Language (XGMML)
  32. eXtensible Hypertext Markup Language (XHTML)
  33. eXtensible Markup Language (XML) 
  34. FAQ
  35. Farleden Dynamic Markup Language
  36. Field Data Markup Language  (FDML)
  37. FileMaker Dynamic Markup Language (FDML)
  38. Financial products Markup Language (FpML)
  39. Financial Services Markup Language (FSML)
  40. Forms Data Markup Language (FDML)
  41. Form Document Markup Language (FDML)
  42. Forms Definition Markup Language (FDML)
  43. Forms Markup Language (FML)
  44. Gene Expression Markup Language (GEML)
  45. Geometry Description Markup Language (GDML)
  46. Geography Markup Language (GML)
  47. Graffiti Markup Language (GML)
  48. Handheld Device Markup Language (HDML)
  49. Hypertext Markup Language (HTML) 
  50. Human Markup Language (HumanML)
  51. Human Resources Markup Language (HRML)
  52. ICAAP eXtended Markup Language (IXML)
  53. Image Markup Language (IML)
  54. Instrument Control Markup Language (ICML)
  55. Instrument Markup Language (IML)
  56. International Development Markup Language (IDML)
  57. Java Speech Markup Language (JSML)
  58. Karst Markup Language (KML)
  59. Koala Bean Markup Language (KBML)
  60. Lambda Markup Language (LML)
  61. Learning Material Markup Language (LMML)
  62. Legal Extensible Markup Language (LegalXML)
  63. Liturgical Markup Language (LitML)
  64. Log Markup Language (LOGML)
  65. Mail Markup Language (MML)
  66. Maker Markup Language (MML)
  67. Market Data Markup Language (MDML)
  68. Mathematical Markup Language (MathML)
  69. Meaningful Text Markup Language (MTML)
  70. Medical Markup Language (MML)
  71. Mind Reading Markup Language (MRML)
  72. Modest Markup Language (MML)
  73. Multimedia Retrieval Markup Language (MRML)
  74. Music Markup Language (MML)
  75. Outline Processor Markup Language (OPML)
  76. Opera Binary Markup Language(OBML)
  77. Pet Name Markup Language (PNML)
  78. Procedural Markup Language (PML)
  79. Predictive Model Markup Language
  80. Printing Industry Markup Language (PrintML)
  81. Question and Answer Markup Language (QAML)
  82. Quest Markup Language (QML)
  83. Relational-Functional Markup Language (RFML)
  84. Research Information Exchange Markup Language (RIXML)
  85. Rule Markup Language (RuleML)
  86. RESTful API Markup Language (RAML)
  87. Security Assertion Mark-up Language (SAML)
  88. Security Services Markup Language (S2ML)
  89. Simple Markup Language (SML)
  90. Simulation Module Markup Language (SiMMaL)
  91. Spacecraft Markup Language (SML)
  92. Standard Generalized Markup Language (SGML)
  93. Synchronization Markup Language [SyncML]
  94. Synthesis Markup Language
  95. Systems Biology Markup Language (SBML)
  96. Theological Markup Language (ThML)
  97. Transaction Authority Markup Language (XAML)
  98. Trading Partner Agreement Markup Language (TPAML)
  99. Textile markup language (TML)
  100. Transaction Authority Markup Language (XAML)
  101. Turing Machine Markup Language (TMML)
  102. Tutorial Markup Language (TML)
  103. ThML: Theological Markup Language
  104. Universal Rule Markup Language (URML)
  105. Virtual Reality Markup Language (VRML)
  106. Voice Extensible Markup Language (VoiceXML)
  107. Why Markup Language (YML)
  108. Wireless Markup Language (WML)
  109. Yet Another Markup Language (YAML)

How HTML Works with CSS and JavaScript

CSS (Cascading Style Sheets):

  • CSS is used to control the presentation, formatting, and layout of the HTML content. It allows developers to apply styles such as colors, fonts, and spacing to HTML elements.
< p>Example:

<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
</style>

JavaScript:

JavaScript is a scripting language used to create dynamic content on a webpage. It can be used to manipulate the DOM (Document Object Model), handle events, validate forms, and much more.

Example:

<script>
function showMessage() {
alert('Hello, World!');
}
</script>
<button onclick="showMessage()">Click Me</button>

Importance of HTML

  • Foundation of Web Development: HTML is the backbone of all web pages. It structures the content that users interact with.
  • SEO and Accessibility: Proper HTML structure is crucial for search engine optimization (SEO) and making websites accessible to users with disabilities.
  • Cross-Browser Compatibility: HTML ensures that web content can be displayed c onsistently across different web browsers.

Conclusion

HTML is the essential language of the web, defining the structure and content of web pages. It works in harmony with CSS and JavaScript to create visually appealing and interactive websites. Understanding HTML is fundamental to web development, as it forms the base upon which all other web technologies are built.

Aricles

  1. HTML Explained
  2. Basic Concepts of HTML
  3. Detailed Explanation of HTML Components
  4. Example of a Simple HTML Document
  5. Types of Markup Languages
  6. How HTML Works with CSS and JavaScript
  7. Importance of HTML
  8. Conclusion