HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let’s take a simple example to see how it work. It is a notable point that a browser itself add an empty line before and after a paragraph. An HTML <p> tag indicates starting of new paragraph. Note: If we are using various <p> tags in one HTML file then browser automatically adds a single blank line between the two paragraphs. See this example: Output: This is first paragraph. This is second paragraph. This is third paragraph. Space inside HTML Paragraph If you put a lot of spaces inside the HTML p tag, browser removes extra spaces and extra line while displaying the page. The browser counts number of spaces and lines as a single one. Output: I am going to provide you a tutorial on HTML and hope that it will be very beneficial for you. Look, I put here a lot of spaces but I know, Browser will ignore it. You cannot determine the display of HTML because resized windows may create different result. As you can see, all the extra lines and unnecessary spaces are removed by the browser. How to Use <br> and <hr> tag with paragraph? An HTML <br> tag is used for line break and it can be used with paragraph elements. Following is the example to show how to use <br> with <p> element. Example: Output: An HTML <hr> tag is used to apply a horizontal line between two statements or two paragraphs. Following is the example which is showing use of <hr> tag with paragraph. Example: Output:

HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without using CSS. There are many formatting tags in HTML. These tags are used to make text bold, italicized, or underlined. There are almost 14 options available that how text appears in HTML and XHTML. In HTML the formatting tags are divided into two categories: NOTE: There are some physical and logical tags which may give same visual appearance, but they will be different in semantics. Here, we are going to learn 14 HTML formatting tags. Following is the list of HTML formatting text. Element name Description <b> This is a physical tag, which is used to bold the text written between it. <strong> This is a logical tag, which tells the browser that the text is important. <i> This is a physical tag which is used to make text italic. <em> This is a logical tag which is used to display content in italic. <mark> This tag is used to highlight text. <u> This tag is used to underline text written between it. <tt> This tag is used to appear a text in teletype. (not supported in HTML5) <strike> This tag is used to draw a strikethrough on a section of text. (Not supported in HTML5) <sup> It displays the content slightly above the normal line. <sub> It displays the content slightly below the normal line. <del> This tag is used to display the deleted content. <ins> This tag displays the content which is added <big> This tag is used to increase the font size by one conventional unit. <small> This tag is used to decrease the font size by one unit from base font size. 1) Bold Text HTML<b> and <strong> formatting elements The HTML <b> element is a physical tag which display text in bold font, without any logical importance. If you write anything within <b>…………</b> element, is shown in bold letters. See this example: Output: Write Your First Paragraph in bold text. The HTML <strong> tag is a logical tag, which displays the content in bold font and informs the browser about its logical importance. If you write anything between <strong>???????. </strong>, is shown important text. See this example: Output: This is an important content, and this is normal content Example 2) Italic Text HTML <i> and <em> formatting elements The HTML <i> element is physical element, which display the enclosed content in italic font, without any added importance. If you write anything within <i>…………</i> element, is shown in italic letters. See this example: Test it Now Output: Write Your First Paragraph in italic text. The HTML <em> tag is a logical element, which will display the enclosed content in italic font, with added semantics importance. See this example: Output: This is an important content, which displayed in italic font. 3) HTML Marked formatting If you want to mark or highlight a text, you should write the content within <mark>………</mark>. See this example: Output: I want to put a Mark on your face 4) Underlined Text If you write anything within <u>………</u> element, is shown in underlined text. See this example: Output: Write Your First Paragraph in underlined text. 5) Strike Text Anything written within <strike>…………………..</strike> element is displayed with strikethrough. It is a thin line which cross the statement. See this example: Output: Write Your First Paragraph with strikethrough. 6) Monospaced Font If you want that each letter has the same width then you should write the content within <tt>………….</tt> element. Note: We know that most of the fonts are known as variable-width fonts because different letters have different width. (for example: ‘w’ is wider than ‘i’). Monospaced Font provides similar space among every letter. See this example: Output: Hello Write Your First Paragraph in monospaced font. 7) Superscript Text If you put the content within ^{…………..} element, is shown in superscript; means it is displayed half a character’s height above the other characters. See this example: Output: Hello Write Your First Paragraph in superscript. 8) Subscript Text If you put the content within _{…………..} element, is shown in subscript ; means it is displayed half a character’s height below the other characters. See this example: Output: Hello Write Your First Paragraph in subscript. 9) Deleted Text Anything that puts within <del>……….</del> is displayed as deleted text. See this example: Output: Hello 10) Inserted Text Anything that puts within <ins>……….</ins> is displayed as inserted text. See this example: Output: Delete your first paragraph.Write another paragraph. 11) Larger Text If you want to put your font size larger than the rest of the text then put the content within <big>………</big>. It increase one font size larger than the previous one. See this example: Output: Hello Write the paragraph in larger font. 12) Smaller Text If you want to put your font size smaller than the rest of the text then put the content within <small>………</small>tag. It reduces one font size than the previous one. See this example: Output: Hello Write the paragraph in smaller font.

An HTML file is made of elements. These elements are responsible for creating web pages and define content in that webpage. An element in HTML usually consist of a start tag <tag name>, close tag </tag name> and content inserted between them. Technically, an element is a collection of start tag, attributes, end tag, content between them. Note: Some elements does not have end tag and content, these elements are termed as empty elements or self-closing element or void elements. Such as: Example Void element: All the elements in HTML do not require to have start tag and end tag, some elements does not have content and end tag such elements are known as Void elements or empty elements. These elements are also called as unpaired tag. Some Void elements are <br> (represents a line break) , <hr>(represents a horizontal line), etc. Nested HTML Elements: HTML can be nested, which means an element can contain another element. Block-level and Inline HTML elements For the default display and styling purpose in HTML, all the elements are divided into two categories: Block-level element: Following are the block-level elements in HTML. Note: All these elements are described in later chapters. Example: Output: In the above example we have used tag, which defines a section in a web page, and takes full width of page. We have used style attribute which is used to styling the HTML content, and the background color are showing that it’s a block level element. Inline elements: Example: Output: Following is the list of the some main elements used in HTML: Start tag Content End tag Description <h1> …… <h6> These are headings of HTML </h1>??..</h6> These elements are used to provide the headings of page. <p> This is the paragraph </p> This element is used to display a content in form of paragraph. <div> This is div section </div> This element is used to provide a section in web page. <br> This element is used to provide a line break. ( void element) <hr> This element is used to provide a horizontal line. (void element)

Syntax Example Output: Explanation of above example: In the above statement, we have used paragraph tags in which we have applied style attribute. This attribute is used for applying CSS property on any HTML element. It provides height to paragraph element of 50px and turns it colour to blue. In the above statement we have again used style attribute in paragraph tag, which turns its colour red. Note: There are some commonly used attributes are given below, and the complete list and explanation of all attributes are given in HTML attributes List. The title attribute in HTML Description: The title attribute is used as text tooltip in most of the browsers. It display its text when user move the cursor over a link or any text. You can use it with any text or link to show the description about that link or text. In our example, we are taking this with paragraph tag and heading tag. Example Code: Output: The href attribute in HTML Description: The href attribute is the main attribute of <a> anchor tag. This attribute gives the link address which is specified in that link. The href attribute provides the hyperlink, and if it is blank, then it will remain in same page. Example With link address: Without link address: The src Attribute The src attribute is one of the important and required attribute of <img> element. It is source for the image which is required to display on browser. This attribute can contain image in same directory or another directory. The image name or source should be correct else browser will not display the image. Example Note: The above example also have height and width attribute, which define the height and width of image on web page. Output: Quotes: single quotes or double quotes? In this chapter you have seen that, we have used attribute with double quotes, but some people might use single quotes in HTML. So use of single quotes with HTML attribute, is also allowed. The following both statements are absolutely fine. IN HTML5, you can also omit use of quotes around attribute values.

HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags. When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties. An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement. Syntax HTML Tag Examples Note: HTML Tags are always written in lowercase letters. The basic HTML tags are given below: <h2> Heading Tag </h2> Unclosed HTML Tags Some HTML tags are not closed, for example br and hr. <br> Tag: br stands for break line, it breaks the line of the code. <hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage. HTML Meta Tags DOCTYPE, title, link, meta and style HTML Text Tags HTML Link Tags HTML Image and Object Tags HTML List Tags HTML Table Tags HTML Form Tags form, input, textarea, select, option, optgroup, button, label, fieldset and legend HTML Scripting Tags script and noscript Note: We will see examples using these tags in later charters. HTML Tags List Following is the complete list of HTML tags with the description which are arranged alphabetically. Note: Here represents newly added Elements in HTML5. HTML Tags by Alphabets ABCDEFGHIJKLMNOPQRSTUVWXYZ Tag name Description <!– –> This tag is used to apply comment in an HTML document. <!DOCTYPE> This tag is used to specify the version of HTML A <a> It is termed as anchor tag and it creates a hyperlink or link. <abbr> It defines an abbreviation for a phrase or longer word. <acronym> It defines acronym for a word. (Not supported in HTML5) <address> It defines the author’s contact information of the HTML article <applet> It defines an embedded Java applet. (Not supported in HTML5) <area> It defines the area of an image map. <article> It defines the self-contained content. <aside> It defines content aside from main content. Mainly represented as sidebar. <audio> It is used to embed sound content in HTML document. B <b> It is used to make a text bold. <base> This tag defines the base URL for all relative URL within the document. <basefont> This tag is used to set default font, size and color for all elements of document. (Not supported in HTML5) <bdi> This tag is used to provide isolation for that part of text which may be formatted in different directions from its surrounding text. <bdo> It is used to override the current text direction. <big> This tag is used to make font size one level larger than its surrounding content. (Not supported in HTML5) <blockquote> It is used to define a content which is taken from another source. <body> It is used to define the body section of an HTML document. <br> It is used to apply single line break. <button> It is used to represent a clickable button C <canvas> It is used to provide a graphics space within a web document. <caption> It is used to define a caption for a table. <center> It is used to align the content in center. (Not supported in HTML5) <cite> It is used to define the title of the work, book, website, etc. <code> It is used to display a part of programming code in an HTML document. <col> It defines a column within a table which represent common properties of columns and used with the <colgroup> element. <colgroup> It is used to define group of columns in a table. D <data> It is used to link the content with the machine-readable translation. <datalist> It is used to provide a predefined list for input option. <dd> It is used to provide definition/description of a term in description list. <del> It defines a text which has been deleted from the document. <details> It defines additional details which user can either view or hide. <dfn> It is used to indicate a term which is defined within a sentence/phrase. <dialog> It defines a dialog box or other interactive components. <dir> It is used as container for directory list of files. (Not supported in HTML5) <div> It defines a division or section within HTML document. <dl> It is sued to define a description list. <dt> It is used to define a term in description list. E <em> It is used to emphasis the content applied within this element. <embed> It is used as embedded container for external file/application/media, etc. F <fieldset> It is used to group related elements/labels within a web form. <figcaption> It is used to add a caption or explanation for the <figure> element. <figure> It is used to define the self-contained content, and s mostly refer as single unit. <font> It defines the font, size, color, and face for the content. (Not supported in HTML5) <footer> It defines the footer section of a webpage. <form> It is used to define an HTML form. <frame> It defines a particular area of webpage which can contain another HTML file. (Not supported in HTML5) <frameset> It defines group of Frames. (Not supported in HTML5) H <h1> to <h6> It defines headings for an HTML document from level 1 to level 6. <head> It defines the head section of an HTML document. <header> It defines the header of a section or webpage. <hr> It is used to apply thematic break between paragraph-level elements. <html> It represents root of an HTML document. I <i> It is used to represent a text in some different voice. <iframe> It defines an inline frame which can embed other content. <img> It is used to insert an image within an HTML document. <input> It defines an input field

