DEFINITION

Document

BASIC

BLOCK_INLINE

CLASSES

COLORS

COMPUTER_CODE

CSS

DIV

DOCUMENTS

Document
Declaration
Headings
Images
Links
Paragraph

ELEMENTS

Elements
Nested Elements
Not Case Sensitive

EMOJIS

ENTITIES

FILE_PATHS

FORMATTING

HEAD

HEADINGS

HTML_VS_XHTML

HTML ID

IFRAMES

HTML IMAGES

JAVASCRIP

HTML LAYOUT

LINKS

HTML LISTS

PAGE_TITLE

HTML PARAGRAPHS

RESPONSIVE dhtnteyyyyyyy

HTML SEMANTICS

STYLE_GUIDE

STYLES

SYMOLS

Block-level Elements

Address

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Address</title>
</head>
<body>
<h1>The address element</h1>
<address>
Written by <a href="christisalive.net">Rick Brown web master</a>.
Contact me at: rick@christisalive.net Greenfield, Iowa  USA
</address>
</body>
</html>

Results

Written by Rick Brown web master. Contact me at: rick@christisalive.net Greenfield, Iowa USA

Article

  <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Article</title>
</head>
<body>
<h1>The article element</h1>
<article>
<h2>My Statement of Faith</h2>
<p>My statement of faith</p>
</article>
<article>
<h2>How the Apostles Died</h2>
<p>How each one of the apostles died. </p>
</article>
<article>
<h2>Parables of Jesus</h2>
<p>List of the Parables of Jesus from the bible. </p>
</article>
</body>
</html>

Results

My Statement of Faith

My statement of faith

How the Apostles Died

How each one of the apostles died.

Parables of Jesus

List of the Parables of Jesus from the bible.

Aside

           <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Article Element</title>
<body>
<p> My family and I went to
Fort Knox Museum. 
<aside>
<p> Fort Knox Museum is located outside of Fort Knox, Ky The Museum is located just inside one of Fort Knox’s gates.  The museum is made up of military history.</p>       
</aside>
</body>
</html>

Result

My family and I went to Fort Knox Museum. 

Blockquote

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<body>
<h2>John F. Kennedy's Inaugural Address, January 20, 1961 </h2
<blockquote>
And so, my fellow Americans: ask not what your coundtry can do for you -ask what you can do for your country
</blockquote>
</body>
</html>

Results

John F. Kennedy's Inaugural Address, January 20, 1961

And so, my fellow Americans: ask not what your country can do for you - ask what you can do for your country

canvas

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>

Results

dd

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dl, dd, dt tags</title>
</head>
<body>
<h2> <dd> <dl> and <dt> are used together so the example will use them together</h2>
<h2>The elements of dl, dd, and dt </h2>
<p>These three elements are used to create a description list:</p>
<dl>
<dt>New Room</dt>
<dd>Call Builder for cost</dd>
<dt>Old Room</dt>
<dd>Call Contractors to remove it</dd>
</dl>
</body>
</html

Results

<dl> <dd> and <dt> are used together so the example will use them together
The elements of dl, dd, and dt
These three elements are used to create a description list:

New Room

Call Builder for cost

Old Room

Call Contractors to remove it

div

dl

dt

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dl, dd, dt tags</title>
</head>
<body>
<h2> <dd> <dl> and <dt> are used together so the example will use them together</h2>
<h2>The elements of dl, dd, and dt </h2>
<p>These three elements are used to create a description list:</p>
<dl>
<dt>New Room</dt>
<dd>Call Builder for cost</dd>
<dt>Old Room</dt>
<dd>Call Contractors to remove it</dd>
</dl>
</body>
</html

Results

<dl> <dd> and <dt> are used together so the example will use them together
The elements of dl, dd, and dt
These three elements are used to create a description list:

New Room

Call Builder for cost

Old Room

Call Contractors to remove it

fieldset

figcaption

figure

Footer

<footer>  Defines a document or section and you can have several in one document.  It typically contains:  (1) Related Documents (2) Back to Top Links     (3) Sitemap  (4) Contact Information  (5) Copyright Information   (6) Authorship Information.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Footer Element </title>
<style> body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>The footer element</h1>
<footer>
<p>Author: Rick Brown<br>
<a href="mailto:rick@christisalive.net">rick@christisalive.net</a></p>
</footer>
</body>
</html>

Results

Footer Element

The footer element

form

h1-h6

header

hr

li

nav

noscript

ol

p

pre

