HTML Elements

HTML Elements

HTML Elements.

Common elements like headings (<h1> to <h6>), paragraphs (<p>), and line breaks (<br>)

when you create a certain HTML-based website. Then, to arrange the online content and web resource formatting on a web page website, you require standard HTML tags/elements like headers, paragraphs, and line breaks, to mention a few.

Here is a brief description of some popular html tags.

Html Heading Tags (<h1> to <h6>).

In order of greatest heading (h1) to smallest heading (h6) in size, html heading elements are used to specify data and information in the hierarchical structure of your web page content. The text information for headings in standard HTML is shown from the highest level (h1) to the lowest level (h6). Whereas often, the primary page heading of a web page is written in <h1> heading 1. Following this, sub-sections are denoted by <h2> heading 2 and <h3> heading 3. These headers are taken into consideration by Google and other search engines when determining how important and organized a web page’s content is.

Example.

<h1>Main Headings</h1>

<h2>Subsection 2</h2>

<h3>Sub-section 3</h3>

<h4>Sub-section 4</h4>

<h5>Sub-section 5</h5>

<h6>Sub-section 6</h6>

Html heading tag example.

<html>

<body>

<head></head>

<title>Heading tag example</title>

<h1>Html Headings 1</h1>

<h2>Html Heading 2</h2>

<h3>Html Heading 3</h3>

<h4>Html Heading 4</h4>

<h5>Html Heading 5</h5>

<h6>Html Heading 6</h6>

</body>

</html>

Html Paragraph Tag (<p>).

The HTML <p> tag element is used to construct numerous text paragraphs on your website or to provide additional text paragraph information. When you enter many new blocks of text, this creates space between them. This makes it simpler to write many paragraph blocks or sections on any web page, as well as reading and understanding the material inside these paragraphs.

Example

<p>You can add here one or more paragraph content! </p>

Simple paragraph tag html page example.

<html>

<body>

<h1>Html Paragraph tag example</h1>

<p>This is the simple paragraph demonstration </p>

<p>Html is a popular web development or web structuring markup languages. Which helps to develop basic structure of any website web page </p>

<p>Css helps us to design or decorate any ordinary look website or web page </p>

</body>

</html>

Line break (<br>).

To insert a line break within an existing paragraph of text or to split or transfer a paragraph of text to the next line, use the HTML “br” tag or element. Instead of starting a new paragraph, this forces the text content of a typical web page paragraph to be shown on a new line. The line break tag is then often helpful. when a line of text can be broken without adding the extra space required for an HTML paragraph.

Example.

<p>HTML is great language <br> it is the core foundation of web development. </p>

Html br tag line break example.

<html>

<body>

<h1>Html Br Tag Example</h1>

<p>Html<br>Css<br>W3.css<br>Javascript<br>Bootstrap<br>Asp.net</p>

</body>

</html>

Lists (unordered <ul> and ordered <ol>) and list items (<li>)

Every HTML web page uses lists to arrange and show the text content on the page in an orderly and structured way. In HTML markup language, lists can be of two major forms. Both lists, known as ordered lists (<ol>) and unordered lists (<ul>), use li> tags to show items from web pages or text material.

So let’s learn more in-depth about HTML ordered and unordered lists.

Html Unordered list (<ul>).

Any HTML web page that is developed uses an unordered list to build a list of objects and text data. Each shown list item is often preceded by a bullet point symbol or some other form of symbol or marker that is automatically displayed by default, and the order of any html elements is irrelevant.

<ul>

       <li>Html</li>

       <li>Css</li>

       <li>W3.Css</li>

       <li>Javascript</li>

       <li>Asp.net</li>

</ul>

Five list items are created by the code above in an unordered list category. Browsers often use bullet points to denote each list item by default. However, CSS allows you to change the advanced unordered list marker style.

Html Ordered list (<ol>).

An ordered list is utilized to construct a list of those text elements in any built HTML web page. The sequence order is in ascending order, and each shown list item is often numbered in ascending sequential order, especially when the order of text content or objects to be displayed is important.

<ol>

       <li>Python</li>

       <li>Java</li>

       <li>C Programming</li>

       <li>C++ Programming</li>

       <li>Kotlin Programming</li>

</ol>

With five list items, this code generates an ascending-ordered list. Web browsers by default use numbers to denote the order of list items. However, you may use external CSS styling to change the default numbering styles to suit your needs.

Html List item (<li>).

Individual list elements in an ordered or unordered list are defined by the HTML li tag element. Each <li> tag component relates to a list item.

<ul>

       <li>Male</li>

       <li>Fe-male</li>

       <li>Boy</li>

       <li>Girl</li>

       <li>Transgender</li>

</ul>

In the example given here, each <li> element represents a separate list item in an unordered list.

This is a perfect example of all list item display in single html web page.

<!DOCTYPE html>

<html>

<head>

    <title>Html Ordered and Unordered List Example</title>

</head>

<body>

    <h2>Html Unordered List Item Preview. </h2>

    <ul>

       <li>Html</li>

       <li>Css</li>

       <li>W3.Css</li>

       <li>JavaScript</li>

       <li>Asp.net</li>

</ul>

    <h2>Html Ordered List Item Preview. </h2>

    <ol>

       <li>Python</li>

       <li>Java</li>

       <li>C Programming</li>

       <li>C++ Programming</li>

       <li>Kotlin Programming</li>

</ol>

<h2>Html Li Tag Preview</h2>

       <li>Male</li>

       <li>Fe-male</li>

       <li>Boy</li>

       <li>Girl</li>

       <li>Transgender</li>

</body>

</html>

Special characters and entities

Any HTML web page that has been specially prepared may contain special characters, such as those having unique HTML meanings or those that are not included in the standard character set library. And corporation entities are frequently used in html web pages to symbolise them. The character set sequences or unique shapes and symbols that make up these HTML entities are. They begin with the ampersand (&) symbol in an HTML web page and conclude with the semicolon (;) operator. Any web page may show a variety of character sets or symbols by using these unique html symbols.

Here are some common special HTML character sets and their related HTML information.

< – less than sign or symbol.

HTML symbol format – &ltd.

Usage – Can be used to represent < less than symbol in existing html page.

>– greater than sine.

HTML symbol format – &gt.

Usage – Can be used to represent greater than symbol > in any web page.

And – ampersand.

HTML symbol format – &amp;

Usage – The ampersand can be used to represent itself and other html symbols.

– double quotation marks.

HTML symbol format – &quot.

Usage − Can be used to represent double quotes symbol in the existing web page.

– single quotation mark (apostrophe).

HTML symbol format – &apos.

Usage − Used to represent single quotes information and text in an existing web page. Note that this is not supported in older versions of HTML 4, but it works with HTML5 and XML.

© – Copyright symbol.

HTML symbol format – &copy.

Usage – Can be used to represent the copyright symbol © at the bottom of any web page.

® – Registered trademark symbol.

HTML symbol format – &reg.

Usage – Can be used to represent the registered trademark symbol ® in an existing html web page.

   – non-breaking space.

HTML symbol format – &nbsp.

Usage – Used to insert a non-breaking space in any html web page. Which prevents the web browser from breaking the text at that point.

° – degree symbol.

HTML symbol format – &deg.

Usage – Can be used to represent the degree symbol ° in designing web pages.

– Euro symbol.

HTML symbol format – &euro.

Usage − You can use it to represent the Euro currency symbol € in your web page.

You can see a example of all above uses html special character set.

<!DOCTYPE html>

<html>

<head>

    <title>Let’s Explore Some Special Characters in Html Web page</title>

</head>

<body>

    <h1>View the list of html special character sets</h1>

<p>Explore Different Kinds of Special Character Sets or Symbol for different website purpose. </p>

    <ol>

        <li>&lt; – It Display Less Than Symbol With – &amp;lt;</li>

        <li>&gt; – It Display Greater Than Symbol With – &amp;gt;</li>

        <li>&amp; – It Display Ampersand Symbol With – &amp;amp;</li>

        <li>&quot; – It Display Double Quotation Mark Symbol With – &amp;quot;</li>

        <li>&#39; – It Display Single Quotation Mark Apostrophe Symbol With – &amp;#1; it Support only HTML5 and XML versions</li>

        <li>&copy; – Single Quotation Mark (Apostrophe)Copyright Symbol – &amp;copy;</li>

        <li>&reg; – It Display Registered Trademark Symbol With – &amp;reg;</li>

        <li>&deg; – It Display Degree Symbol With – &amp;deg;</li>

        <li>&euro; – It Display Euro Symbol With – &amp;euro;</li>

        <li>&nbsp; – It Display Non-Breaking Space With – Text&amp;nbsp;Without Space</li>

    </ol>

    <p>All of the above use different kind of special character sets or symbol, you can use them in html web page according to need</p>

</body>

</html>

Rate this post

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top