HTML, Hypertext Markup Language
invented in 1991 by Tim Berners-Lee, HTML5 is latest version supported by modern web browsers
Basic Html elements
HTML Tag <html></html>
SSpecifies an HTML document. The HTML <html> element (or HTML root element) represents the root of an HTML document. All other elements must be descendants of this one.
The <html> element, which is the first in an HTML document, is known as the root element. While it may be implied or optional in HTML, it must be explicitly opened and closed in XHTML.
Note: There can be only one <html> element in a document.
Copy
<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>HEAD Tag <head>
First element of the HTML document. Collection of metadata for the Document. The HTML <head> element provides general information (metadata) about the document, including its title and links to its scripts and style sheets.
TITLE Tag <title></title>
Document title or name. The HTML <title> element defines the title of the document, shown in a browser’s title bar or on the page’s tab. It can only contain text, and any contained Tags are ignored.
Note: Don’t use the title tag inside body tag, only use in head tag
Copy
<head>
<title>This is the page title</title>
</head>BODY Tag <body></body>
Main content of the document. The HTML <body> element represents the content of an HTML document.
Note: There can be only one <body> element in a document.
Copy
<body>
<h1>Content start now</h1>
</body>BR Tag <br/>
Line break. The HTML element line break <br> produces a line break in text (carriage return). Do not use <br> to increase the gap between lines of text; use the CSS margin property or the <p> element.
Note: It doesn't create a visible line or divider; it simply moves the text or content following it to the next line.
Copy
<div>
<h2>Line Break</h2>
<h2>Line <br /> Break</h2>
</div>HR Tag <hr/>
Paragraph-level thematic break. The HTML <hr> element represents a thematic break between paragraph-level elements (for example, a change of scene in a story, or a shift of topic with a section).
Note: In previous versions of HTML, it represented a horizontal rule. It may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic rather than presentational terms.
Copy
<h2>horizontal line
<hr />
</h2>P Tag <p><p>
Paragraph content. The HTML <p> element (or HTML paragraph element) represents a paragraph of text. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by vertical blank space and/or first-line indentation.
The paragraphs are block-level elements.
Copy
<p>It's a paragraph</p>Formatting HTML Elements
ABBR Tag <abbr></abbr>
Abbreviation or acronym. The <abbr> element (or HTML abbreviation element) represents an abbreviation and optionally provides a full description for it. If present, the title attribute must contain this full description and nothing else.
Copy
<p>This is <abbr title="Laugh Out Loud">LOL</abbr></p>means It helps in explain short forms like "LOL" by showing their full meanings when you hover over them. ( when you hover for 1 sec then it will show )
ADDRESS Tag <address></address>
The HTML <address> element supplies contact information for its nearest <article> or <body> ancestor; in the latter case, it applies to the whole document.
The <address> tag carries semantic meaning, indicating that the enclosed content represents contact information.
Copy
<address>
Ohh Soo<br>
123 Main Street<br>
Anytown, USA
</address>B Tag <b></b>
The <b> tag is used to make text bold, changing its appearance to stand out more prominently compared to surrounding text. It doesn't convey any semantic meaning. This means that it's not recommended for indicating important or emphasized text from a semantic perspective.
Copy
<p>
I am <b>Bold</b>
</p>BDI Tag <bdi></bdi>
The <bdi> tag isolates a span of text, ensuring that its direction is preserved independently of the surrounding text. This is especially important for text in languages or scripts that are read from right to left (RTL), such as Arabic or Hebrew, within a predominantly left-to-right (LTR) document, or vice versa.
The <bdi> tag carries semantic meaning, indicating that the enclosed text should be treated as a separate unit with its own directionality.
Using the <bdi> tag helps ensure proper rendering and readability of text for users who are reading content in different languages or scripts.
Attributes (modifiers) = dir +
Copy
<p>This is some <bdi>مرحبا بالعالم</bdi> text.</p>BDO Tag <bdo></bdo>
The <bdo> tag allows you to override the default directionality of text within a document. It specifies whether the text should be displayed from left to right (LTR) or from right to left (RTL), regardless of the overall directionality of the document.
The <bdo> tag carries semantic meaning, indicating that the enclosed text should be treated as a separate unit with its own directionality.
Using the <bdo> tag helps ensure proper rendering and readability of text for users who are reading content in different languages or scripts.
Attributes (modifiers) = dir +
Copy
<p> This is some <bdo dir="rtl">ah looc RTL txet</bdo> inside it.</p>
<!-- it will show as - some cool LTR text -->BLOCKQUOTE Tag <blockquote>
Quote from another source. The HTML <blockquote> element (or HTML Block quotation element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see notes for how to change it).
A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.
The <blockquote> tag carries semantic meaning, indicating that the enclosed text is a quotation from another source. This helps improve the structure and accessibility of the document.
Attributes (modifiers) = cite +
Copy
<blockquote>
<p>
Why is it, that the Uchiha clan is known by all and feared by all?
I will show you what the Sharingan can do
when wielded by a true heir of the bloodline.
</p>
<footer>— Itachi Uchiha, <cite><a href="https://g.co/kgs/KZARpia">Naruto</a></cite></footer>
</blockquote>CITE Tag <cite>
Title of a referenced piece of work. The HTML citation element (<cite>) represents a reference to a creative work. It must include the title of a work or a URL reference, which may be in an abbreviated form according to the conventions used for the addition of citation metadata.
CODE Tag <code>
Fragment of computer code. The HTML code element (<code>) represents a fragment of computer code. By default, it is displayed in the browser’s default monospace font.\
The <code> tag does not interpret or execute the code; it simply displays it as text within the document. The <code> tag is an inline element, meaning it does not force a line break before or after the code snippet. It can be used within paragraphs or other text elements.
The <code> tag carries semantic meaning, indicating that the enclosed text represents a piece of code or programming instruction.
Copy
<p>This is
<code>console.log('Hello, world!');</code>
</p>DEL Tag <del>
Text that has been removed during document editing. The HTML deleted text element (<del>) represents a range of text that has been deleted from a document. This element is often (but need not be) rendered with strike-through text.
The <del> tag carries semantic meaning, indicating that the enclosed text represents content that has been removed.
Attributes (modifiers) = cite | datetime +
Copy
<p>This paragraph contains some <del>deleted text</del>.</p>DFN Tag <dfn>
Defining instance of a term. The HTML definition element (<dfn>) represents the defining instance of a term. By default text in <dfn> tag is rendered in italic font style.
The <dfn> tag carries semantic meaning, indicating that the enclosed text represents a definition term.
Copy
<p>The <dfn>HTML</dfn> stands for HyperText Markup Language.</p>EM Tag <em>
Text that should be emphasized. The HTML element emphasis <em> marks text that has stress emphasis ( refers to giving special importance ). The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.
You might use the <em> tag when you want to highlight specific words or phrases in a sentence for emphasis or importance.
Using semantic HTML elements like <em> improves accessibility by providing additional context to screen readers. Visually impaired users rely on these cues to understand the structure and meaning of the content.
Copy
<p>This is an <em>important</em> point to consider.</p>
<p>
This task is
<em>very
<em>urgent</em>
</em>
and needs to be completed immediately.
</p>In this example, the word "urgent" is nested within another <em> element, indicating a greater degree of emphasis compared to if it were not nested. This can be useful for expressing nuanced levels of importance or stress within your text.
I Tag <i>
Text in an alternate voice or mood, such as a technical term. The HTML <i> element represents a range of text that is set off from the normal text for some reason, for example, technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type.
The <i> tag is used to denote text that is in an alternate voice or mood. This could include idiomatic phrases, technical terms, or book titles
Copy
<p>
<i>Important Note:</i>
Please remember to save your work frequently.
</p>INS Tag <ins>
Text that has been inserted during document editing. The HTML <ins> element (or HTML Inserted Text) HTML represents a range of text that has been added to a document.
By default, browsers often render text within <ins> tags with an underline.
The <ins> tag provides semantic meaning to the text it encloses, indicating that it is an addition or insertion into the document.
Attributes (modifiers) = cite | datetime +
Copy
<p>The price has been updated to <ins>$10</ins> per unit.</p>KBD Tag <kbd>
Example input (usually keyboard) for a program. The HTML keyboard input element (<kbd>) represents user input and produces an in-line element displayed in the browser’s default monospace font.
The <kbd> tag provides semantic meaning to the text it encloses, indicating that it represents keyboard input.
Copy
<p>Save the document by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd></p>MARK Tag <mark>
Text highlighted for referencing elsewhere. The HTML mark element (<mark>) represents highlighted text, i.e., a run of text marked for reference purposes, due to its relevance in a particular context. For example, it can be used on a page showing search results to highlight every instance of the searched-for word.
By default, browsers often render text within <mark> tags with a yellow background color
The <mark> tag provides semantic meaning to the text it encloses, indicating that it has been highlighted or marked for some purpose.
Copy
<p>
The
<mark>deadline for submitting the report</mark>
is next Friday.
</p>