Index
Introduction to HTML
History of HTML
Code editors
Web browsers
Viewing browser’s HTML source code
HTML element
HTML document structure
HTML comments
HTML headings
HTML paragraphs
HTML formatting
HTML quotations
HTML attributes
HTML linkssss
HTML images
HTML file paths
HTML colors
HTML lists
HTML tables
HTML favicon
HTML classes
HTML id
HTML meta tags
Introduction to HTML
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.
History of HTML
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2
Code editors
Web browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read
HTML documents and display them correctly. It uses them to determine
how to display the document
Viewing browser’s HTML source code
View HTML Source Code:
Click CTRL + U in an HTML page, or right-click on the page and select
"View Page Source". This will open a new tab containing the HTML source
code of the page.
Inspect an HTML Element:
Right-click on an element (or a blank area), and choose "Inspect" to see
what elements are made up of (you will see both the HTML and the CSS).
You can also edit the HTML or CSS on-the-fly in the Elements or Styles
panel that opens.
HTML element
An HTML element is defined by a start tag, some content, and an end tag.
It is everything from the start tag to the end tag:
<tagname>Content</tagname>
Nested HTML Elements
HTML elements can be nested (this means that elements can contain
other elements).
All HTML documents consist of nested HTML elements.
Empty HTML Elements
HTML elements with no content are called empty elements.
HTML tags are not case sensitive: <tag> = <Tag> = <TAG>
The HTML standard does not require lowercase tags, but
W3C recommends lowercase in HTML, and demands lowercase for
stricter document types like XHTML.
Never Skip the End Tag.
HTML document structure
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph.</p>
</body>
</html>
All HTML documents must start with a document type declaration: <!
DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
The metadata (the part the only provide extra information about the page,
is not visible) of the HTML document is between <head> and </head>.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps
browsers to display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
It is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html>
HTML comments
HTML comments are not displayed in the browser, but they help in
documenting HTML source code.
Comments can be used to hide content. This can be helpful for
hiding content temporarily:
It can hide more than 1 line.
They can also be used in middle of a code line (inline).
With comments you can place notifications and reminders in your
HTML code.
Comments are also great for debugging HTML, because with it we
can comment out HTML lines of code, one at a time, to search for
errors.
The syntax for comments in HTML is:
<!—comment text -->
HTML headings
HTML headings are titles or subtitles that display on a webpage.
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least
important heading.
Browsers automatically add some white space (a margin) before and
after a heading.
Search engines use the headings to index the structure and content
of your web pages.
Users often skim a page by its headings. 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.
Use only one <h1> per page - it represents the main topic or title.
Use HTML headings for headings only. Don't use headings to make
text big or bold.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
HTML paragraphs
A paragraph always starts on a new line, and browsers
automatically add some white space (a margin) before and after a
paragraph.
The HTML <p> element defines a paragraph.
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.
<p>paragraph</p>
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is
most often displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change)
in an HTML page.
The <hr> tag is an empty tag, which means that it has no end tag.
<hr>
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a
new paragraph.
The <br> tag is an empty tag, which means that it has no end tag.
<br>
The HTML <pre> Element
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:
<pre>
Line 1
Line 2
</pre>
Output:
Line 1
Line 2
HTML formatting
<b> - Bold text
<strong> - Important text – displayed as bold text
<i> - Italic text
<em> - Emphasized text – displayed as italic text
<mark> - Marked text – displayed as highlighted text
<small> - Smaller text
<del> - Deleted text – displayed as a strike through
<ins> - Inserted text – displayed as underlined text
<sub> - Subscript text
<sup> - Superscript text
HTML quotations
<blockquote>
The HTML <blockquote> element defines a section that is quoted
from another source.
Browsers usually indent <blockquote> elements.
<blockquote cite="link ">quote</blockquote>
<q>
The HTML <q> tag defines a short quotation.
Browsers normally insert quotation marks around the quotation.
<q>short quotation</q>
<abbr>
The HTML <abbr> tag defines an abbreviation or an acronym.
Marking abbreviations can give useful information to browsers,
translation systems and search-engines.
Use the global title attribute to show the description for the
abbreviation/acronym when you mouse over the element.
<abbr title="full form of acrynom">acrynom</abbr>
<address>
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.
<addess>address</address>
<cite>
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.).
The text in the <cite> element usually renders in italic.
<cite>title of ant creative work</cite>
<bdo>
HTML <bdo> for Bi-Directional Override
BDO stands for Bi-Directional Override.
The HTML <bdo> tag is used to override the current text direction:
<bdo dir="rtl">This text will be written from right to left</bdo>
HTML attributes
HTML links
HTML images
HTML file paths
HTML colors
HTML lists
HTML tables
HTML favicon
HTML classes
HTML id
HTML meta tags