Blog.logrocket.com/html-tags-e…

With the increasing reliance on JavaScript frameworks and libraries, many people are paying less attention to HTML. As a result, we are unable to take full advantage of many of the features of HTML that can greatly enhance the functionality of websites. In addition, writing semantic HTML can significantly improve the user experience by adding the right context to the site content.

This article introduces some useful HTML tags that you may have overlooked.

<base>

The tag allows you to create a scenario where there is a base URL that acts as a prefix for all relative urls in the document. The tag must have an href or target attribute containing the base URL, or both.

<! DOCTYPEhtml>
<html>
<head>
  <base href="https://www.google.com/" target="_blank">
</head>
<body>

<h1>The base element(Google As a case study)</h1>

<p> <a href="gmail">Gmail</a> - Used to send emails; which are messages distributed by electronic means from one computer user to one or more recipients via a network.</p>

<p><a href="hangouts">Hangouts</a> - It's used for Messaging, Voice and Video Calls</p>
</body>
</html>
Copy the code

This eliminates the need to repeat the URL prefix for each request.

There can only be one element in an HTML document, and it must be inside the element.

Image map

An image map is an image with a specific clickable region and is defined by the Map tag. These areas are set using the

tag. This allows you to embed links in different parts of the image that can point to other pages, which is useful for describing what’s in the image.

Look at an example:

The first step is to insert the image with the < IMG > tag as usual, but this time using the USEMAP attribute.

<img src="study.jpg" alt="Workplace" usemap="#workmap">
Copy the code

Next create a

tag with the same name attribute value as the USEMAP attribute in the IMG tag. This links the tag with the Map tag. 

  <map name="workmap">

  </map>
Copy the code

Then start creating the clickable area. We need to define how to draw each region, usually using Shape and Coords.

<area>

<map name="workmap">
  <area shape="rect" coords="255119634373" alt="book" href="book.html">
</map>
Copy the code

Define a clickable area on the image with the

element. It is added to the map element.

These attributes include:

  • Used when drawing rectangles over related areasshape. You can use other shapes such as rectangle, circle, polygon or default shape (whole image)
  • altUsed to specify whenareaAlternative text to display when the element cannot be rendered for some reason
  • hrefContains urls that link clickable areas to another page
  • coordsRefine the shape using coordinates (in pixels). You can use various software to get the exact coordinates of the picture; Here is a simple example using Microsoft’s drawing software. Different shapes represent their coordinates in different ways, such as rectanglesleft, top, right, bottomSaid.

Here we have the top, left coordinates:

You can read the coordinates of the cursor on the image in the lower left, or you can use the ruler only on the horizontal and vertical surfaces.

The screenshot below shows the right, bottom coordinates:

The final result is:

<img src="study.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="255119634373" alt="book" href="book.html">
</map>
Copy the code

Other shapes can also be used, but the coordinates of each shape are written differently.

For circles, we should have the coordinates of the center of the circle, and then add the radius:

<map name="workmap">
  <area shape="circle" coords="504192504" alt="clock" href="clock.html">
</map>
Copy the code

The coordinates of the center agree to be in the lower left corner, and the horizontal distance from the center to the end is the radius.

Creating a Poly is more like freehand drawing. You just link different points on the image and they connect:

<map name="workmap">
  <area shape="poly" coords="154506168477252429187388235332321310394322465347504402510469, 512532454581423585319593255589, 240536" alt="clock" href="clock.html">
</map>
Copy the code

Here are the values you need to create shapes with HTML:

The shape of Coordinates
rect left, top, right, bottom
circle center-x, center-y, radius
poly X1, y1, x2, y2... .
default The whole area

<abbr> 和 <dfn>

The < DFN > tag specifies a term to be defined within a parent element. It stands for “definition element.” This parent of the tag contains the definition/explanation for the term, while the term is inside the . You can also add:

The tag < DFN > specifies the term to be defined in the parent element. It stands for “defining elements.” The parent of the tag < DFN > contains the definition or explanation of the term, which is inside < DFN >. It can be added like this:

<p><dfn title="HyperText Markup Language">HTML</dfn> 
  Is the standard markup language for creating web pages.
</p>
Copy the code

Can also be used with :

<! DOCTYPEhtml>
<html>
<body>

<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> 
  It's the standard markup language for creating web pages.</p>
</body>
</html>
Copy the code

This enhances accessibility because writing semantic HTML in this way enables readers and browsers to interpret the content on the page in a context appropriate to the user.

You can also use alone:

 <abbr title="Cascading Stylesheet">CSS</abbr>
Copy the code

<pre> 和 <code>

Preformatted text or 

 tags are used to display text (usually code) as text is written. It displays all Spaces and tabs, set exactly according to the format in the block.
 <pre>
    <code>
      p {
          color: black;
          font-family: Helvetica, sans-serif;
          font-size: 1rem;
      }
    </code>
  </pre>
Copy the code

<fig> 和 <figcaption>

These two tags usually appear together.

Used as the caption of < FIG >.

 <fig>
  <img src="Https://images.unsplash.com/photo-1600618538034-fc86e9a679aa?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhc HBfaWQiOjE0NTg5fQ">
  <figcaption>basketball<figcaption/>
<fig>
Copy the code

These tags can also be used with code blocks, video, and audio, as shown below.

Block of code:

 <figure>
  <pre>
    <code>
      p {
          color: black;
          font-family: Helvetica, sans-serif;
          font-size: 1rem;
      }
    </code>
  </pre>
   <figcaption>The code block</figcaption>
</figure>
Copy the code

Video:

 <figure>
 <video src="ex-b.mov"></video>
 <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption>
</figure>
Copy the code

Audio:

 <figure>
    <audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
</audio>
  <figcaption>An audio file</figcaption>
</figure>
Copy the code

<details> 和 <summary>

< Details > and

are used to create a swappable section. The < Summary > TAB is inside the < Details > TAB and is automatically shown and hidden when clicked.

The best part is that you can style them using CSS, which works perfectly without relying on JavaScript.

 <details>
    <summary>
        <span>I am an introvert</span>
    </summary>

    <div>An introvert is a person with qualities of a personality type known as introversion, which means that they feel more comfortable focusing on their inner thoughts and ideas, rather than what's happening externally. They enjoy spending time with just one or two people, rather than large groups or crowds</div>
    <div>        
</details>
Copy the code

<cite> 和 <blockquote>

Basically

is the part referenced from another source. The
attribute is added to indicate the source. 

<blockquote cite="https://en.wikipedia.org/wiki/History_of_Nigeria">The history of Nigeria can be traced to settlers trading across the middle East and Africa as early as 1100 BC. Numerous  ancient African civilizations settled in the region that is known today as Nigeria, such as the Kingdom of Nri, the Benin Empire, and the Oyo Empire. Islam reached Nigeria through the Borno Empire between (1068 AD) and Hausa States around (1385 AD) during the 11th century,[1][2][3][4] while Christianity came to Nigeria in the 15th century through Augustinian and Capuchin monks from Portugal. The Songhai Empire also occupied part of the region.[5]</blockquote>
Copy the code

If you use the cite attribute, it must be a valid URL to the source. To obtain the corresponding citation link, the value of the attribute must be resolved relative to the element’s node document. Sometimes they are private, such as calling server-side scripts to collect statistics about web site usage.

<cite>

The cite element represents the title of a work or intellectual property, such as a book, article, thesis, poem, song, etc.

<p>The best movie ever made is <cite>The Godfather</cite> by
Francis Ford Coppola . My favorite song is <cite>Monsters You Made</cite> by the Burna boy.</p>
Copy the code

conclusion

We should pay more attention to these tags and improve the functionality of the site by writing more semantic code.

Welcome to pay attention to my public number: front-end pioneer