HTML

So, for example, if you want to make some text bold or italic, you might do
something like this:
I want to make <b>these words bold</b> and <i>these other words italic</i>.
 I want to make these words bold and these other words italic.

Therefore, the <b> and <i> tags are no longer recommended for use.

Instead, the preferred tags are <strong> and <em> (emphasis).
I want to make <strong>these words stand out</strong> and to <em>emphasize
these words</em>.
I want to make these words stand out and to emphasize these words.

Similarly, website accessibility — the ability for a website to be navigated

successfully by people with visual or other handicaps — is an increasingly
important consideration. The blind rely on computerized screen readers to
translate web sites into sound, and the quality and structure of the
underlying HTML document has a big impact on the ability of the screen
reader to work properly.

HTML Elements and Tags

1. Generally, matching pairs of tags surround the section of text which

they affect. Two matching pairs of tags, along with the content they
enclose, are called an “element.”
Ex. <strong>This element begins and ends with the "strong" tag.</strong>

2. The opening tag can contain additional attributes which provide more

information about the contents of the tag and how to display them.
These attributes are written as name–value pairs, separated by an
equals ( = ) sign, with the value placed in quotes.

Ex. <a href="http://example.com">This is a link. The tag is an "a" for

"anchor," and the href (hyper reference) attribute specifies where the
link is pointing.</a>

Source: https://www.whoishostingthis.com/resources/html-for-beginners/
 3. A few tags do not occur in matching pairs, because they are used to
insert something, rather than describe text. These are called “empty”
or “void” tags, and the most common one is the one used for
inserting an image. The src attribute is used to specify the URL of
the image.
Ex. <img src="https://media.whoishostingthis.com/2/v60/images/wiht-
logo.png" />

4. There are several other empty tags.

 <br/>  inserts a line-break.
 <hr/>  inserts a horizontal rule (line) separator.

Block-level vs. inline

HTML tags fall into two categories, block and inline.
1. Block elements

Block elements represent rectangular blocks of content. They have an

implied line break before and after. Block elements include sectional
content like paragraphs ( <p> ), divisions ( <div> ), and headlines
( <h1>, <h2>, etc).
<div>

This is a div.
</div>

However, this is not always done, especially with headlines:

<h1>This is the title of a page</h1>

<h2>This is a major section</h2>

For the Paragraph:

<p>
Some content in a paragraph.
</p>

2. Inline elements

Inline elements are elements used within text. Bold ( <strong> ), italic
( <em> ), and links ( <a> ) are all inline elements.

Source: https://www.whoishostingthis.com/resources/html-for-beginners/
Inline elements are sometimes called “span-level” elements. There is also
a generic span-level element, simply called a span ( <span> ).
<span class="special-text">This text is special.</span>

