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(<) :- < or <
NON-BREAKING SPACE:-
- Its uses as an entity in Html. it's non-breaking space:-
- 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 | |   | |
| < | less than | < | < |
| > | greater than | > | > |
| & | ampersand | & | & |
| " | double quotation mark | " | " |
| ' | single quotation mark | ' | ' |
| ¢ | cent | ¢ | ¢ |
| £ | pound | £ | £ |
| ¥ | yen | ¥ | ¥ |
| € | euro | € | € |
| © | copyright | © | © |
| ® | registered trademark | ® | ® |
Ex:-
<HTML>
<head>
<title>pra1</title></head>
<body><b>Entities</b><br>
©<br>
<<br>
"<br>
><br>
&<br>
®<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 |
| ̀ | a | à | à |
| ́ | a | á | á |
| ̂ | a | â | â |
| ̃ | a | ã | ã |
| ̀ | O | Ò | Ò |
| ́ | O | Ó | Ó |
| ̂ | O | Ô | Ô |
| ̃ | O | Õ | Õ |
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 |
| ∀ | ∀ | ∀ | For all |
| ∂ | ∂ | ∂ | Partial differential |
| ∃ | ∃ | ∃ | Three exists |
| ∅ | ∅ | ∅ | Empty sets |
| ∇ | ∇ | ∇ | Nabla |
| ∈ | ∈ | ∈ | Element of |
| ∉ | ∉ | ∉ | Not an element of |
| ∋ | ∋ | ∋ | Contains as number |
| ∏ | ∏ | ∏ | n-ary product |
| ∑ | ∑ | ∑ | n-ary summation |
Some greek letter symbol:-
| Char | Number | Entity |
| A | Α | Α |
| B | Β | Β |
| Γ | Γ | Γ |
| Δ | Δ | Δ |
| Ε | Ε | Ε |
Some other entities:-
| Char | Number | Entity | Description |
| © | © | © | COPYRIGHT SIGN |
| ® | ® | ® | REGISTERED SIGN |
| € | € | € | EURO SIGN |
| ™ | ™ | ™ | TRADEMARK |
| ← | ← | ← | LEFTWARDS ARROW |
| ↑ | ↑ | ↑ | UPWARDS ARROW |
| → | → | → | RIGHTWARDS ARROW |
| ↓ | ↓ | ↓ | 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>😀</p>
<p>😄 😍 💗</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.
Great work 🔥✨
ReplyDeleteThank you 😊😇
DeleteThis helps me a lot in my revision 👍
ReplyDeleteThank you 🤟🤟
Welcome 👍
DeleteKeep it up 👍
ReplyDelete👍✨
Delete