Html Entity, Symbol and Lists


HTML ENTITIES:-

  • some characters are reserved in HTML.
  •  If you can use less than, greater than, copy symbol and emoji sign. 
  •  In your text but the browser doesn't understand so that might mix this with tags.

Entity names are case sensitive.

That, character entities are used to display the reserved entities in HTML.

In Html character entities look like:-
                                                            &entity_name;
                    or
                   &#entity_number;


Advantage and disadvantage using entity name:-

Advantage  -  Entity name is easy to remember. 

Disadvantage:-  Sometime browser does not support all the entity names so entity number is good to prefer.


Ex:- for less than sign(<) :- &lt;  or  &#60;
    

NON-BREAKING SPACE:-
  • Its uses as an entity in Html. it's non-breaking space:-  &nbsp;
  • nbsp is a space that will not break line. Two words separated by a non-breaking space.
  • Another use of nbsp is to prevent browsers from truncating space in Html.

Some useful HTML entities:-

Result    Description      Entity Name     Entity Number  
 non-breaking space   &nbsp;    &#160; 
 <  less than &lt; &#60;
 > greater than &gt; &#62;
 & ampersand &amp; &#38;
 "  double quotation mark &quot; &#34;
 ' single quotation mark&apos;  &#39;
 ¢ cent &cent;  &#162; 
 £  pound&pound;  &#163;
 ¥ yen &yen; &#165; 
 €euro &euro; &#8364; 
 ©copyright  &copy;&#169; 
   ®  registered trademark  &reg;  &#174;


Ex:-

<HTML>
<head>
<title>pra1</title></head>
<body><b>Entities</b><br>
&copy;<br>
&lt;<br>
&quot;<br>
&gt;<br>
&amp;<br>
&reg;<br>
</body>
</html>




COMBINING DIACRITICAL MARKS.
  •  A diacritical mark is a 'glyph' added to a letter.
  • Diacritical marks called as an accent .mark can appear both below and above a letter, inside a letter, and between the letter.
  •  Also, it's used in combination with alphanumerical character.
  • The result is it's a combination of alphanumerical character and with a diacritical mark.

Some useful HTML marks:-

 Mark      Character        Construct        Result   
  ̀ aa&#768; à 
  ́ a a&#769; á
 ̂ a a&#770; â 
  ̃a a&#771; ã
  ̀ O O&#768; Ò
  ́ O O&#769;Ó 
 ̂ O O&#770;Ô
  ̃ O O&#771;Õ 

HTML symbol entities:-

         many mathematical. technical and currency symbols are not present in the normal keyword.
you can use an entity number, decimal reference

Some mathematical symbol:-

 Char  Number     Entity       Description  
∀ &#8704;  &forall; For all
 ∂ &#8706; &part;Partial differential
 ∃ &#8707;&exist;  Three exists
 ∅ &#8709; &empty; Empty sets
 ∇ &#8711; &nabla; Nabla
 ∈ &#8712;&isin;  Element of
 ∉ &#8713;&notin;  Not an element of
 ∋ &#8715;    &ni; Contains as number 
 ∏ &#8719;&prod;  n-ary product
 ∑ &#8721; &sum; n-ary summation


Some greek letter symbol:-

 Char   Number         Entity       
 A &#913; &Alpha;
 B &#914; &Beta;
Ξ“ &#915; &Gamma;
 Ξ” &#916; &Delta;
 Ξ• &#917; &Epsilon;


Some other entities:-

 Char Number Entity Description
 © &#169;&copy;  COPYRIGHT SIGN
 ® &#174; &reg; REGISTERED SIGN
 €&#8364;  &euro;EURO SIGN 
 ™ &#8482; &trade;TRADEMARK 
 ← &#8592;  &larr;LEFTWARDS ARROW 
↑ &#8593;  &uarr; UPWARDS ARROW
→  &#8594;  &rarr;RIGHTWARDS ARROW 
 ↓ &#8595;  &darr;
DOWNWARDS ARROW


HTML EMOJI :-

  •  Emoji looks like an image or icon but is not.
  • The character  A, B, C are displayed in number like 65,66, and so on.......
  • Emoji are also the character of the UTF-8 alphabet.

Emoji symbol:-


Emoji   Value
  😁             #128513;
  πŸ˜‚                 #128514;
  πŸ˜ƒ                 #128515;
  πŸ˜„             #128516;
   πŸ˜…           #128517;

EX:-

<html>
<body>
<p>&#128512;</p>
<p>&#128516; &#128525; &#128151;</p>
</body>
</html>


HTML LIST:-

1.<ul>
2.<ol>   
3.<li>

1.<li> - List item start with li tag.
  Define as a list item.


2.<ul> - Unordered list
           List item marked with bullets by default it's marked as a (black circle).

Ex:-

<html>
<head>
    <title>Simple Example</title>
</head>
<body>
<ul>
    <li>unordered list</li>
</ul>
</body>
</html>


Type Attribute:-

   The type attribute defines a type of item marker.

like,

              <ul type="">

Also some value for unorder tag(ul):-

value        descriptions
none         item will be not marked
disc          item mark as a bullet(default black small circle)  
circle        item mark as a circle 
square       item mark as a square


Ex-

   <ul type="disc">
       <li>Hello Everybody..!</li>
   </ul>
   <ul type="circle">
       <li>Hello Everybody..!</li>
   </ul>
   <ul type="square">
       <li>welcome to techiebots</li>
   </ul>






3.<ol> -  ordered list

By default list item marked as a number 1,2,3...

Ex:-

<html>
<head>
    <title>Simple Example</title>
<body>
<ol>
    <li>ordered list</li>
</ol>
</body>
</html>


Also many types of marks/numbers you may use in the ordered list.

like:-  1,2,3,..... 
     I, II, III,...
     a,b,c,.....
     A,B,C,.....
           i,ii,iii,.....

In this tag also use type attribute for define list item marker;

Type               Description
type="1"     print number with numbers      
type="I"     print number with uppercase roman letter
type="a"     print number with lowercase letter
type="A"     print number with uppercase letter
type="i"       print number with lowercase roman letter


Example:-

<ol type="1">
    <li>Hello Everybody..!</li>
</ol>
<ol type="A">
    <li>welcome to techiebots</li>
</ol>



Control list counting:-

  • By default, an order list number start with 1.but if you want to start with 20 number so you can use start attribute;
  • you can define like start="20" or start=20 both are the same.

Ex:-

<ol start=20>
<li>Hello Everybody..!</li>
<li>welcome to techiebots</li>
</ol>

For more knowledge multiple uses in the below example:-

Nested list:-

Ex:-

<html>
 <head>
    <title> unorder and order list</title>
</head>
<body>
    <ul>
        <li>Software</li>
    <ol type="I">
        <li> Excel</li>
        <li>Word</li>
    </ol>
        <li> Hardware</li>
    <ol type="I">
        <li>CPU</li>
        <li>Input device</li>
    </ol>
  </ul>
</body>
</html>

Ex:-

<html>
<body>
<h2>A Nested List</h2>
<ol type="A">
  <li>Coffee</li>
  <li>Tea
    <ol type="I">
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>
</body>
</html>




Description List: 
  • description list is a list of terms,wioth description.
<dl> - Tag defines the description list.
<dt> - Tag defines the name term.
<dd> - Tag describes the term.

Ex:-

<html>
<body>
<dl>
<dt> hello </dt>
<dd> welcome </dd>
<dd> to </dd>
<dd> techiebots</dd>
</dl>
</body>
</html>



I try to give you the best article related to the Html so keep visiting Techiebots. Thank you for your support.









Comments

Post a Comment

Popular Posts