(See the section on CSS for information on how to make class="special-

text"  display in a special format.)

3. Two important attribute types are class and id.

Ex. <a href="http://example.com" class="example-link" id="link27">This
anchor tag has three attributes.</a>

Class attributes

Class attributes are used to mark one or more elements as belonging to a

specific “class” or group — this can be used for displaying them all the
same way.
For example, it is common to use an unordered list ( <ul>) as a menu, and
to make the list item ( <li> ) which points to the current page look different
than all the other links in the same list.
<ul class="menu">
<li class="menu-item">
<a href="/home">Home</a>
</li>

<li class="current-item">
<a href="/about">About</a>
</li>

<li class="menu-item">
<a href="/contact">Contact</a>
</li>
</ul>

In CSS, JavaScript, and other languages, the class of an element is

notated with a dot before the name.
/*CSS*/

.first {
color: green;
}

Source: https://www.whoishostingthis.com/resources/html-for-beginners/
The above CSS code means that within any element that has a class of first, the
text color should display as green.

ID attribute

The ID attribute works similarly to the Class attribute, but is conceptually

different. it uniquely identifies that element. For this reason, there can be
only one element with any specific ID on any given page.
<h1 id="page-title">This is the title of the page</h1>

Comment Tags
Comments begin with an angle bracket, followed by an exclamation point
and two dashes. They end with two dashes and a closing angle-bracket.
<!-- This is a comment. -->
Comments may be multi-line.
For nested Comments:
<!--
If I try to nest a comment inside another comment.
<!-- Like this -->
Then this the part after the first closing tag will fall outside the
comment.
-->

Paragraphs
The paragraph tag — <p> — should surround every paragraph of text in
your main content.

Multiple line breaks in your source code (without the <br> line-break tag)

will not display as line breaks on-page. In order to get proper display
spacing between paragraphs of text, you should use the <p> tag.

<article>

<h2>The importance of paragraph tags</h2>

<p>Every paragraph of your content should be within a paragraph element.
The paragraph element is defined by the p-tag</p>

<p>Using the paragraph tag properly ensures that your line spacing between
paragraphs will display properly. It also helps with assistive
technologies like text-to-voice readers (it helps with proper
pausing).</p>

Source: https://www.whoishostingthis.com/resources/html-for-beginners/
 </article>

Headlines
HTML provides six levels of headline elements, <h1> through <h6>.
<h1>The most important title on a page</h1>

<h2>Title of a major section</h2>

<h3>Sub-section heading.</h3>

Block quotes and inline quotes

If you are quoting someone or something, use one of the two HTML quote
elements.
Blockquotes

The blockquote is much more common. This is because of normal

typographical convention:
 blockquotes (multi-line quotes or excerpts) are displayed a special
way (usually indented and sometimes italicized),
 whereas inline quotes are simply marked with puncutation.

<blockquote>
To be or not to be, that is the question.
</blockquote>
To be or not to be, that is the question.
If you want to cite the source of the quote, there are two ways to do that.
The <blockquote> element can be given a cite attribute, or a byline can be
added with a <cite> tag surrounding the source title. You can also do both.
<blockquote cite="http://www.gutenberg.org/ebooks/2265">
To be or not to be, that is the question.<br>
&mdash; <cite>Hamlet</cite>, William Shakespeare
</blockquote>

To be or not to be, that is the question.

— Hamlet, William Shakespeare

Source: https://www.whoishostingthis.com/resources/html-for-beginners/
 Inline Quote

The less-commonly used quoting element is the inline quote, <q>.

<p>
My favorite line in <cite>Hamlet</cite> is when he says, <q
cite="http://www.gutenberg.org/ebooks/2265"> To be or not to be, that is
the question.</q>
</p>

My favorite line in Hamlet is when he says, “To be or not to be, that is the

question.”

Hyperlinks
One of the most important tags in HTML is the anchor tag ( <a> ), which
defines a hyperlink.
<a href="http://example.com">This is a link to example.com</a>

This is a link to example.com

Along with the href, the <a> tag has several important attributes.

 target specifies what window (or browser tab) to open the link in. The
default is the same window. If you want to open a new tab
set target="_blank".
 title  sets the tooltip or hover-text of a link. This displays in a small
popup when the user mouses over the anchor text. It is useful for providing
some additional information about what the user is about to click on.

Text decoration
There are a number of simple tags which are used for basic text markup
within a paragraph or other element.
Bold

There are two tags that can be used for making text bold.
 <strong> is recommended for use to mark “important” text. It causes
the wrapped text to display as bold but also carries semantic meaning (that
the text itself is somehow important).

Source: https://www.whoishostingthis.com/resources/html-for-beginners/
 <b>  simply bolds the text without suggesting any particular semantic
meaning.
Italic

Like bold, there are two ways to make text display in italics.

 <em> suggests that the wrapped text is “emphasized” somehow.
 <i>  is simply italicized, with no specific semantic meaning attached.

Underline

 <u>  is
the generic tag for underlining text. The use-case presented by
the specifications is underlining misspelled words. The HTML5 spec also
wants you to know that other elements are usually more appropriate, and
dont use this if it could be mistaken for a link.
 <ins>  means text that has been inserted, and is usually used in
conjuction with the <del> tag, to show the changes made to a text.
<p>The show will begin at <del>7:00pm</del> <ins>8:00pm</ins>.</p>

The show will begin at 7:00pm 8:00pm .

Line-Through

There are two elements which mark text to be lined through. Each has a
slightly different meaning.
 <del>  is for text which is to be understood as deleted or changed, and
it used with the <ins> tag as noted above.
 <s>  is used for text which is no longer correct or no longer relevant.
There is also a <strike> tag which was available in HTML4.

Text sizing
You can make text arbitrarily larger or smaller with two elements that
otherwise have no specific meaning:

 <big>
 <small>

<Span>
The generic <span> element

If you need to markup specific length of text for semantic or styling

purposes, but none of the existing tags makes sense, you can use the

Source: https://www.whoishostingthis.com/resources/html-for-beginners/
 generic <span> element, along with a class attribute (and some CSS) to
create the desired effect.
<p>I'm not sure why there isn't a sarcasm tag. Maybe it just isn't needed
because <span class="sarcasm">tone is so easy to read on the
internet.</span></p>

Separators
HTML provides two tags for adding in separation within text.

 <br> insertsa line break

 <hr> inserts a horizontal line
Neither of these elements requires a closing tag, because they do not
enclose any text. If it helps you read your source code better, you may
include the self-closing end slash: <br/> and <hr/>.

Structural HTML
This section explains the overall structure of an HTML document, including
what types of information are contained in the <head> and <body>. It also
explains how to organize the various sections of a typical web page. There
will be more information in the HTML5 section below.

The document must begin by declaring a DOCTYPE. There are several

different HTML (and related) standards that have been in use over the
years, and so therefore it is important to specify which type of document
(which HTML standard) your document is using.
<!DOCTYPE html>
<html lang="en">
.
.
.
<!-- entire contents of page -->
.
.
</html>
.
.
..
….
……..
………………

Source: https://www.whoishostingthis.com/resources/html-for-beginners/
Nested inside the <html> tag are two sections, the <head> and the <body>.
The body contains all the visible content, while the head contains
information about the document itself. Nothing is outside of these two
sections.
<!DOCTYPE html>
<html lang="en">
<head>
.
<!-- Info about document here. -->
.
</head>
<body>
.
.
<!-- Contents of document here. -->
.
.
</body>
</html>
This is the basic structure of every HTML document. Everything is basically
extra.

Metadata

The <meta> tag is used several times in the <head> to specify various

metadata (data about the document).
Metatags are empty tags, requiring no closing tag. You may end them with
the self-closing slash ( />), but this is not required (and some people even
specifically discourage it).

Character Encoding
There are several different common ways to encode characters (letters,
numbers, and punctuation) in computer memory. If you dont specify which
one you are using, the web browser may mess up and display some of the
wrong characters.
Most of the the time, these days, you want to specify the UTF-8 character
set.
<meta charset="utf-8">
…….
……….
………….
………….
………….
…………..

Source: https://www.whoishostingthis.com/resources/html-for-beginners/
Basic information about the document — who wrote it and what it is about
— are also conveyed through <meta> tags. These each have two attributes:
the name of the tag, and the content of the tag.
<meta name="description" content="A page about HTML.">
<meta name="keywords" content="HTML, tags, metadata">
<meta name="author" content="Adam Michael Wood">

CSS Links

Style Sheets, written in the CSS (Cascading Style Sheet) language, are
separate documents which provide information about how to display a
page in a browser. Information about sizes, colors, placement, and fonts
are all contained in the style sheet. 
CSS style sheets are linked to within the <head> of the HTML document,
using the <link> tag.  The href attribute specifies the URL of the style
sheet file, and the rel attribute specifies that the link is a stylesheet link.
<link href="/css/style.css" rel="stylesheet">

Source: https://www.whoishostingthis.com/resources/html-for-beginners/