An HTML document consist of its basic building blocks which are: Syntax Example: Output: The building blocks This is a paragraph tag The style is attribute of paragraph tagThe element contains tag, attribute and content

HTML is an acronym which stands for Hyper Text Markup Language which is used for creating web pages and web applications. Let’s see what is meant by Hypertext Markup Language, and Web page. Hyper Text: HyperText simply means “Text within Text.” A text has a link within it, is a hypertext. Whenever you click on a link which brings you to a new webpage, you have clicked on a hypertext. HyperText is a way to link two or more web pages (HTML documents) with each other. Markup language: A markup language is a computer language that is used to apply layout and formatting conventions to a text document. Markup language makes text more interactive and dynamic. It can turn text into images, tables, links, etc. Web Page: A web page is a document which is commonly written in HTML and translated by a web browser. A web page can be identified by entering an URL. A Web page can be of the static or dynamic type. With the help of HTML only, we can create static web pages. Hence, HTML is a markup language which is used for creating attractive web pages with the help of styling, and which looks in a nice format on a web browser. An HTML document is made of many HTML tags and each HTML tag contains different content. Let’s see a simple example of HTML. Test it Now Description of HTML Example <!DOCTYPE>: It defines the document type or it instruct the browser about the version of HTML. <html > :This tag informs the browser that it is an HTML document. Text between html tag describes the web document. It is a container for all other elements of HTML except <!DOCTYPE> <head>: It should be the first element inside the <html> element, which contains the metadata(information about the document). It must be closed before the body tag opens. <title>: As its name suggested, it is used to add title of that HTML page which appears at the top of the browser window. It must be placed inside the head tag and should close immediately. (Optional) <body> : Text between body tag describes the body content of the page that is visible to the end user. This tag contains the main content of the HTML document. <h1> : Text between <h1> tag describes the first level heading of the webpage. <p> : Text between <p> tag describes the paragraph of the webpage. Brief History of HTML In the late 1980’s , a physicist, Tim Berners-Lee who was a contractor at CERN, proposed a system for CERN researchers. In 1989, he wrote a memo proposing an internet based hypertext system. Tim Berners-Lee is known as the father of HTML. The first available description of HTML was a document called “HTML Tags” proposed by Tim in late 1991. The latest version of HTML is HTML5, which we will learn later in this tutorial. HTML Versions Since the time HTML was invented there are lots of HTML versions in market, the brief introduction about the HTML version is given below: HTML 1.0: The first version of HTML was 1.0, which was the barebones version of HTML language, and it was released in1991. HTML 2.0: This was the next version which was released in 1995, and it was standard language version for website design. HTML 2.0 was able to support extra features such as form-based file upload, form elements such as text box, option button, etc. HTML 3.2: HTML 3.2 version was published by W3C in early 1997. This version was capable of creating tables and providing support for extra options for form elements. It can also support a web page with complex mathematical equations. It became an official standard for any browser till January 1997. Today it is practically supported by most of the browsers. HTML 4.01: HTML 4.01 version was released on December 1999, and it is a very stable version of HTML language. This version is the current official standard, and it provides added support for stylesheets (CSS) and scripting ability for various multimedia elements. HTML5 : HTML5 is the newest version of HyperText Markup language. The first draft of this version was announced in January 2008. There are two major organizations one is W3C (World Wide Web Consortium), and another one is WHATWG( Web Hypertext Application Technology Working Group) which are involved in the development of HTML 5 version, and still, it is under development. Features of HTML 1) It is a very easy and simple language. It can be easily understood and modified. 2) It is very easy to make an effective presentation with HTML because it has a lot of formatting tags. 3) It is a markup language, so it provides a flexible way to design web pages along with the text. 4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it enhances the interest of browsing of the user. 5) It is platform-independent because it can be displayed on any platform like Windows, Linux, and Macintosh, etc. 6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which makes it more attractive and interactive. 7) HTML is a case-insensitive language, which means we can use tags either in lower-case or upper-case.