HTML Entities

HTML Entities

Let's start with Basics

·

3 min read

Using the reserved keywords:

to use the tags like > and < (yea, >_<), it might be mistaken as a tag. To be able to write these specifically reserved symbols,

These are some reserved symbols, and writing these in HTML, we can use either the entity name with an ampersand (&) followed by a semicolon.

Do not forget the semi-colons in the end.

Combining Diacritical Tags:

In Spanish and Portuguese and various other languages, (à á â ã) these symbols are used, and they are called Acute Accents. These symbols are again important in a particular language but aren't available on the keyboard.

to write them:

Text Formatting:

  1. HEADINGS: There are 6 heading types in HTML, H1, H2, H3,H4,H5,H6

  2. PARAGRAPHS(<p>): used to add paragraphs on the web pages.

  3. BOLD AND STRONG(<b> and <strong>): bold and strong are the same, and they make the text bold(like this here), but when screen readers are approached, then the words with strong are paid more emphasis.

  4. ITALICS AND EM(<i> and <em>): the italics and em are the same, and they make the text italics(like this here)

  5. UNDERLINE(<u>): adds an underline.

  6. STRIKE(<strike>): this makes a strike in the text(like this here)

  7. DEL(<del>): performs the same task as a strike but, read by screenreaders with more emphasis

  8. HORIZONTAL RULE(<hr>): To draw a line on the webpage

    <p> Lorem ips <b> dolor sit </b>amet consectetur <strong>adipisicing</strong>
         elit. <u>Nam cat</u> corrupti repellat consectetur sapiente labore asperiores, <strike>non tempore numquam</strike> non tempore numquam <del>modi</del> recusandae facilis, exercitationem molestiae doloribus.
    </p>
  <hr>
  1. SUBSCRIPT AND SUPERSCRIPT(<sub> and <sup>): to write the numbers in superscript, like and subscript like,
<!subscript>
<p><sub>2</sub>10</p>
<!superscript:>
<p><sup>10</sup>2</p>
  1. MARK(<mark>): to highlight the text with a default of a yellow highlighter

  2. ABBREVIATION(<abbr>):

<p><abbr title="The text that shows when hovered over the text on website">Text that actually shows:</abbr><dfn> Yeppppp, read it righttttt</dfn></p>

The image of how it will be shown is here:

Images:

Images can be added to an HTML, webpage, and it has 5 main attributes:

  1. Source: It is from where the image is picked up, it can be from the web, and it can be from the system itself. to use a system image, open the image and copy its path.

  2. Alternative text: This is the text that gets displayed when the image, for some reason, is not displayed.

  3. Height: to set the height of the image.

  4. Weight: to set the width of the image on the webpage.

  5. Title: The text that is shown, When a cursor hovers on the image, is written via the title attribute.

     <img src="A_random_photo.png" alt="A random photo that shows my aesthetic" height="500px" width="320px" title="This gets shown when hovered">
    

Lists:

There are 3 types of lists:

  1. Ordered Lists:

    1. Numeric lists

    2. Roman Upper Case

    3. Roman Lower Case

    4. Upper Case Alphabet

    5. Lower Case Alphabet

   <ol>
    <li type="A">one</li>
    <li type="a">two</li>
    <li type="i">three</li>
    <li type="I">four</li>
    <li>five</li>
   </ol>
  1. Unordered Lists

    1. Disks

    2. Circle

    3. Square

    4. None

       <ul>
        <li type="circle">one</li>
        <li type="none">two</li>
        <li type="square">three</li>
        <li type="dics">four</li>
       </ul>
  1. Description List:

    It has tags like,

    1. <dl>, the description list starting tag

    2. <dt>, the descriptive Term

    3. <dd>, the description

  2.    <dl>
           <dt> some term </dt>
           <dd> some decription about the term </dd>
          </dl>
    

Links:

Some important takeaways in linking webpages:

  1. To open the link given on a webpage in a new webpage, then use

     <a href="www.google.com" target="_blank">hehe</a>
    
  2. To use the mail to this email id:

     <a href="mailto:xyz@gmail.com">Mail me</a>
    
  3. To able to download the let's say, pdf file, use:

      <a href="some.pdf" download>download</a>