Introduction:
HTML is a standard markup language for creating Web pages.
HTML stands for Hyper Text Markup Language
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 are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
Note: - Browsers do not display the HTML tags, but use them to make the content of the page.
Example:
Example Explained
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph
Applications of HTML
HTML is one of the most widely used language over the web.
Web pages development - HTML is used to create pages which are displayed over the web. Almost every page of web is having html tags in it to provide its details in browser.
Internet Navigation - HTML provides tags which are used to navigate from one page to another and is heavily used in internet navigation.
Responsive UI - HTML pages now-a-days works well on all platform, mobile, tabs, desktop or laptops owing to responsive design strategy.
Offline support HTML pages once loaded can be made available offline on the machine without any need of internet.
HTML Tags
HTML tags are element names surrounded by angle brackets<Tag Name>:
Syntax: - <tagname>content lies here...</tagname>
Except a few, usually tags come in pairs.
The first tag is called a start tag, and the second tag is called the end tag.
The end tag is written like the start tag, but with a forward slash inserted before the tag name.
Note: - The start tag is also called the opening tag, and the end tag as closing tag.
HTML Page Structure
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph. </p>
<p>This is another paragraph. </p>
</body>
</html>
Note: - Only the content inside the <body> section is displayed in browser.
HTML Versions
HTML was introduced in the year 1991 by Tim Berners-Lee. Since then there have been many versions of HTML:
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
HTML Editors
Web pages are usually created and modified by using professional HTML editors like NetBeans, Notepad++, Visual Studio Code, etc.
However, for learning purpose simple text editor like Notepad, TextEdit is recommended.
Following steps are too followed to create a web page with Notepad.
Step 1: Open Notepad
Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
Step 2: Write Some HTML Code
<!DOCTYPE html> <html> <body>
<h1>Heading</h1>
<p>This is my first paragraph. </p>
</body> </html>
Write or copy some HTML into Notepad.
Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "demo1.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).
Step 4: View the HTML Page in Your Browser
Open the saved HTML file in your favourite browser (double click on the file, or right-click - and choose "Open with").
Example:
HTML Documents
All html documents start with a document type declaration: <!DOCTYPE html>.
The HTML document begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
Example:
HTML Headings
HTML defines six levels of headings.
HTML headings are defined with the <h1> to <h6>tags.
<h1> defines the most important heading and <h6> defines the least important heading.
Example:
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example:
HTML Links
A link is a connection from one web source to another.
Links are specified in HTML using the “a” tag.
Syntax: <a href=”url”>Text to be Displayed </a>
href: The href attribute is used to specify the destination address of the link used.
Attributes are used to provide additional information about HTML elements.
Text to be displayed: It is the visible part of the link.
Example:
HTML Images
HTML images are defined with the <img> tag.
Syntax: <img src="image name" alt="Text to be displayed" width="104" height="142">
The alt attribute provides alternative text for users who are unable to view the image.
Height and width attributes is used to provide dimensions for the image.
Example:
HTML Buttons
The button tag in HTML is used to define the clickable button.
It is usually used to submit the content.
The image and text content can be used inside <button> tag.
Syntax: <button type = “button”>
Example:
HTML Lists
A list is a record of short pieces of information.
In HTML there are three ways to specify lists of information.
All lists must have at least one or more list elements.
Types of lists used in HTML are:
ul: An unordered list. This will list items using plain bullets.
ol: An ordered list. This will use different schemes of numbers to list the items.
dl: A definition list. This arranges the items in the same way as they are arranged in a dictionary.
Example:
HTML Elements
HTML element is the collection of start and end tag with the content inserted in between them.
In HTML end tag of element is necessary. Otherwise the displayed content may not be displayed correctly.
Note: - A HTML element with no content are called empty elements. Empty elements do not have an end tag, such as <br> element (which indicates a line break).
Start Tag Element Content End Tag
<h1> Heading </h1>
<p> Paragraph </p>
<br> -- --
Nested HTML Elements
The elements of HTML can be nested.
When a HTML element is used inside another HTML element it is called Nested HTML Elements.
All HTML documents consists of nested HTML elements.
Example:
Note: - Some HTML elements will display correctly, even if we forget the end tag like paragraph tag<p>.
Empty HTML Elements
The element which has no content are called empty elements.
<br> is an empty element.
Empty elements do not have closing tag.
The <br> tag is used for line break.
Example:
Note: - HTML5 do not require empty elements to be closed, but it is recommended to close all HTML elements properly for reliability.
HTML is Not Case Sensitive
HTML tags are not case sensitive.
In HTML <P> is same as <p>.
HTML5 standard do not require lowercase tags, but W3C recommends lowercase in HTML, for stricter document types like XHTML.
HTML Attributes
An attribute is used to provide extra or additional information about an element.
It takes two parameters: a name and a value.
Attributes are always specified in the start tag.
The value of an attribute must be written within quotes.
The href Attribute
HTML links are defined with the <a> tag.
The link address is specified in the href attribute.
Example:
The src Attribute
HTML images are defined with the <img>tag.
The src attribute is used to specify the URL of the source image.
Example:
The width and height Attribute
HTML images uses width and height attributes.
It specifies the width and height of the image.
Example:
The alt Attribute
In HTML the alt attribute is used to specify the alternative text to be used, if an image cannot be displayed.
The value of alt attribute can be read by screen readers.
It can also be heard if someone is listening to the web page.
Example:
The style Attribute
Styles in HTML are basically the rules that describe how a document is presented in a browser.
The style attribute is used for styling the element, like color, font, size, etc.
Example:
The lang Attribute
The language attribute contains single value language code which is used to specify the language of the content.
The language of a document is declared in the <html> tag.
The language is declared with the lang attribute.
<!DOCTYPE html> <html lang="en-US"> <body>
...
</body> </html>
The title Attribute
The title attribute is used to specify extra information about the element.
When we move cursor over the element then it shows the information.
A title attribute is added to the <p> element.
Example:
Are attributes case sensitive?
HTML5 is not case sensitive, i.e. it can be written in either uppercase or lowercase.
For example, the title attribute can be written like title or TITLE.
But W3C recommends HTML attributes to be in lower case, as demanded for stricter document types like XHTML.
HTML Headings
HTML has six levels of headings element.
The six heading elements are H1, H2, H3, H4, H5 and H6.
Importance:
Search Engines use headings for indexing the structure and content of the webpage.
Headings are used for highlighting important topics.
They provide valuable information and tell us about the structure of the document.
Note: - HTML headings are used only for headings. It can’t be used for making text BIG or bold.
Headings Size
Each HTML heading has a default size.
Also, size of the headings can be specified with the style attribute using the CSS font-size property.
Example:
HTML Horizontal Rules
The <hr> tag in HTML stands for horizontal rule.
It is used to insert a horizontal rule or a thematic break in an HTML page to divide or separate document sections.
The <hr> tag is an empty tag and it does not require an end tag.
Example:
HTML <head> Element
The <head> element is a container for metadata.
HTML metadata is data about the HTML document.
Metadata is not displayed.
The <head> element is always placed in between <html> tag and <body> tag.
Example:
Note: - Metadata typically define the document title, character set, styles, scripts, and other meta information.
HTML Source Code
View HTML Source Code
To view an HTML Source Code, right-click in an HTML page and select "View Page Source" (in Chrome), or similar in other browsers.
This will open a window containing the HTML source code of the page.
Inspect HTML Source Code
To inspect an HTML Source Code, right-click on an element (or a blank area), and choose "Inspect" or "Inspect Element" to see what elements are made up of. (both the HTML and the CSS can be seen).
We can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.
HTML Paragraphs
The <p> tag in HTML defines a paragraph.
It has both opening and closing tag.
Things within <p> and </p> is treated as a paragraph.
Usually browsers read a line as a paragraph even if the closing tag i.e, </p> is not used.
Example:
Note: - Browsers automatically add some white space (a margin) before and after a paragraph.
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 output by adding extra spaces or extra lines in your HTML code.
Example:
Note: - The browser removes any extra spaces and extra lines when the page is displayed.
HTML Line Breaks
The <br> element defines a line break in HTML.
<br> tag is used when there is a need of line break ( a new line) without starting a new paragraph.
Example:
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.
Example:
HTML Styles
Styles in HTML are basically rules that describe how a document will be presented in a browser.
Style information can be either attached as a separate document or embedded in the HTML document.
Example:
HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.
Syntax: <tagname style=”property:value;”>
Background Color
The CSS background-color property defines the background color for an HTML element.
Example:
Text Color
The CSS color property defines the text color for an HTML element.
Example:
Fonts
The CSS font-family property defines the font to be used for an HTML element.
Example:
Text Size
The CSS font-size property defines the text size for an HTML element.
Example:
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML element
Example:
HTML Formatting
HTML provides us with the ability for formatting text just like we do it in MS Word or any text editing software.
Example:
HTML Formatting Elements
Formatting elements were designed to display special types of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
HTML <b> and <strong> Elements
The HTML <b> elements defines bold text, without any extra importance.
The HTML <strong> element defines strong text, with added semantic “strong” importance.
Example:
HTML <i> and <em> Elements
The HTML <i> elements defines italic text, without any extra importance.
The HTML <em> element defines emphasized text, with added semantic importance.
Example:
HTML <small> Element
The HTML <small> elements defines smaller text.
Example:
HTML <mark> Element
The HTML <mark> elements defines marked/highlighted text.
Example:
HTML <del> Element
The HTML <del> elements defines deleted/removed text.
Example:
HTML <ins> Element
The HTML <ins> elements defines inserted/added text.
Example:
HTML <sub> Element
The HTML <sub> elements defines subscripted text.
Example:
HTML <sup> Element
The HTML <sup> elements defines superscripted text.
Example:
HTML Quotation and Citation Elements
The Quotation elements in HTML are used to insert quoted texts in a web page, that is, portion of texts different from the normal texts in the web page.
HTML <q> for Short Quotations
The HTML <q> elements defines short text.
For Short Quotations browsers usually insert quotation marks around the <q> element.
Example:
HTML <blockquote> for Quotations
The HTML <blockquote> elements defines a section which is quoted from another source.
<blockquote> elements are usually indented by browsers.
Example:
HTML <abbr> for Abbreviations
The <abbr> element is used to define a text as an acronym or abbreviations.
The title attribute can be used to show the full version of the abbreviation/acronym when you move cursor over the <abbr> element.
It has both opening and closing tags.
This is useful for browsers and search engines.
Example:
HTML <address> for Contact Information
Using the <address> element, we can define an address in a webpage and the text put inside the address tag will be emphasized.
Most browsers will add a line break before and after the element.
Example:
HTML <cite> for Work Title
This element is used define a title of a work and emphasizes a text.
Browsers usually display <cite> elements in italic.
Example:
HTML <bdo> for Bi-Directional Override
The <bdo> element is used to define a bidirectional override which means that the text written from right to left or left to right.
It is used to over-ride the current text direction.
It takes an attribute “rtl” to display the text from right to left.
Example:
HTML Comments
The comment tag is used to insert comments in the HTML code.
It is used to help the coder and reader to understand the code.
The comment tag is useful during the debugging of codes.
Syntax: <! - - Comments are written here - - >
Note: - Comments are not displayed by the browser, but they help document your HTML source code.
Example:
HTML Colors
Colors are used to make the page more attractive.
HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
The comment tag is useful during the debugging of codes.
Color Names
In HTML, a color is specified by using color names.
HTML supports 140 standard color names.
Example:
Background Color
We can set the background color for HTML elements.
Example:
Text Color
We can set the color of text in HTML.
Example:
Border Color
We can set the color of borders in HTML.
Example:
Color Values
In HTML, Colors are specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.
Example:
RGB Values
RGB values are used to specify a color in HTML.
Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
For red color parameters are set as rgb(255, 0, 0), as red is set to its highest value (255) and others are set to 0.
Similarly for green rgb(0, 255, 0) and for blue rgb(0, 0, 255).
To display the black, all parameters are set to 0, rgb(0, 0, 0).
To display the white, all parameters are set to 255, rgb(255, 255, 255).
Example:
HEX Values
HEX stands for Hexadecimal values.
Hexadecimal values are used to specify a color in HTML.
#rrggbb, here rr (red), gg (green), bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).
For example, #00ff00 is displayed as green, because green is set to its highest value (ff) and the others are set to the lowest value (00).
Example:
HSL Value
In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white.
Example:
Saturation
Saturation is described as the intensity of a color.
100% is pure color, no shades of gray
50% is 50% gray, but you can still see the color.
0% is completely gray, you can no longer see the color.
Example:
Lightness
The lightness of a color is described as how much light is given to the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).
Example:
RGBA Value
RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.
An RGBA color value is specified with:
rgba(red, green, blue, alpha)
The range of alpha parameter is 0.0 (fully transparent) and 1.0 (not transparent at all).
Example:
HSLA Value
HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color.
An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).
Example:
If you like Codersarts blog and looking for Assignment help,Project help, Programming tutors help and suggestion you can send mail at contact@codersarts.com.
Please write your suggestion in comment section below if you find anything incorrect in this blog post