<h3>Paragraphs</h3>
<p>How many sentences are in a paragraph? It is important to note that there is a great deal of variety in how long a paragraph is and there is not a minimum or maximum number of sentences that it must have to fit its definition. Some writers will opt to use very short paragraphs, while others will include dozens of sentences in their paragraphs. It is also important to know that most writers separate lines of dialogue into paragraphs, so if a character only speaks a single line, it will be its own paragraph.</p>
More Info<h3>Blockquotes</h3>
More Info<blockquote> <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text. </p> </blockquote>
<blockquote> <p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p></blockquote>
<h1>Lists</h1>
<h4>Definition list</h4>
- <dl><dt>Definition List Title</dt>
- <dd>This is a definition list division.</dd></dl>
<h4>Ordered List</h4>
- <ol><li>List Item 1</li>
- <li>List Item 2</li>
- <li>List Item 1</li></ol>
<h4>Unordered List</h4>
- <ul><li>List Item 1</li>
- <li>List Item 2</li>
- <li>List Item 1</li></ul>
<h3>Horizontal Rule<h3>
<h1>Document Elements in HTML</h1>
| Element | Description |
|---|---|
| <html></html> | It includes the entire document. All other elements fall between these two tags |
| <body></body> | Shows the content of the whole HTML document |
| <title></title> | Defines the HTML document’s title, which appears in the browser’s title bar or tab |
| <script></script> | An element used to embed scripts, like a JavaScript file. |
| <nonscript></nonscript> | It provides alternate content for scripts. |
| <link></link> | Establishes a link between an external source and the HTML document |
| <meta></meta> | It provides metadata information about the HTML document. |
| <style></style> | Contains CSS files that determine how the page looks |
| <head></head> | Contains all the important information for you HTML Document |
| <article></article> | Defines independent, self-contained content |
| <section></section> | It represents a section within an HTML document. |
| <aside></aside> | Defines content aside from the page content |
| <details></details> | Defines additional details that the user can view or hide |
| <figcaption></figcaption> | Defines a caption for a figure element |
| <figure></figure> | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc |
| <footer></footer> | Defines a footer for a document or section |
| <header></header> | Specifies a header for a document or section |
| <main></main> | Specifies the main content of a document |
| <nav></nav> | Defines navigation links |
| <summary></summary> | Defines a visible heading for a details element |
| <base></base> | Specifies the base URL or target for all relative URLs in the document |
More Info
<h1>HTML Document Template</h1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Description of your website">
<title>My Website</title>
<link rel="stylesheet" href="./style.css">
<link rel="icon" href="./favicon.ico" type="image/x-icon">
</head>
<body>
<main>
<h1>Welcome to My Website</h1>
</main>
<script src="index.js"></script>
</body>
</html>
More Info
<h1>Formatted Text</h1>
<a href="link to website">This is a text hyperlink to a wesbite or page<a>.
<strong>Strong is used to indicate importance.</strong>
<em>This type of text is used for added emphasis.</em>
The <b>b element</b> is stylistically different text from normal text, without any special importance.
The <i>i element</i> is text that is offset from the normal text.
The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.
<del>This text is deleted</del> and
<ins>This text is inserted</ins>.
<s>This text has a strikethrough</s>.
Superscript<sup>®</sup>.
Subscript for things like H<sup>2</sup>O.
<small>This small text is small for for fine print, etc.</small>
Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr>
<q
cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This
text is a short inline quotation. See the speech
marks?</q>
<cite>This is a citation.</cite>
The <dfn>dfn element</dfn> indicates a definition.
The <mark>mark element</mark> indicates a highlight.
The <var>variable element</var>, such as x = y.
The time element:
'br' element produces a line break in text
<br>
<details>
<bdo dir="rtl">This text will go right-to-left.
<bdo>
<span>'span' element is used to group inline-elements
in a document</span>
<summary>'summary' element specifies a visible heading for the 'details' element</summary>
'details' element represents disclosure widget from which the user can obtain additional information or controls</details>
<div> 'div' element is a block-level and is used to
group other elements </div>
<data>'data' element links a given content with a
machine-readable translation</data>
The address element:
<address>123 Main St, Anytown, Anystate</address>
'code' element represents a fragment of computer code:<code>let x = 10;</code>
'samp' element represents sample output from a computer
program:<samp>Sample output</samp>
'kbd' element represents user input<kbd>Ctrl + S</kbd>
'pre' element represents preformatted text and is to be
displayed precisely as it is written in the HTML file.
More Info
<pre>
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ </pre>
<h3>The Table element<h3>
| <thread><tr><th>Table Heading 1<th> | <th>Table Heading 2</th> | <th>Table Heading 3</th> | <th>Table Heading 4</th> | <th>Table Heading 5</th></tr></thread> |
|---|---|---|---|---|
| <tfoot><tr><th>Table Footer 1</th> | <th>Table Footer 2</th> | <th>Table Footer 3</th> | <th>Table Footer 4</th> | Table Footer 5</th></tr></tfoot> |
| <tbody><tr><td>Table Cell 1</td> | <td>Table Cell 2</td> | <td>Table Cell 3</td> | <td>Table Cell 4</td> | <td>Table Cell 5</td> |
| <td>Table Cell 6</td> | <td>Table Cell 7</td> | <td>Table Cell 8</td> | <td>Table Cell 9</td> | <td>Table Cell 10</td> |
| <td>Table Cell 11</td> | <td>Table Cell 12</td> | <td>Table Cell 13</td> | <td>Table Cell 14</td> | <td>Table Cell 15</td> |
| <td>Table Cell 16</td> | <td>Table Cell 17</td> | <td>Table Cell 18</td> | <td>Table Cell 19</td> | ;<td>Table Cell 20</td></tr><tbody></table> |
More Info
<h1>Embedded Content</h1>
<h3>Image Element<h3>
<Img> element, with a
<figcaption>
More Info
<h3>Picture Element<h3>
<picture><source media="(min-width: 650px)" srcset="img_pink_flowers.jpg" /><source media="(min-width: 465px)" srcset="img_white_flower.jpg" /><img src="img_orange_flowers.jpg" alt="Flowers" style="width: auto" /></picture>
The 'picture' element contains zero or more 'source' elements and one 'img' element to provide versions of an image for different display/device scenarios.
More Info<h3>Audio Element<h3>
<audio controls="link to audio">Audio</audio>
More Info
<h3>Video Element<h3>
<video controls="link to video">Video</video>
More Info
<h3>Canvas Element<h3>
<canvas id="myCanvas" style="border:1px solid #000000;"></canvas>
The above canvas element is only a container for graphics. You must use JavaScript to actually draw the graphics
More Info
<h3>Meter Element<h3>
<meter value="2" min="0" max="10">2 out of 10</meter>
The meter HTML element represents either a scalar value within a known range or a fractional value.
More Info
<h3>Progress Element<h3>
<progress id="file" value="32" max="100">32%</progress>
The progress tag is used to represent the completion progress of a task.
More Info
<h3>SVG Element<h3>
<svg width="100px" height="100px">circle cx="100" cy="100" r="100" fill="#1fa3ec"</circle></svg>
SVG stands for (Scalable Vector Graphics), which creates graphics for your webpage. Has methods for drawing paths, rectangles, circles, polygons, text, and much more.
More Info
<h3>iFrame Element<h3>
<iframe src="https://html.energy/" height="300"></iframe>
Basically an HTML iframe displays a webpage in your webpage.
More Info
<h3>Area & Map Element<h3>
<img src= "https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png" alt="alt_attribute" width="300" height="119" class="aligncenter" usemap="#shapemap" />
<map name="shapemap">
<area shape="poly" coords="59, 31, 28, 83, 91, 83" href= "https://media.geeksforgeeks.org/wp-content/uploads/20190227165802/area2.png" alt="Triangle">
<area shape="circle" coords="155, 56, 26" href= "https://media.geeksforgeeks.org/wp-content/uploads/20190227165934/area3.png" alt="Circle">
<area shape="rect" coords="224, 30, 276, 82" href= "https://media.geeksforgeeks.org/wp-content/uploads/20190227170021/area4.png" alt="Square">
</map>
The area HTML element defines an area inside an image map that has predefined clickable areas. An image map allows geometric areas on an image to be associated with hypertext links.
More Info<h3>Object Element<h3>
<object width="100%" height="200px" data="everyElement.html"></object>
The object element defines an embedded object within an HTML document. It was designed to embed plug-ins (like Java applets, PDF readers, and Flash Players) in web pages, but can also be used to include HTML in HTML: