revision:
There are two display values: block and inline.
HTML block-level elements always start on a new line and take up the full width available (stretches out to the left and right as far as it can):
<address>,
<article>,
<aside>,
<blockquote>,
<canvas>,
<dd>,
<div>,
<dl>,
<dt>,
<fieldset>,
<figcaption>,
<figure>,
<footer>,
<form>,
<h1>- <h6>,
<header>,
<hr>,
<li>,
<main>,
<nav>,
<noscript>,
<ol>,
<p>,
<pre>,
<section>,
<table>,
<tfoot>,
<ul>,
<video>.
HTML inline elements do not start on a new line and they only take up as much width as necessary:
<a>,
<abbr>,
<acronym>,
<b>,
<bdo>,
<big>,
<br>,
<button>,
<cite>,
<code>,
<dfn>,
<em>,
<i>,
<img>,
<input>,
<kbd>,
<label>,
<map>,
<object>,
<output>,
<q>,
<samp>,
<script>,
<select>,
<small>,
<span>,
<strong>,
<sub>,
<sup>,
<textarea>,
<time>,
<tt>,
<var>.
Note that an inline element cannot contain a block-level element.
It has no required attributes, but "style", "class" and "id" are common. When used together with CSS, the <div>element can be used to style blocks of content.
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
code:
<h2>London</h2>
<div style="margin-left:5vw;background-color:black;color:white;padding:20px;">
<p>London is . . . <p>
</div>
It used to mark up a part of a text, or a part of a document.
The <span> element has no required attributes, but "style", "class" and "id" are common. When used together with CSS, the <span> element can be used to style parts of the text.
My mother has blue eyes and my father has dark green eyes.
code:
<p class="examples">My mother has <span style="color:blue;font-weight:bold">
blue </span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">
dark green </span> eyes. </p>
<h1> defines the most important heading.<h6> defines the least important heading.
Headings are important, because search engines use the headings to index the structure and content of web pages. Users often skim a page by its headings. Therefore, it is important to use headings to show the document structure. <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.
Bigger headings: each HTML heading has a default size. However, you can specify the size for any heading with the "style" attribute, using the CSS "font-size" property.
code:
<h1 class="examples" style="font-size: 3vw;">heading 1</h1>
A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.
This is a paragraph
This is another paragraph
code:
<div>
<p class="examples">This is a paragraph</p>
<p class="examples">This is another paragraph</p>
</div>
HTML display: you cannot be sure how HTML will be displayed. Large or small screens and resized windows will create different results. With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code. The browser will automatically remove any extra spaces and lines when the page is displayed.
HTML line breaks are defined by the HTM <br> element. Use <br> if you want a line break (a new line) without starting a new paragraph.
This is
a paragraph
with line breaks
code:
<p class="examples">This is <br> a paragraph <br> with line breaks </p>
The HTML <pre> element defines preformatted text. The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
code:
<div>
<pre class="examples">
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
</div>
The property is a CSS property and the value is a CSS value.
The CSS background-color property defines the background color for an HTML element.
code:
<h1 class="examples" style="background-color:powderblue;">This is a heading</h1>
This is a paragraph.
code:
<p class="examples" style="background-color:tomato;">This is a paragraph.</p>
The CSS color property defines the text color for an HTML element.
code:
<h1 class="examples" style="color:powderblue;">This is a heading</h1>
This is a paragraph.
code:
<p class="examples" style="color:tomato;">This is a paragraph.</p>
The CSS font-family property defines the font to be used for an HTML element.
The CSS font-size property defines the text size for an HTML element.
The CSS text-align property defines the horizontal text alignment for an HTML element.
<b> - bold text,
<strong> - important text,
<i> - italic text,
<em> - emphasized text,
<mark> - marked text,
<small> - smaller text,
<del> - deleted text,
<ins> - inserted text,
<sub> - subscript text,
<sup> - superscript text.
HTML <b> and <strong> elements: the HTML <b> element defines bold text, without any extra importance. The HTML <strong> element defines text with strong importance. The content inside is typically displayed in bold.
This text is bold.
code:
<p class="examples"><b>This text is bold.</p>
This text is important!
code:
<p class="examples"><strong>This text is important!</strong></p>
HTML <i> and <em> elements: the HTML <i> element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic. The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc. The HTML <em> element defines emphasized text. The content inside is typically displayed in italic. Tip: a screen reader will pronounce the words in "em" with an emphasis, using verbal stress.
HTML <small> element defines smaller text.
HTML <mark> element defines text that should be marked or highlighted.
Do not forget to buy milk today.
code:
<p class="examples">Do not forget to buy<mark>milk</mark> today.</p>
HTML <del> element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text.
Do not forget to buy milk bread today.
code:
<p class="examples">Do not forget to buy<del>milk</del> bread today.</p>
HTML <ins> element defines a text that has been inserted into a document. Browsers will usually underline inserted text.
Do not forget to buy milk bread today.
code:
<p class="examples">Do not forget to buy<del>milk</del><ins>bread</ins> today.</p>
HTML <sub> element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O.
This is subscripted text.
code;
<p class="examples">This is<sub>subscripted</sub> text.</p>
HTML <sup> element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1]:
This is superscripted text.
code:
<p class="examples">This is<sup>superscripted</sup> text.</p>
HTML <blockquote> for quotations: the HTML <blockquote> element defines a section that is quoted from another source. Browsers usually indent 'blockquote' elements.
For nearly 60 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by more than one million members in the United States and close to five million globally.
code:
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For nearly 60 years, WWF has been protecting the future of nature...........
............. million globally.</blockquote>
HTML <q> for short quotations: the HTML <q> tag defines a short quotation. Browsers normally insert quotation marks around the quotation.
WWF's goal is to: Build a future where people live in harmony with nature.
code:
<p class="examples">WWF's goal is to:<q>Build a future where people live in harmony
with nature.</q></p>
HTML <abbr> for abbreviations: the HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM". Marking abbreviations can give useful information to browsers, translation systems and search-engines. Tip: use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element.
The WHO was founded in 1948.
code:
<p class="examples">The<abbr title="World Health Organization">WHO</abbr>
was founded in 1948.</p>
HTML <address> for contact information: the HTML <address> tag defines the contact information for the author/owner of a document or an article. The contact information can be an email address, URL, physical address, phone number, social media handle, etc. The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the <address>element.
HTML 'cite' for work title: the HTML 'cite' tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.). A person's name is not the title of a work. The text in the 'cite' element usually renders in italic.
HTML <bdo> for bi-directional override: the HTML <bdo> tag is used to override the current text direction.
code:
<bdo class="examples" dir="rtl">This line will be written from right to left</bdo>