Web-Development-blogs

Understanding HTML Tags and Elements

With Mostly used tags included in cheatsheet

Aashish Jha's photo
Aashish Jha
·

9 min read

1. What is HTML?

  • Definition: HTML stands for HyperText Markup Language, known as "the language of the Internet."

  • Purpose: Initially designed for sharing scientific documents but later adapted to describe other types of web content.

  • Core Concept:

    • HTML is a markup language.

    • Elements of an HTML page are represented by tags like <p> (paragraph), <ul> (list), and <table> (table).

    • Tags are used by browsers to render content but are not displayed to users.

2. Historical Evolution of HTML

  • Introduced: In the early 1990s by CERN (European Organization for Nuclear Research) and IETF (Internet Engineering Task Force).

  • Standardization Efforts:

    • The World Wide Web Consortium (W3C) has provided ongoing recommendations and updates.

    • The Web Hypertext Application Technology Working Group (WHATWG) initially worked independently on recommendations.

    • In 2007, W3C and WHATWG collaborated to develop the HTML5 specification.

3. Introduction to HTML5

  • Definition: The latest version of HTML, which provides new features and improvements over earlier versions.

  • Key Objectives of the HTML5 specification:

    1. Define a single language (HTML5) that can be written in HTML or XML syntax.

    2. Ensure compatibility with earlier HTML versions.

    3. Enhance markup for better document structure.

    4. Introduce APIs for new functionalities, including web storage, video, and audio content.

4. Usage and Terminology

  • Developers often use the term HTML to refer to HTML5 unless specifically discussing features unique to HTML5.

  • Use the term HTML5 when emphasizing its new features.

5. Features of HTML5

  • Enhanced Web Development Capabilities:

    • Provides tools for categorizing web pages into sections.

    • Includes features for effective data management, drawing, video, and audio.

  • Cross-Platform Development:

    • Facilitates the creation of applications that work across browsers and portable devices.

    • Combines APIs for a modern, uniform application experience.

  • Improved Flexibility:

    • Enables the development of interactive and engaging websites.

    • Offers functionality similar to desktop applications, enhancing user experience.

6. HTML5 Syntax Overview

  • DOCTYPE Declaration:

    • <!DOCTYPE html> indicates the HTML version.

    • It is not a tag but an instruction to browsers.

  • HTML Document Structure:

    • Root Element: <html> contains all other elements (excluding <!DOCTYPE>).

    • Head Section: Includes metadata, such as:

      • <title>: Specifies the title of the page.

      • Scripts, styles, style sheet links, meta tags, and browser support info.

    • Body Section: Contains all the visible content on the webpage.

7. Understanding the Document Object Model (DOM)

  • Definition: An in-memory representation of a document.

  • Structure: The DOM tree consists of nodes, such as:

    • DOCTYPE Node: Represents the document type.

    • Element Nodes: Headers, paragraphs, and other HTML elements.

    • Text Nodes: Contain the actual text in the document.

    • Comment Nodes: Represent comments in the code.

  • Parsing: Browsers (HTML user agents) parse the HTML markup to construct the DOM tree.

8. XML Syntax in HTML5

  • Differences Between HTML and XML:

    • XML documents require an XML declaration (e.g., <?xml version="1.0"?>).

    • Content type for XML must be specified as an XML media type (e.g., application/xml).

    • XML is stricter than HTML:

      • All tags must be closed.

      • Attributes must have values enclosed in quotes.

      • Syntax must be well-formed; errors cause the parser to stop.

    • HTML is more lenient with unmatched quotes, unclosed tags, and mixed case.

9. When to Use HTML vs. XML

  • HTML: Suitable for most web pages due to its flexibility and browser compatibility.

  • XHTML (XML Syntax of HTML): Ideal when:

    • Using XSLT to transform web pages into other formats.

    • Strict syntax and well-formed documents are required.

Cheatsheet For HTML Tags

1 . Comment tag

This tag denotes a comment in HTML, which is not displayed by a browser but can be useful to hide and document code.

