HTML comments are non-executable lines of code that do not display on the webpage and are used to add notes or explanations. It is a good practice to add comments into your HTML code, especially in complex documents, to indicate sections of a document and any other notes to anyone looking at the code.
HTML comments are completely ignored by web browsers, so they don’t affect how your page looks or works.
HTML comments help you and others understand your code and increase code readability and are placed in between <!– … –> tags. So, any content placed with <!–… –> tags will be treated as a comment and will be completely ignored by the browser.
If you run the above program, it displays the sentence “Document content goes here…..” neglecting the content given as a part of comments.
Valid vs Invalid Comments
Comments in HTML have certain rules that you need to follow. Below is the list of rules −
Comments do not support nesting, which means a comment cannot be put inside another comment.
You can’t have the sequence “–” within a comment, except to close it.
You must also make sure that there are no spaces in the start-of-comment string.
Example
Here, the given comment is a valid comment and will be wiped off by the browser.
Open Compiler
<!DOCTYPE html><html><head><title>Valid Comment Example</title></head><body><!-- This is valid comment --><p>Document content goes here.....</p></body></html>
But the following line is not a valid comment and will be displayed by the browser. This is because there is a space between the left angle bracket and the exclamation mark.
Open Compiler
<!DOCTYPE html><html><head><title>Invalid Comment Example</title></head><body>
< !-- This is not a valid comment -->
<p>Document content goes here.....</p></body></html>
Multiline Comments
You can comment multiple lines by the special beginning tag <!– and ending tag –> placed before the first line and end of the last line as shown in the given example below.
Conditional comments are a feature specific to Internet Explorer (IE) on Windows, but they are ignored by other browsers. They are supported from Explorer 5 onwards, and you can use them to give conditional instructions to different versions of IE.
These tags are used in the situation where you need to apply different style sheets based on different versions of Internet Explorer; in such a situation, conditional comments will be helpful.
Comments Using <comment> Tag
There are few browsers that support the <comment> tag to comment on a part of HTML code.
Example
Open Compiler
<!DOCTYPE html><html><head><title>Using Comment Tag</title></head><body><p>This is <comment>not</comment> Internet Explorer.</p></body></html>
Commenting Script Code
If an HTML document contains JavaScript or VbScript and you’re opening this page on the browser, some old versions of Browser may not work properly. It is recommended to put that script code inside proper HTML comments so that old browsers can work properly.
HTML quotations allow you to include and format quoted text within your web content. HTML provides tags such as <blockquote>, <q>, <cite>, <address>, <bdo>, and <abbr> to structure and style quotes.
These quotation tags help maintain proper formatting and semantics, enhancing the presentation and meaning of quoted content on web pages. Incorporating quotes is essential for conveying information accurately and providing a well-organized reading experience for users.
HTML Quotation Elements
The following are the quotation elements that are used to insert and display quotations on the webpage:
Tag
Description
<q>
Defines a short inline quotation.
<blockquote>
Defines a block-level indented quotation.
<cite>
Specifies a reference to the title of a creative work, such as books or articles.
<address>
Defines contact information.
<bdo>
Overrides text direction.
<abbr>
Defines an abbreviation or acronym.
Short Quotation (<q>)
The <q> tag is used to define short (or inline) quotation marks in HTML, and the browsers often add quotation marks around it.
Syntax
The syntax to define a short quotation is:
<q>The content to be quoted</q>
Example
Following is an example of displaying a short (or inline) quotation on the webpage:
Open Compiler
<!DOCTYPE html><html><head><title>HTML Quotation tag</title></head><body><p>DLF stands for <q>Delhi Land and Finance</q></p><p>Delhi Land and Finance is one of the largest commercial real estate developer in India.</p></body></html>
Example
In the example below, we used the <q> tag on a particular text inside the <h1> tag:
Open Compiler
<!DOCTYPE html><html><head><title>HTML u tag</title></head><body><h1>Welcome to <q> INDIA </q> Kids.</h1></body></html>
Block-level Quotation (<blockquote>)
The <blockquote> tag is to indicate long quotations. It should contain only block-level elements within it and not just plain text. It specifies a section quoted from another source and contains only block-level elements.
We can also use the cite attribute inside the <blockquote> tag to indicate the source of the quotation in URL form.
Syntax
The syntax to define a block-level quotation is:
<blockquote>The multiple line content to be quoted </blockquote>
Example
Following is an example of displaying a block-level quotation on the webpage:
Open Compiler
<!DOCTYPE html><html><head><title>HTML blockquote tag</title></head><body><p>DLF stands for Delhi Land and Finance</p><blockquote>Delhi Land and Finance is one of the largest commercial real estate developers in India. It is also engaged in the business of generation of power provision of maintenance services hospitality and recreational activities life insurance and retail chain outlets. Its internal business includes the development business and rental business. The development business of the Company is involved in the sale of residential spaces select commercial offices and commercial complexes. The company has a unique business model with earnings arising from development and rentals. </blockquote></body></html>
Example
Folloiwng is an example of using the “cite” attribute with the <blockquote> tag:
Open Compiler
<!DOCTYPE html><html><head><title>HTML blockquote tag</title></head><body><h1>wisdompro</h1><p>Here is a quotation from wisdompro official website</p><blockquote cite="https://www.wisdompro.com">Join our millions of loyal visitors to access our free Text Library. From programming languages and web development to data science and cybersecurity, our masterfully crafted Tutorials will help you master any technology or concept from scratch.</blockquote></body></html>
Styling Quotation (<blockquote>)
You can style the <blockquote> tag using the CSS to give it a better look as per your webpage theme.
In the following example, we are setting some CSS properties such as background color, border, border width, and font color to make it more attractive:
Open Compiler
<!DOCTYPE html><html><head><title>HTML blockquote tag</title><style> blockquote { background-color: #006969; color: #fff; border: 1px solid #333; border-radius: 8px; font-weight: 500; padding: 8px; } </style></head><body><h1>wisdompro</h1><p>Here is a quotation from wisdompro official website</p><blockquote cite="https://www.wisdompro.com">Join our millions of loyal visitors to access our free Text Library. From programming languages and web development to data science and cybersecurity, our masterfully crafted Tutorials will help you master any technology or concept from scratch.</blockquote></body></html>
Cite a Quote (<cite>)
The <cite> tag is used to reference the title of a creative work, such as a book, movie, or song, within the content. It provides semantic meaning to the citation.
Example
Here’s a coding example −
Open Compiler
<!DOCTYPE html><html><head><title>Cite Tag Example</title></head><body><p>The information is sourced from <cite>The Elements of Style</cite> by Strunk and White.</p></body></html>
In this example, ‘<cite>’ is used to indicate the title of the referenced book.
Contact Information (<address>)
The <address> tag is used to define the contact information for the author or owner of a document. It often includes details such as an email address, physical address, or other relevant contact information.
Example
Here’s an example −
Open Compiler
<!DOCTYPE html><html><head><title>Address Tag Example</title></head><body><address>
Contact us at: <a href="mailto:[email protected]">[email protected]</a><br>
Visit us at: 123 Main Street, Cityville
</address></body></html>
In this example, the ‘<address>’ tag is used to provide contact information, including an email link and a physical address.
Bi-Directional Override (<bdo>)
The <bdo> tag in HTML, bdo stands for Bi-Directional Override, is used to override the current text direction. It is commonly used in situations where the default text direction needs to be changed, such as for displaying text from right to left.
Example
Here’s an example −
Open Compiler
<!DOCTYPE html><html><head><title>Bi-Directional Override Example</title></head><body><p>This text will go left to right.</p><p><bdo dir="rtl">This text will go right to left.</bdo></p></body></html>
In this example, the text within the ‘<bdo>’ tag is displayed from right to left, overriding the default left-to-right direction.
Abbreviations (<abbr>)
The <abbr> tag is used to define abbreviations or acronyms, i.e., you can define an optional title for full form to a specific word or sentence.
Example
Here’s an example −
Open Compiler
<!DOCTYPE html><html><head><title>Abbreviation Tag Example</title></head><body><p>Tim Berners-Lee, a British scientist, invented the <abbr title="World Wide Web">WWW</abbr> in 1989.</p></body></html>
In this example, <abbr> is used to abbreviate “World Wide Web” to “WWW,” and the ‘title‘ attribute provides the full description of the abbreviation.
HTML formatting defines the way of content representation on the webpage to improve the readability, to give the semantic meaning, and to improve visual styling.
HTML formatting is done by using HTML physical and logical tags. In this chapter, we will learn about the text appearance with HTML formatting.
Let’s understand what are physical and logical tags:
Physical Tags: These tags are used to give the visual appearance to the textual content.
Logical Tags: These tags are used to give logical and semantic meaning to the textual content. There are a few logical tags that are used for screen readers, but the impact of those tags is visible on the browsers.
Use of HTML Formatting
Without formatting, nothing looks good or soothing to our eyes. But HTML formatting is not only for soothing the eye or making textual content attractive. There are few reasons to do the HTML formatting.
HTML formatting is useful in many aspects:
The appearance of any text provides a clear view of the content intent, such as highlighting the keywords, putting meaningful information in the quotations, underlining the main sentence, etc.
Formatting helps search engines understand the content structure and is also helpful for search engine optimization.
Formatting improves the visual layout and improves the readability of the content.
HTML Formatting Tags
The following table has a list of common HTML formatting tags that are used for text formatting:
HTML <b> tag is used for making the text bold; there is no logical aspect of this tag; it is only used for visual impact.
Example
This example demonstrates the use of the <b> tag to make the text formatting bold:
Open Compiler
<!DOCTYPE html><html><head><title>Bold Text Example</title></head><body><p>The following word uses a <b>bold</b> typeface.</p></body></html>
Output:
The following word uses a bold typeface.
HTML <strong> Tag
HTML <strong> tag is used for making the text strong that has more importance, and the text inside it is typically displayed in the bold.
Note: The <b> tag makes the text bold for styling purposes only, while the <strong> tag makes the text bold and also adds importance to the text within its content.
Example
This example demonstrates the use of the <strong> tag to show the important text:
Open Compiler
<!DOCTYPE html><html><head><title>Bold Text Example</title></head><body><p>The following word uses a <strong>strong</strong> typeface.</p></body></html>
Output
The following word uses a strong typeface.
HTML <i> Tag
Any content that is enclosed within the <i>…</i> element is displayed in italicized.
Example
This example demonstrates the use of the <i> tag to make the text italic:
Open Compiler
<!DOCTYPE html><html><head><title>Italic Text Example</title></head><body><p>The following word uses a <i>italicized</i> typeface.</p></body></html>
Output:
The following word uses a italicized typeface.
HTML <em> Tag
HTML <em> tag gives semantic meaning to the text contained within it and renders it in italics on the browser.
Example
This example demonstrates the use of the <em> tag to make the text emphasize:
Open Compiler
<!DOCTYPE html><html><head><title>Italic Text Example</title></head><body><p>The following word uses a <em>emphasized</em> typeface.</p></body></html>
Output:
The following word uses a emphasized typeface.
HTML <big> Tag
Any content that is enclosed within the <big>…</big> element is displayed one font size larger than the rest of the text surrounding it.
Example
This example demonstrates the use of the <big> tag to make the text appear larger than the surrounding text:
Open Compiler
<!DOCTYPE html><html><head><title>Larger Text Example</title></head><body><p>Hello Welcome to <big>Tutorialspoint</big>.</p></body></html>
Output:
Hello Welcome to Tutorialspoint.
HTML <small> Tag
The content, which is enclosed within the <small>…</small> element, is displayed one font size smaller than the rest of the text surrounding it.
Example
This example demonstrates the use of the <small> tag to make the text appear smaller than the surrounding text:
Open Compiler
<!DOCTYPE html><html><head><title>Smaller Text Example</title></head><body><p>Hello Welcome to <small>Tutorialspoint</small>.</p></body></html>
Output:
Hello Welcome to Tutorialspoint.
HTML <sup> Tag
Any content enclosed within the <sup>…</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed at half the height of the surrounding characters, giving it a smaller and slightly raised appearance compared to the rest of the text.
Example
This example demonstrates the use of the <sup> tag to make the text appear slightly above the normal text:
Open Compiler
<!DOCTYPE html><html><head><title>Superscript Text Example</title></head><body><p>The following word uses a <sup>superscript</sup> typeface. </p></body></html>
Output:
The following word uses a superscript typeface.
HTML <sub> Tag
Any content of a <sub>…</sub> element is written in subscript; the font size used is the same as the characters surrounding it and is displayed half a character’s height beneath the other characters. It is typically used for writing things like chemical formulas, where certain characters need to be displayed below the regular text line.
Example
This example demonstrates the use of the <sub> tag to make the text appear slightly below the normal text:
Open Compiler
<!DOCTYPE html><html><head><title>Subscript Text Example</title></head><body><p>The following word uses a <sub>subscript</sub> typeface. </p></body></html>
Output:
The following word uses a subscript typeface.
HTML <ins> Tag
Any content that is enclosed within the <ins>…</ins> element is displayed as inserted text.
Example
This example demonstrates the use of the <ins> tag to mark the text that has been inserted:
Open Compiler
<!DOCTYPE html><html><head><title>Inserted Text Example</title></head><body><p>I want to drink <del>cola</del><ins>wine</ins></p></body></html>
Output:
I want to drink cola wine
HTML <del> Tag
Content that is enclosed within the <del>…</del> element is displayed as deleted text.
Example
This example demonstrates the use of the <del> tag to mark the text that has been removed:
Open Compiler
<!DOCTYPE html><html><head><title>Deleted Text Example</title></head><body><p>Hello welcome to <del>Madras</del><ins>Chennai</ins></p></body></html>
Output:
Hello welcome to Madras Chennai
HTML <u> Tag
Any content enclosed within the <u>…</u> element is displayed with an underline.
Example
This example demonstrates the use of the <u> tag to make the underlined text:
Open Compiler
<!DOCTYPE html><html><head><title>Underlined Text Example</title></head><body><p>The following word uses a <u>underlined</u> typeface.</p></body></html>
Output:
The following word uses a underlined typeface.
HTML <strike> Tag
Content that is enclosed within the <strike>…</strike> element is displayed with strikethrough, which is a thin line through the text.
Example
This example demonstrates the use of the <strike> tag to display strikethrough text:
Open Compiler
<!DOCTYPE html><html><head><title>Strike Text Example</title></head><body><p>The following word uses a <strike>strikethrough</strike> typeface.</p></body></html>
Output:
The following word uses a strikethrough typeface.
HTML <mark> Tag
HTML <mark> tag is used to mark or highlight text that is important for notation purposes.
Example
This example demonstrates the use of the <mark> tag to make the marked text:
Open Compiler
<!DOCTYPE html><html><head><title>Strike Text Example</title></head><body><p>The following word uses a <mark>strikethrough</mark> typeface.</p></body></html>
Output:
The following word uses a marked typeface.
HTML <tt> Tag
Any content enclosed within the <tt>…</tt> element is written in monospaced font. Most of the fonts are known as variable-width fonts because different letters are of different widths (for example, the letter ‘m’ is wider than the letter ‘i’). In a monospaced font, however, each letter has the same width.
Example
This example demonstrates the use of the <tt> tag to make the teletype text:
Open Compiler
<!DOCTYPE html><html><head><title>Monospaced Font Example</title></head><body><p>The following word uses a <tt>monospaced</tt> typeface.</p></body></html>
CSS, or Cascading Style Sheets, is a tool that defines how web documents look on screens or in print. Since its introduction in 1994, the W3C has encouraged the use of style sheets for web design. CSS lets you control the presentation of your content, whether it’s on a screen, in print, or for accessibility, making web design more flexible and efficient.
Cascading Style Sheets (CSS) provide easy and effective alternatives to specify various attributes for the HTML tags. Using CSS, you can specify a number of style properties for a given HTML element.
Each property has a name and a value, separated by a colon (:). Each property declaration is separated by a semicolon (;).
Example of CSS on HTML Document
First, let’s consider an example of an HTML document that makes use of <font> tag and associated attributes to specify text color and font size:
Cascading means that a style applied to a parent element will also apply to all children elements within the parent. So when you are applying any style to an element, you have to be careful about child elements. You can apply different styles to children also.
Ways to Use CSS (Style Sheets) in HTML
There are three ways to include CSS in your HTML document:
External CSS: Define style sheet rules in a separate .css file and then include that file in your HTML document using HTML <link> tag.
Internal CSS: Define style sheet rules in the header section of the HTML document using <style> tag.
Inline CSS: Define style sheet rules directly along-with the HTML elements using style attribute.
Examples of Using Style Sheet in HTML
Let’s see all three ways one by one with the help of suitable examples.
Using External CSS
If you need to use your style sheet (CSS) on various pages, then it’s always recommended to define a common style sheet in a separate file. A CSS file will have an extension as “.css”, and it will be included in HTML files using the <link> tag.
Consider we define a style sheet file style.css, which has the following rules:
Here we defined three CSS rules that will be applicable to three different classes defined for the HTML tags. I suggest you should not bother about how these rules are being defined because you will learn them while studying CSS.
Example to Use External CSS file in HTML
Now let’s make use of the above external CSS file in our following HTML document.
Open Compiler
<!DOCTYPE html><html><head><title>HTML External CSS</title><link rel="stylesheet" type="text/css" href="/html/style.css"></head><body><p class="red">This is red</p><p class="thick">This is thick</p><p class="green">This is green</p><p class="thick green">
This is thick and green
</p></body></html>
Using Internal CSS
If you want to apply Style Sheet rules to a single document only, then you can include those rules in the header section of the HTML document using <style> tag. Rules defined in the internal style sheet override the rules defined in an external CSS file.
Example to Use Internal CSS in HTML
Let’s rewrite the above example once again, but here we will write style sheet rules in the same HTML document using <style> tag.
</style></head><body><p class="red">This is red</p><p class="thick">This is thick</p><p class="green">This is green</p><p class="thick green">
This is thick and green
</p></body></html>
Using Inline CSS
You can apply style sheet rules directly to any HTML element using the style attribute of the relevant tag. This should be done only when you are interested in making a particular change in any HTML element. Rules defined inline with the element override the rules defined in an external CSS file as well as the rules defined in <style> element.
Example to Use Inline CSS in HTML
Let’s rewrite the above example once again, but here we will write style sheet rules along with the HTML elements using style attribute of those elements.
Open Compiler
<!DOCTYPE html><html><head><title>HTML Inline CSS</title></head><body><p style="color:red;">This is red</p><p style="font-size:20px;">This is thick</p><p style="color:green;">This is green</p><p style="color:green;font-size:20px;">
HTML block elements are used to create the logical and semantic layout of a web page. They help to organize the content into meaningful sections and make it easier for browsers, search engines, and site visitors to understand the structure and meaning of different parts of the web page. Inline elements are used to make useful block elements, like adding anchor links.
There are various tags that you can use to create blocks, such as <div>, <p>, <table>, and so on.
All the HTML elements can be categorized into two categories:
Block-level Elements
Inline Elements
HTML Block-level Elements
Block-level elements start on a new line, and anything that follows them appears on the next line. These elements may contain margins to add some space before and after. These elements take up the full width of their parent elements by default; you may set their width by using the CSS width property.
List of HTML Block-level Elements
The following table has the list of all block-level elements −
The following example demonstrates inline elements. Here, we are making the paragraph’s text bold and italic using inline emelents <b> and <i> −
Open Compiler
<!DOCTYPE html><html><head><title>HTML inline Element</title></head><body><h3>Inline Elements in HTML</h3><!-- Using <b> inline element --><p>This <b>paragraph</b> is bold. </p><!-- Using <i> inline element --><p>This is an <i>italic</i> paragraph.</p></body></html>
Grouping Block and Inline Elements
Block-level and inline elements can be grouped using the <div> tag. The <div> tag is a block-level element that plays a big role in grouping various other HTML tags and applying CSS to groups of elements.
Example
This example demonstrates the group of elements using the div tag −
Open Compiler
<!DOCTYPE html><html><head><title>HTML div Tag</title></head><body><!-- First group of tags --><div style="background-color:yellow"><h4>This is first group</h4><p>Following is a list of vegetables</p><ul><li>Beetroot</li><li>Ginger</li><li>Potato</li><li>Radish</li></ul></div><!-- Second group of tags --><div style="background-color:cyan"><h4>This is second group</h4><p>Following is a list of fruits</p><ul><li>Apple</li><li>Banana</li><li>Mango</li><li>Strawberry</li></ul></div></body></html>
HTML fonts play an important role in making a website more user-friendly and increasing content readability. Font face and color depend entirely on the computer and browser that are being used to view your page, but you can use the HTML <font> tag to add style, size, and color to the text on your website. You can also use a <basefont> tag to set all of your text to the same size, face, and color.
HTML <font> Tag
The HTML <font> tag specifies the size, color, and face (family) of the text to be displayed on the webpage.
The <font> tag has three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the <font> tag with the attribute names and values. The text that follows will remain changed until you close with the </font> tag. You can change one or all of the font attributes within one <font> tag.
The font and basefont tags are deprecated, and they are supposed to be removed in a future version of HTML. So they should not be used; rather, it’s suggested to use CSS styles to manipulate your fonts. But still, for learning purposes, this chapter will explain font and basefont tags in detail.
Set Font Size
To set the font size of a web page, we use the size attribute. This attribute allows us to set the font size between 1 and 7, where 1 is the smallest font size whereas 7 is the largest. The default size of a font is 3.
Example
The following example shows how to use the “size” attribute of the <font> tag to set the font size:
In HTML, relative font size means specifying how many sizes larger or smaller than the preset font size should be. We can specify it like <font size = “+n”> or <font size = “−n”>
Example
The code below demonstrates how to set the relative font size of texts in a web page:
You can set the font face (family) using the face attribute, but be aware that if the user viewing the page doesn’t have the font installed, they will not be able to see it. Instead, the user will see the default font face applicable to the user’s computer.
Example
In this example, we are setting multiple font faces to the text by using the “face” attribute:
Open Compiler
<!DOCTYPE html><html><head><title>Font Face</title></head><body><font face = "Times New Roman" size = "5">Times New Roman</font><br /><font face = "Verdana" size = "5">Verdana</font><br /><font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br /><font face = "WildWest" size = "5">WildWest</font><br /><font face = "Bedrock" size = "5">Bedrock</font><br /></body></html>
Specify Alternate Font Faces
A visitor will only be able to see your font if they have that font installed on their computer. So, we can specify two or more font face alternatives by listing the font face names, separated by a comma.
<font face = "arial, helvetica"><font face = "Lucida Calligraphy, Comic Sans MS, Lucida Console">
When your page is loaded, their browser will display the first font face available. If none of the given fonts are installed, then it will display the default font, Times New Roman.
Setting Font Color
We can set any font color of our choice to the texts using the color attribute. To specify the color, we can use either the color name or hexadecimal code of that color.
Note − You can check a complete list of HTML Color Name with Codes.
Example
The following example illustrates how to set color to the texts on a web page:
Open Compiler
<!DOCTYPE html><html><head><title>Setting Font Color</title></head><body><font color = "#FF00FF">This text is in pink</font><br /><font color = "red">This text is red</font></body></html>
The <basefont> Element
The <basefont> element is used to set a default font size, color, and typeface for any parts of the document that are not otherwise contained within a <font> tag. You can use the <font> elements to override the <basefont> settings.
Like the <font> tag, the <basefont> tag also takes color, size, and face attributes, and it will support relative font setting by giving size a value of +1 for a size larger or −2 for two sizes smaller.
Example
In the below HTML code, we are illustrating the use of the “basefont” tag:
Open Compiler
<!DOCTYPE html><html><head><title>Setting Basefont Color</title></head><body><basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000"><p>This is the page's default font.</p><h2>Example of the <basefont> Element</h2><p><font size = "+2" color = "darkgray">
This is darkgray text with two sizes larger
</font></p><p><font face = "courier" size = "-1" color = "#000000">
It is a courier font, a size smaller and black in color.
</font></p></body></html></pre>
The above HTML code will produce four line of text with different font face, color and sizes.
Using Web Safe Fonts in HTML
CSS3 has adapted font combinations technology. If the browser doesn't support the first font, then it tries the next font. Here is the list of CSS Web Safe Fonts.
HTML paragraphs are block-level elements that are used to structure and format text content on a webpage. A paragraph is basically a collection of words and punctuation together. It allows us to organize and present textual information in a coherent and readable manner. The HTML <p> tag is used to create a paragraph element.
Example
This is the first paragraph: Hello World!.
This is the second paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut purus maximus, efficitur nibh non, gravida odio. Suspendisse justo tortor, consequat sed mauris sit amet, varius fringilla arcu. Duis et elit quis metus molestie lacinia.
Reason to Use Paragraphs
Paragraphs typically create space above and below the text, separating it from surrounding content. They can be styled using CSS to control aspects such as font size, color, alignment, and spacing. In web development, paragraphs play a crucial role in conveying information effectively, enabling clear communication, and enhancing the overall user experience on a website.
Creating a Paragraph
To create a paragraph in HTML, use the <p> tag. Place text inside <p> and </p> that you want to display as a paragraph on a webpage.
Syntax
Below is the syntax to create a paragraph in HTML:
<p>Text to display as a paragraph on the webpage</p>
Example of HTML Paragraph
In the following example, we are creating two paragraphs:
To create two paragraphs:
Open Compiler
<!DOCTYPE html><html><head></head><body><p>Lorem ipsum odor amet, consectetuer adipiscing elit. Proin eros habitant accumsan vulputate curae eu fusce vehicula.</p><p>Laoreet sociosqu taciti iaculis cras leo nec litora. Nisi vehicula massa fusce justo libero duis. Per condimentum vivamus nec elementum nullam sociosqu vel scelerisque.</p></body></html>
Line Breaks With Paragraphs
The <br> tags are used to insert line breaks within a paragraph to control the text layout.
Example
The following example demonstrates how you can use line breaks with the HTML paragraph:
Open Compiler
<!DOCTYPE html><html><head><title>Line Breaks With Paragraphs</title></head><body><p>This is a paragraph with a <br> line break. </p></body></html>
Headings With Paragraphs
Headings, such as <h1>, provide a hierarchical structure and can be used alongside paragraphs.
Example
This example shows a heading with the paragraph:
Open Compiler
<!DOCTYPE html><html><head><title>Headings With Paragraphs</title></head><body><h1>Main Heading</h1><p> This is a paragraph beneath the main heading. </p></body></html>
Lists With Paragraphs
Lists can be incorporated within paragraphs for content organization.
<!DOCTYPE html><html><head><title>Lists With Paragraphs</title></head><body><p>This is a paragraph following an unordered list.</p><ul><li>Item 1</li><li>Item 2</li></ul></body></html>
Emphasis Within Paragraphs
Tags like <em> and <strong> allow you to emphasize text within paragraphs.
Example
This example demonstrates the use of em and strong tags inside a paragraph, like how you can use formatting tags with an HTML paragraph:
Open Compiler
<!DOCTYPE html><html><head><title>Emphasis Within Paragraphs</title></head><body><p> This is a <em> paragraph </em> with <strong> emphasized </strong> text. </p></body></html>
Links within Paragraphs
You can insert links within paragraphs using the <a> tag.
Example
This example demonstrates how you can place the links inside a paragraph:
Open Compiler
<html><head><title>Links within Paragraphs</title></head><body><p>Visit our website <a href="https://www.tutorialspoint.com">here </a>. </p></body></html>
Inline Styles Within Paragraphs
You can use the <span> tag with inline styles to apply specific formatting.
Example
This example demonstrates how you can apply inline CSS styles to some of the parts of the text inside a paragraph:
Open Compiler
<html><head><title>Inline Styles Within Paragraphs</title></head><body><p>This is a <span style="color: blue;">blue</span> text within a paragraph. </p></body></html>
Images Within Paragraphs
You can embed images within paragraphs using the <img> tag.
Example
In this example, we are displaying an image inside a paragraph:
Open Compiler
<html><head><title>Images Within Paragraphs</title></head><body><p> Here's an image: <img src="\html\images\test.png" alt="Example Image"></p></body></html>
Superscript and Subscript Within Paragraphs
Use <sup> and <sub> tags to create superscript and subscript text.
Example
This example demonstrates how you can display superscripted and subscripted text inside a paragraph:
Open Compiler
<html><head><title>Superscript and Subscript Within Paragraphs</title></head><body><p> H<sub>2</sub>O is the chemical formula for water. 2<sup>3</sup> equals 8.</p></body></html>
Abbreviations Within Paragraphs
The <abbr> tag helps define abbreviations or acronyms.
Example
This example shows an abbreviation within a paragraph; it is useful when you want to display an abbreviation or acronym of a specific word:
Open Compiler
<html><head><title>Abbreviations within Paragraphs</title></head><body><p><abbr title="Hypertext Markup Language">HTML</abbr> is used for web development.</p></body></html>
Citations Within Paragraphs
The <cite> tag specifies citations and references within paragraphs.
Example
This example demonstrates the use of the <cite> tag inside a paragraph:
Open Compiler
<html><head><title>Citations Within Paragraphs</title></head><body><p> The book <cite>War and Peace </cite> is a classic novel. </p></body></html>
Styling Paragraph with CSS
The following are the different ways to style HTML paragraphs:
1. Applying CSS Directly to Paragraphs
You can apply CSS styles directly to the paragraphs by writting inline CSS using the ‘style’ attribute with the <p> tag.
Open Compiler
<!DOCTYPE html><html><head></head><body><p style="font-size: 24px; color: #f40;">This is the first paragraph.</p><p>This is the second paragraph.</p><p style="font-size: 24px; background-color: #f40; color: #fff;">This is the third paragraph.</p></body></html>
2. Applying CSS on ‘p’ Element
You can apply CSS styles to all paragraphs within the HTML document by writing CSS rules for the <p> tag.
Open Compiler
<!DOCTYPE html><html><head><style>
p {
font-size: 22px;
color: #f40;
}
</style></head><body><p>This is the first paragraph.</p><p>This is the second paragraph.</p><p>This is the third paragraph.</p></body></html></pre>
3. Using CSS Class with Different Paragraphs
You can apply CSS styles to specific paragraphs by creating a CSS class and using it with the different paragraphs. For this, use the 'class' attribute with the <p> tag.
Open Compiler
<!DOCTYPE html><html><head><style>
.special {
font-size: 24px;
color: #f40;
}
</style></head><body><p class="special">This is the first paragraph.</p><p>This is the second paragraph.</p><p class="special">This is the third paragraph.</p></body></html></pre>
CSS provides extensive control over paragraph styles, allowing you to create visually appealing and well-formatted text on your web page.
HTML headings define the hierarchy (levels) and structure of content on a webpage. They create a visual hierarchy, with the highest-level heading, which is h1, indicating the most important content or the main heading, and lower-level headings like h2, h3, h4, etc. for subtopics.
Reason to use Headings
Headings are crucial for structuring content and providing a clear visual indication of the beginning of new sections or topics. Properly structured headings enhance readability and user experience on websites, ensuring that information is organized and easy to navigate.
Heading Impact on SEO: The well-organized headings help search engines to understand the content structure and indexing.
Highlighting Important Topics: The use of heading tags properly keeps the content readable.
HTML Heading Tags
The headings are defined with headings tags (<h1> to <h6>). It is important to use heading tags to show the content structure on a webpage. HTML has a different level of heading tags. The hierarchy determines the importance of content and aids in creating a clear information flow for both users and search engines.
Example
The following example shows the different levels of the HTML heading −
Open Compiler
<!DOCTYPE html><html><body><h1>This is Heading 1 (H1 Tag)</h1><h2>This is Heading 2 (H2 Tag)</h2><h3>This is Heading 3 (H3 Tag)</h3><h4>This is Heading 4 (H4 Tag)</h4><h5>This is Heading 5 (H5 Tag)</h5><h6>This is Heading 6 (H6 Tag)</h6></body></html>
Hierarchical Structure of Heading Tags
Below is the list according to the hierarchy of the heading tags (most to least significant) −
The <h1> Tag − The top-level heading denotes the main topic or title of the entire page.
The <h2> Tag − Subheadings under <h1> represent major sections related to the main topic. They provide a more specific context to the content.
The <h3> to <h6> Tags − These tags are used for further subsections or nested content within <h2> headings. They offer a deeper level of hierarchy for organizing content within specific sections.
Examples of HTML Headings
In these examples, you will see the usage of all the heading tags to create different types of headings and styling them using the CSS −
Headings Using <h1> to <h6> Tags
In this example, we will use the heading tags (h1 to h6); each of them has a different size and weight for the content −
Open Compiler
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Example of HTML Headings</title></head><body><h1>Heading 1: Main Heading of Page</h1><h2>Heading 2: Section</h2><h3>Heading 3: Subsection</h3><h4>Heading 4: Sub-subsection</h4><h5>Heading 5: Lower-level heading</h5><h6>Heading 6: Lowest-level heading</h6></body></html>
Styling Headings With CSS
In the following example, we will apply the style such as font family, font color, font size, etc. to the headings −
Open Compiler
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Example of HTML Headings</title><style>
Here, we have applied "Verdana" font style to all heading tags, defined the "Red" color to H1 heading with the font size 32px, and defined the "Green" color to H2 heading with the font size 30px.
Using HTML Tags Within Heading Tags
HTML headings (h1 to h6) serve as the main titles and subheadings for content organization. Within these heading tags, you can use various other HTML tags to enhance and structure your content effectively. Here are some examples −
The <span> Tag
You can use the <span> tag to apply inline styles or classes to specific portions of the text within a heading. This allows for custom styling of text within the heading.
Open Compiler
<!DOCTYPE html><html><head><title>Using <span> Tag</title></head><body><h2>This is a <span style="color: blue;">blue</span> word.</h2></body></html>
The <a>Tag for Links
To create a link within a heading, use the <a> tag. This is useful for headings that lead to other pages or sections of your website.
Open Compiler
<!DOCTYPE html><html><head><title>Using <a> Tag for Links</title></head><body><h1><a href="https://www.tutorialspoint.com">Visit our website</a></h1></body></html>
The <em> and <strong> Tags
These tags are used for emphasizing text within headings. The <em> tag italicizes the text, while <strong> makes it bold.
Open Compiler
<!DOCTYPE html><html><head><title>Using <em> and <strong> Tags</title></head><body><h3>This is <em>emphasized</em> and <strong>important</strong> text.</h3></body></html>
The <sup> and <sub> Tags
In heading, to include superscript or subscript text within a heading, use <sup> and <sub>.
Open Compiler
<!DOCTYPE html><html><head><title>Using <sup> and <sub> Tags</title></head><body><h4>The 10<sup>th</sup> floor is at the top.</h4><h5>The chemical formula for water is H<sub>2</sub>O.</h5></body></html>
The <abbr> Tag for Abbreviations
When you need to include an abbreviation or acronym in a heading, use the <abbr> tag. It often provides a tooltip with the full meaning.
Open Compiler
<!DOCTYPE html><html><head><title>Using <abbr> Tag for Abbreviations</title></head><body><h2>HTML stands for <abbr title="Hypertext Markup Language">HTML</abbr>.</h2></body></html>
The <br> Tag for Line Breaks
Sometimes, you might want to create line breaks within a heading for better formatting. The <br> tag serves this purpose.
Open Compiler
<!DOCTYPE html><html><head><title>Using <br> Tag for Line Breaks</title></head><body><h3>This is the first line.<br>This is the second line.</h3></body></html>
The <mark> Tag
Use the <mark> tag to highlight specific text within a heading. It's often used to indicate search results or selected portions of text.
Open Compiler
<!DOCTYPE html><html><head><title>Using <mark> Tag</title></head><body><h1>Search for "<mark>important</mark>" information here.</h1></body></html>
Mistakes to be Avoided
Make sure we avoid the following mistakes while using the heading tag −
HTML attributes are special words that provide additional information to an HTML element. Attributes are placed inside the element’s opening tag, and they are used to configure or adjust the element’s behavior. All attributes are made up of two parts: a name and a value −
Name: The attribute name is the keyword, also known as the attribute identifier, which defines a specific characteristic for the element in which it is using. For example, the paragraph <p> element (in the below-given example) has an attribute “align“, which defines the alignment of the paragraph on the page.
Value: The attribute value is the data or information that defines the value to be set for that attribute. The value is assigned within the double quotes. For example, “left“, “center“, or “right” can be assigned to the “align” attribute with the paragraph tag (as shown in the below example).
Below is the syntax of an element HTML having attribute −
<tag_name attribute="Value">...</tag_name>
Rules and Characteristics
The following are the rules and characteristics of HTML attributes; you should follow while using attributes with HTML elements:
Attributes are optional; you can use them to provide additional information about an HTML element.
Attributes have name and value pairs, but some of the attributes do not require any value; those are known as Boolean attributes.
An HTML element can have multiple attributes, and they should be separated by spaces.
Attributes should always be written with the opening tag.
All HTML elements can have attributes except a few like <head>, <title>, <script>, etc.
W3C recommends using attributes in lowercase and keeping the value in quotes.
Example of HTML Attributes
This example demonstrates the use of attributes with HTML elements −
Open Compiler
<!DOCTYPE html><html><head><title>Example of HTML Attributes</title></head><body><a href="https://www.tutorialspoint.com">Visit our homepage</a></body></html>
In this example, href is the attribute name and “https://www.tutorialspoint.com” is the attribute value.
Core Attributes Every Element Can Use
The four core attributes that can be used on the majority of HTML elements (although not all) are −
The id Attribute
The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. There are two primary reasons that you might want to use an id attribute on an element −
If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its content.
If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute to distinguish between elements that have the same name.
We are using the id attribute to distinguish between two paragraph elements −
Example
Open Compiler
<!DOCTYPE html><html><head><title>ID Attribute Example</title></head><body><p id="html">This para explains what is HTML</p><p id="css">This para explains what is Cascading Style Sheet</p></body></html>
The title Attribute
The title attribute gives a suggested title for the element. The syntax for the title attribute is similar as explained for id attribute −
The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip when the cursor comes over the element or while the element is loading.
Example
Open Compiler
<!DOCTYPE html><html><head><title>The title Attribute Example</title></head><body><h3 title="Hello HTML!">Titled Heading Tag Example</h3></body></html>
On executing the above example, it will display the heading “Titled Heading Tag Example”. If you bring your cursor over it, you will see that whatever title you used in your code is coming out as a tooltip of the cursor.
The class Attribute
The class attribute specifies one or more CSS classes for an HTML element. Multiple classes can be used on a single element with this attribute. The value of this attribute is a space-separated list of class names if you are specifying multiple classes.
Example
class="className1 className2 className3"
The style Attribute
The style attribute allows you to write inline CSS rules for an element.
Example
Open Compiler
<!DOCTYPE html><html><head><title>The style Attribute</title></head><body><p style="font-family:arial; color:#FF0000;">Welcome to Tutorialspoint...</p></body></html>
On executing the above example, it will display the text “Welcome to Tutorialspoint…” in the “Arial” font and with a red color.
Internationalization (i18n) Attributes
There are three internationalization attributes, which are available for most (although not all) XHTML elements.
The dir Attribute
The dir attribute allows you to indicate to the browser about the direction in which the text should flow. The dir attribute can take one of two values, as you can see in the table that follows −
S.No
Value & Meaning
1
ltrLeft to right (the default value)
2
rtlRight to left (for languages such as Hebrew or Arabic that are read right to left)
Example
Open Compiler
<!DOCTYPE html><html dir="rtl"><head><title>Display Directions</title></head><body>
This is how IE5 renders right-to-left directed text.</body></html>
If you click on Edit & Run, you can observe the text aligned to right.
When dir attribute is used within the <html> tag, it determines how text will be presented within the entire document. When used within another tag, it controls the text’s direction for just the content of that tag.
The lang Attribute
The lang attribute allows you to indicate the main language used in a document, but this attribute was kept in HTML only for backwards compatibility with earlier versions of HTML. This attribute has been replaced by the xml:lang attribute in new XHTML documents.
The values of the lang attribute are ISO-639 standard two-character language codes. Check HTML Language Codes: ISO 639 for a complete list of language codes.
Example
Open Compiler
<!DOCTYPE html><html lang="en"><head><title>English Language Page</title></head><body>
This page is using English Language
</body></html>
Boolean Attributes
Boolean attributes represent true and false values and do not require any value with the attribute name. To set the true value, you need to write the attribute’s name, and to set it false, the attribute should be omitted altogether.
Here are some Boolean attributes –
disabled
readonly
required
inert
autocomplete
Example
Here is an example of an HTML Boolean attribute (required) −
Open Compiler
<!DOCTYPE html><html><body><h1>Example of "required" attribute</h1><form><label for="user_name">Input User Name:</label><input type="text" id="user_name" name="user_name" required><input type="submit"></form></body></html>
The xml:lang Attribute
The xml:lang attribute is the XHTML replacement for the lang attribute. The value of the xml:lang attribute should be an ISO-639 country code, as mentioned in the previous section.
Generic Attributes
Here’s a table of some other attributes that are readily usable with many of the HTML tags.
Names an element for use with Cascading Style Sheets.
class
User Defined
Classifies an element for use with Cascading Style Sheets.
width
Numeric Value
Specifies the width of tables, images, or table cells.
height
Numeric Value
Specifies the height of tables, images, or table cells.
title
User Defined
“Pop-up” title of the elements.
href
User Defined
Specifies the destination URL for a link or reference.
src
User Defined
Specifies the source file for media elements like <img>, <audio>, or <iframe>.
We will see related examples as we proceed to study other HTML tags. For a complete list of HTML tags and related attributes, visit: HTML Tags Reference and HTML Attributes Reference.
Best Practices for Using HTML Attributes
There are certain practices you should follow to use attributes on any element, please check the below-mentioned ways to do so:
1. Write Values in Quotes
You should always write the attribute values in single or double quotes.
<!-- Good Practice --><a href="https://www.tutorialspoint.com/html/html_overview.htm">
HTML Introduction
<a><!-- Bad Practice --><a href=https://www.tutorialspoint.com/html/html_overview.htm>
HTML Introduction
<a>
2. Use Lowercase
HTML is case-insensitive, but the good practice is to write the HTML attribute in lowercase.
<input type="text">
3. Use of Single and Double Quotes Together
When you need to provide any string in quotes as the value of an attribute, you can use the combination of single and double quotes.
<!-- Can use single and double Quotes --><p title="We are known for 'Simple Easy Learning'">
Tutorialspoint
</p><p title='We are known for "Simple Easy Learning"'>
An HTML element is a fundamental component of an HTML document that can contain data to display on the webpage, such as text, image, link, or sometimes nothing. An HTML element includes an opening tag, content, and a closing tag, where the opening tag may also include attributes.
An HTML element includes:
Opening Tag: An opening tag specifies the beginning of the element and may include multiple attributes.
Content: The content part includes the information to be displayed or processed within an element.
Closing Tag: A closing tag marks the end of the element (A closing tag may be optional for some elements).
An HTML document consists of a tree of HTML elements, and they define the content and layout of a webpage, like how and what content should display in the different sections of a webpage.
Example of HTML Elements
Some of the examples of HTML elements are as follows:
<p>This is paragraph content.</p><h1>This is heading content.</h1><div>This is division content.</div>
The following table displays the different parts (opening tag, content, and closing tag) of the HTML elements used in the above example:
Opening Tag
Content
Closing Tag
<p>
This is paragraph content.
</p>
<h1>
This is heading content.
</h1>
<div>
This is division content.
</div>
So here <p>…</p> is an HTML element, <h1>…</h1> is another HTML element.
HTML Element Structure
The following image demonstrates the structure of an element, like how an HTML element is written with the opening and closing tags:
Elements vs. Tags: What’s the Real Difference?
This is the most common point of confusion for beginners. Here’s a simple way to think about it:
An HTML Tag is just the opening <p> or closing </p> part. They are the instructions.
An HTML Element is the entire thing: the opening tag, the content inside, and the closing tag.
Think of it like a sandwich. The two slices of bread are the tags, and the complete sandwich with everything inside is the element.
Understanding Nested Elements
HTML allows nesting of elements. The nested elements are created by placing one or more HTML elements inside an HTML element. Where the container element can be considered as a parent element and others are as child elements. The child elements are nested inside the parent element. We can have multiple levels of nesting; however, it requires some guidelines to follow −
Every opening tag must have a corresponding closing tag.
The closing tag of the parent element must come after the closing tag of the child element.
The nested elements must be valid HTML elements.
Example
In the following example, we are nesting the italicized element (<i>…</i>) within the h1 element and underline (<u>…</u>) element within the paragraph element.
Open Compiler
<!DOCTYPE html><html><head><title>Nested Elements Example</title></head><body><h1>This is <i>italic</i> heading</h1><p>This is <u>underlined</u> paragraph</p></body></html>
On executing the above example, we can observe the two sentences where we have nested one HTML within another.
Note: In the above example, the <html>, <head>, and <body> tags are also nested elements as they have one or more elements inside them.
Special Case: Empty (Void) Elements
HTML void elements are those elements that don’t require closing tags. These tags don’t have any content model and even don’t allow nesting of elements. The void elements are also known as empty or self-closing elements.
Some of the void elements are such as <img />, <hr />, and <br /> elements. The below table shows a list of void elements −
S.No
Elements & Description
1
<img>Used for inserting images within HTML documents.
<source>It is used for embedding media resources like audio and video.
Note: You might see these tags written with a / at the end, like <br />. This is an older syntax and is not needed in modern HTML5.
Example
The following example demonstrates the example of HTML void elements −
Open Compiler
<!DOCTYPE html><html><body><p>This line contains a line break tag, <br> hence content is visible in two separate lines.</p><p>This line is <hr>separated by a horizontal rule.</p></body></html>
On executing, the above code will produce two paragraphs, one with a line break and the other with a horizontal rule.
Attributes With HTML Elements
The attributes can be placed with an opening tag by using the pairs of attribute name and value. Multiple attributes can be separated with a space.
The following statement demonstrates the use of two attributes src and alt with an HTML element img:
<img src="logo.jpg" alt="TutorialsPoint Logo" />
Mandatory Closing HTML Elements
The HTML elements that are opened must be closed. Only the void elements like <img />, <hr />, <br />, etc. do not require closing tags; other elements such as <p> and <h1> require closing tags after the content part.
If any HTML element does not include a closing tag, it may not cause an error, and some content may still display properly. However, never miss the closing tag, as it may lead to unexpected and inconsistent results.
Example
In this example, we are removing the closing tags from the paragraph tag. Still, it will show the correct result.
Open Compiler
<!DOCTYPE html><html><body><p>This line contains a line break tag, <br /> hence content is visible in two separate lines.
<p>This line is <hr /> separated by a horizontal rule.
</body></html>
The above HTML code will produce two paragraphs, one with a line break and the other with a horizontal rule.
Are HTML Elements Case-sensitive?
No, HTML elements are not case-sensitive, which means we can write HTML elements either in uppercase or lowercase. However, it is not a good practice, as W3C recommends and demands lowercase. Hence, always try to use lowercase for the tag names.
Example
In the following example, we are writing HTML elements (tag names) in uppercase and mixed case (uppercase and lowercase); see the output; there is no error and HTML code runs fine −
Open Compiler
<!DOCTYPE html><HTml><BODY><P>HTML is not case sensitive i.e we can use both upper or, lower case letters in the tags.</p></BOdy></html>