section

<!DOCTYPE html>
<html lang="en">
<head>
<title>Sections</title>
</head>
<body> 
<section>
<h3 style="color: blue;">
1969 Fastback Mustang </h3>
<p> Manual for Car </p>
<section>
<h3>Manual for engine</h3>
<h3>Manual for Drive shaft</h3>
</section>
</section>
<section>
<h3>Electric Components</h3>
<p>Interior components</p>
<section>
<h3>Transmission</h3>
<h3>Front End </h3>
</section>
</section>
</body>
</html>  

Results

Sections  

1969 Fastback Mustang

Manual for Car

Manual for engine

Manual for Drive shaft

Electric Components

Interior components

Transmission

Front End

ul

video

section

table

Results

Table

A basic HTML table with table width and borders to help
understand the example better.

State School Country
East Union Wolverines Mustangs
United States United States United States

thead

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Table/thead/body/tfoot Elements</title>
<style> table, th, td { border:5px solid black; } thead {color:red;} tbody {color:green;}  tfoot {color:blue;} 
</style>
</head>
<body>
<h5>Table thead, tbody, <br> and tfoot elements -<br> Styled with CSS</h5>
<table>
<thead>
<tr>
<th> State </th>
<th>School </th>
<th>County </th>
</tr>
</thead>
<tbody>
<tr>
<td>Iowa </td>
<td>Woverlines</td>
<td>Adair  </td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Iowa</td>
<td>Mustangs</td>
<td>Des Moines
</tr>
</tfoot>
</table>
</body>
</html>

Results

Table/thead/body/tfoot Elements
Table thead, tbody,
and tfoot elements -
Styled with CSS
State School County
Iowa Woverlines Adair 
Iowa Mustangs Des Moines

tbody

  • Used to group the body content in an HTML table.
    • The <tbody> element is used in conjunction with the <thead> and <tfoot> elements

tfoot

  • Used to group footer content in an HTML table
  • the element must have one or more <tr> tags inside.
  • It is used in conjunction with the <tbody> and <thead> elements to specify each part of a table (footer, body, header)
  • As a child of a table element the tfoot tag must follow after any <caption> , <colgroup> , <thead> , and <tbody> elements.
    The <tfoot> tag must be used in the following context:
  • As a child of a <table> element, after any <caption>, <colroup>, <thead> and <tbody> elements
  • By default the <thead>, <tbody>, <tfoot>, elements will not affect the layout of the table.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Table/thead/body/tfoot Elements</title>
<style> table, th, td { border:5px solid black; } thead {color:red;} tbody {color:green;}  tfoot {color:blue;} 
</style>
</head>
<body>
<h5>Table thead, tbody, <br> and tfoot elements -<br> Styled with CSS</h5>
<table>
<thead>
<tr>
<th> State </th>
<th>School </th>
<th>County </th>
</tr>
</thead>
<tbody>
<tr>
<td>Iowa </td>
<td>Woverlines</td>
<td>Adair  </td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Iowa</td>
<td>Mustangs</td>
<td>Des Moines
</tr>
</tfoot>
</table>
</body>
</html>

Results

Table/thead/body/tfoot Elements
Table thead, tbody,
and tfoot elements -
Styled with CSS
State School County
Iowa Woverlines Adair
Iowa Mustangs Des Moines

Main

  • <Main> tag a structural element that is representing the main content of a document
  • Encapsulating the primary content it is like the central hub of the web page.
      • By wrapping your main content within this tag you are signaling to the developers and browsers that is is the core information that is being sought by the users.
  • Specifies the main content of a document, unique to the document.
  • Shouldn’t contain any content that is repeated across documents such as navigation links, copyright information, sidebars, site logos, and search forms.
  • Have only one main element in a document and must not be a descendant of an <nav>, <header>, <article> and or a <hander>.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Main Element </title>
<body>
<h1>The main element</h1>
<main>
<section>
<h3 style="color: blue;">
1969 Fastback Mustang </h3>
<p> Manual for Car </p>
<section>
<h3>Manual for engine</h3>
<p>Manual for Drive shaft</p>
</section>
</section>
<section>
<h3>Electric Components</h3>
<p>Interior components</p>
<section>
<h3>Transmission</h3>
<p>Front End </p>
</section>
</section>
</main>
</body>
</html>

Results

Main Element

The main element

1969 Fastback Mustang

Manual for Car

Manual for engine

Manual for Drive shaft

Electric Components

Interior components

Transmission

Front End