My Statement of Faith
My statement of faith
<acronym>
- It was used up to HTML 4 to define an acronym but it is no longer supported in HTML 5
<abbr>
- Defines an abbreviation or an acronym, like "mr", "DR", "ASAP", "HTML", and "CSS"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>The <abbr title="United State Army flag">Flag </abbr> was founded in 1776.</p>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>The <abbr title="United State Army flag">Flag </abbr> was founded in 1776.</p>
</body>
</html>
<abbr> Results
The Flag was founded in 1776.
<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>
<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>
<address> Results
Written by Rick Brown web master. Contact me at: rick@christisalive.net Greenfield, Iowa USA<article>
- The <article> tag specifies independent, self-contained content.
- An article should make sense on its own
- It should be possible to distribute it independently from the rest of the site.
- An article should make sense on its own and Potential sources for the <article> element:
- Forum post
- Blog post
- News story
<!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>
<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>
<article> Results
How the Apostles Died
How each one of the apostles died.
Parables of Jesus
List of the Parables of Jesus from the bible.
<b>
- With out marking it as important as <strong> but will make the text bold.
<!DOCTYPE html>
<html lang="en">
<head>
<title><b></title>
</head>
<body> <p>This is what normal text would look like and then this is what it will look like with the b element
</body>
</html>
<html lang="en">
<head>
<title><b></title>
</head>
<body> <p>This is what normal text would look like and then this is what it will look like with the b element
</body>
</html>
<b> Results
This is what normal text would look like and then this is what it will look like with the b element
<bdi>
- BDI stands for Bi-Directional Isolation.
- The <bdi> tag isolates a part of text that might be formatted in a different direction from other text outside it.
- This element is useful when embedding user-generated content with an unknown text direction.
<!DOCTYPE html>
<html lang="en">
<head>
<title>bdi </title>
</head>
<body>
<u>
<li>User<bdi>إيان</bdi>
: 10 points </li>
<li>User <bdi>Robert</bdi>: 60 points</li>
<li>User <bdi>Richardo</bdi>: 80 points</li> </li>
</ul>
</body>
</html>
<bdi>Results
- Userإيان : 10 points
- User Robert: 60 points
- User Richardo: 80 points
<bdo>
- Used to override or change the current text direction.
<!DOCTYPE html>
<html lang="en">
<head>
<title>bdo </title>
</head>
<body>
<h1>The bdo element</h1> <p>Used to override or change the current text direction.</p>
<p><bdo dir="rtl">Used to override or change the current text direction.<bdo></p>
</body>
</html>
<bdo>Results
Used to override or change the current text direction. (the below line is this one using bdo)
Used to override or change the current text direction.
<big>
- The <big> element was used to cause the selected text to appear one size larger than the surrounding text
- The big tag is no longer supported in HTML5 Use CSS
<blockquote>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<blockquote> Results
<center>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<center> Results
<cite>
- Defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).
- Usually the text is in italic and not the name of the person.
- The text in the <cite> element usually renders in italic.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cite Element </title>
<body>
<h1>The cite element</h1>
<img
src="martin_luther_king.jpg" width="200" height="200" alt=""/>
<p> Photo of <cite> Martin Luther King Great Saying </cite> by unknown </p>
</body>
</html>
<cite>Results
The cite element
Photo of Martin Luther King Great Saying by unknown
<code>
- Defines some text as computer code in a document.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Code Element</title>
</head>
<body>
<h1>Code Element</h1>
<p>The HTML <code>button</code> tag defines a clickable button.</p>
<p>The CSS <code>color</code> property defines the color of a text.</p>
</body>
</html>
Code Element
<html lang="en">
<head>
<title>Code Element</title>
</head>
<body>
<h1>Code Element</h1>
<p>The HTML <code>button</code> tag defines a clickable button.</p>
<p>The CSS <code>color</code> property defines the color of a text.</p>
</body>
</html>
<code> Results
Code Element
The HTML button tag defines a clickable button.
The CSS color property defines the color of a text.
<del>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<del> Results
<dfn>
- Stands for the "definition element", specifies a term that is going to be defined within the content.
- Tag must also contain the definition/explanation for the term.
<!DOCTYPE html>
<html>
<body>
<p><dfn id="html-def">Bible"</dfn> has out sold any other book.</p>
<p>Any other book...</p>
<p>Any other book...</p>
<p>Any other book...</p>
<p>Any other book...</p>
<p>Learn <a href="https://christisalive.net/bible_commentary.html">the Bible </a> now.</p>
</body>
</html>
<dfn> Results
Bible" has out sold any other book.
Any other book...
Any other book...
Any other book...
Any other book...
Learn the Bible now.
<em>
- Used to define emphasized text.
- The content inside is typically displayed in italic.
- Screen reader will pronounce the words in <em> with an emphasis, using verbal stress.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> <em> Element </title>
<style> em {
font-style: italic; }
</style>
</head>
<body>
<p>An em element is displayed like this:</p>
<p> Help there is a <em>Fire!</em>
</body>
</html>
<em> Results
An em element is displayed like this:
Help there is a Fire!
<font>
- It was used to define font, color, and size for text, Not supported in HTML5
<i>
- Defines a part of text in an alternate voice or mood.
- Typically displayed in italic.
- Often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.
- Only use when there is not a more appropriate semantic element, such as: <dfn>, <cite>, <mark>, <strong>, <em>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> i Element </title>
<body>
<h1>The i element</h1>
<p><i>1776</i> year on the United States Army
Flag.</p>
<p>The <i>USS Arizona</i>, Sunk at Pearl
Harbor</p>
</body>
</html>
i Element
<html lang="en">
<head>
<meta charset="utf-8">
<title> i Element </title>
<body>
<h1>The i element</h1>
<p><i>1776</i> year on the United States Army
Flag.</p>
<p>The <i>USS Arizona</i>, Sunk at Pearl
Harbor</p>
</body>
</html>
<i> Results
1776 year on the United States Army Flag.
The USS Arizona, Sunk at Pearl Harbor
<mark>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<mark> Results
<meter>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<meter> Results
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<pre>Results
<progress>progress>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<progress>progress>Results
<q>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<q> Results
<rp>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<rp>Results
<rt>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body
</body>
</html>
<rt>Results
<ruby>
- The <ruby> tag specifies a ruby annotation. A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<ruby> Results
<s>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<s> Results
<samp>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<samp> Results
<small>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<small> Results
<strike>
- Defines strikethrough text
- Not supported in HTML5 Use <del> or <s> in CSS
<strong>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<strong> Results
<sub>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<sub> Results
<sup>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<sup> Results
<template>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body
</body>
</html>
<template> Results
<tt>
- Defines teletype
- Not supported in HTML5 Use CSS
<wbr>
- The <wbr> (Word Break Opportunity) tag specifies where in a text it would be ok to add a line-break.
- You can use the <wbr> element to add word break opportunities. When a word is too long, the browser might break it at the wrong place.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML</title>
<link href="mystyle2.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>The wbr element</p>
<p>Try to shrink the browser window, to view how the very long word in
the paragraph below will break:</p>
<p>This word could break any where by it self but is a veryveryveryveryveryveryveryveryveryveryveryvery<wbr>bigbigbigbigbigbigbigbigbigbigbiglong
wordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>
</body>
</html>
<wbr> Results
Try to shrink the browser window, to view how the very long word in the paragraph below will break:
This word could break any where by it self but is a veryveryveryveryveryveryveryveryveryveryveryvery