<!-- This is a comment -->
Sr.No.Html TagDescriptionCode Example
1<!-- -->This tag denotes a comment in HTML, which is not displayed by a browser but can be useful to hide and document code.1. <!-- This is a comment -->
2<!DOCTYPE html>All HTML documents must start with this declaration. It tells the browser what document type to expect. Note that this element has no ending tag.<!DOCTYPE html>
3<a href= “path”>link name</a>This tag, called an “anchor tag” creates hyperlinks using the href attribute. In place of path enter the URL or path name to the page you want to link to.<a href="google.com">click to vistit google</a>
4<body>Contains the contents of the HTML document. It should contain all other tags besides the <head> element to display the body of the document.<!DOCTYPE html>
<html>
<head>
<!-- Metadata Here -->
</head>
<body>
<!-- Document Body Here -->
</body>
</html>
5<div>Often used to separate sections in the body of a document in order to style that content with CSS.<div>
This element has no particular semantic meaning but is often used in conjunction with CSS for styling purposes.
</div>
6<h1>Adds a level 1 heading to the HTML document.<h1>This is heading one</h1>
7<head>Contains metadata and should be placed after the <html> tag and before the <body> tag.<!DOCTYPE html>
<html>
<head>
<!-- Metadata Here -->
</head>
<body>
<!-- Document Body Here -->
</body>
</html>
8<html>The root element of an HTML document. All other tags in the document should be contained in this tag.<!DOCTYPE html>
<html>
<head>
<!-- Metadata Here -->
</head>
<body>
<!-- Document Body Here -->
</body>
</html>
9<img src=“path” width=“dim1” height=“dim2”>This tag is used to place an img. In place of path insert a URL or a relative file path to the image location. Other optional attributes include width and height of the image in pixels.<img src=“upload.wikimedia.org/wikipedia/commons/7/7e..” width=“300” height=“300”/>
10<li>Element that creates bulleted line items in an ordered or unordered list. Should be used in conjunction with the <ul> or <ol> tags.<ul>
<li>Bullet point 1</li>
<li>Bullet point 2</li>
</ul>
11<link>Used to link an external document, such as a CSS file, to an HTML document.<head>
<link rel=“stylesheet” href=“styles.css”>
</head>
12<meta>Used to provide metadata about the HTML document.<head>
<meta name=“author” content=“Christopher Moore”>
</head>
13<ol>Element that creates an ordered list using numbers. Should be used in conjunction with the <li> tag.<ol>
<li>Numbered bullet point 1</li>
<li>Numbered bullet point 2</li>
</ol>
14<p>This tag is used to identify a paragraph. It places a line break after the text it is enclosed in.<p>This is a paragraph of text. It can be as short or as long as needed.</p>
15<script>Used to embed JavaScript in an HTML document.<script>
alert(“Hello World”);
</script>
16<table>This tag is used to denote a table. Should be used with <tr> (defines a table row) and <td> (defines a table cell within a row) tags. The <th> tag can also be used to define the table header row.<table>
<tr>
<th>Header cell 1</th>
<th>Header cell 2</th>
</tr>
<tr>
<td>First row first cell</td>
<td>First row second cell</td>
</tr>
<tr>
<td>Second row first cell</td>
<td>Second row second cell</td>
</tr>
</table>
17<td>Denotes a cell within a row, within a table.<td>Cell Content</td>
18<th>Denotes the header cells within a row within a table.<table>
<tr>
<th>Header cell 1</th>
<th>Header cell 2</th>
</tr>
<tr>
<td>First row first cell</td>
<td>First row second cell</td>
</tr>
<tr>
<td>Second row first cell</td>
<td>Second row second cell</td>
</tr>
</table>
19<title>Defines the title of the HTML document displayed in the browser’s title bar and tabs. It is required in all HTML documents. It should be contained in the <head> tag.<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<!-- Document Body Here -->
</body>
</html>
20<tr>Denotes a row within a table.<table>
<tr>
<th>Header cell 1</th>
<th>Header cell 2</th>
</tr>
<tr>
<td>First row first cell</td>
<td>First row second cell</td>
</tr>
<tr>
<td>Second row first cell</td>
<td>Second row second cell</td>
</tr>
</table>
21<ul>Element that creates an unordered list using bullets. Should be used in conjunction with the tag<ul>
<li>Bullet point 1</li>
<li>Bullet point 2</li>
</ul>

Thank you for reading ❤️🧑‍💻

~ Aashish Jha

Web DevelopmentChaiCodeChaiaurcodeHTML5HTML