10 Underused or Misunderstood HTML Tags
|
Here are 10 HTML tags that are underused or misunderstood. Maybe they are not well known, but they can be very useful in certain situations. Web developers often want to know and master multiple languages. As a result, learning everything a language has to offer can be tricky, but it's easy to find that you're not fully taking advantage of some of the more specialized but useful tags. Translated from: TutsPlus Unfortunately we haven't yet explored the full potential of those lesser-known HTML tags. But it’s never too late to re-enter the field and start writing code to tap into the energy of these untapped tags. Here are 10 HTML tags that are underused or misunderstood. Maybe they are not well known, but they can be very useful in certain situations. 1. <cite> Everyone seems to be familiar with the <blockquote> tag, but do you know about <blockquote>’s little brother <cite>? The <cite> element allows you to define the text within the element as a reference. Normally, browsers will display text within <cite> tags in italics, but this can be changed with a little CSS. The <cite> tag is useful for citing references from directories or other websites. Here is an example of using the cite tag within a paragraph: David Allen's breakthrough organizational book Get Your Work Done took forgetting by storm. 2. <optgroup> The <optgroup> tag is a great way to define groupings of options within a select tag. For example, if you need to group a list of movies by time, you can do this: 1 2 < label for = "showtimes" > Showtimes < / label > < select id = "showtimes" name = " showtimes" > < optgroup label = "1pm" >< / optgroup > < option value = "titanic" > Titanic < / option > < option value = "nd" > Slumdog Millionaire < / option > < option value = "wab" > Shrek the Monsters < / option > < optgroup label = "2pm" >< / optgroup > < option value = "bkrw" > The Lion King < / option > < option value = "stf" > Everyone's Superman < / option > < / select > Demo: It can visually differentiate the movie list. 3. <acronym> An <acronym> is a way to define or more interpret a set of literals. When you put the mouse over the text using the <acronym> tag, a box showing the contents of the title tag will appear below. for example: 1 The microblogging site < acronym title = "Founded in 2006" > Twitter < / acronym > has been experiencing frequent downtime recently. Example: The microblogging site Twitter has been experiencing frequent downtime recently. 4. <address> The <address> tag is a pretty obscure little tag, but that doesn't mean it's not useful. As the name suggests <address> allows you to semantically markup your HTML. This small tag will display the content in italics by default. Of course, the default style can be easily changed using styles. 1 2 3 4 < address > Glen Stansberry 1234 Web Dev Lane Anywhere, USA < / address > 5. <ins> and <del> If you want to use tags to show edited versions, <ins> and <del> are perfect for this. As the names suggest, <ins> highlights added content with an underline, while <del> strikes through removed information. 1 John < del > likes < / del > < ins > LOVES < / ins > his new iPod. Example: Everyone It seems that form elements are the easiest to forget when to mark text. The most commonly forgotten form element is the <label> tag. More than just a convenient way to mark up text, the <label> tag can also be passed a "for" attribute to specify which element it should be associated with. Not only is <label> easy to style, it also allows you to make the title clickable. 1 2 < label for = "username" > Username < / label > < input id = "username" type = "text" / > 7. <fieldset> Fieldset is a small tag that you can use to add logical groupings to your form elements. The <fieldset> tag draws a box around the elements within it. Another point is that you can add a <label> tag in the fieldset to define the title of the group. 1 2 3 4 5 6 7 < form >< fieldset > < legend > Are you smarter than a 5th grader? < / legend > Of course < input name = "yes" type = "radio" value = "yes" / > I don't know < input name = "no" type = "radio" value = "no" / > < / fieldset > < / form > Example: 8. <abbr> The <abbr> tag is quite similar to the <acronym> tag, except that the <abbr> tag is only used to define abbreviations. Just like <acronym>, you can define a title attribute for this tag. When the user moves the mouse over the abbreviated text, the full content will be displayed below. The <abbr> tag is rarely used, but is very useful for screen readers, spell checkers, and search engines. 1 < abbr title = "Brain Damage" > NC < / abbr > is an uncivilized term. Example: It's an uncivilized term. It's an uncivilized term. 9. rel Rel can be an extremely useful attribute. Any HTML element can have a rel attribute applied to it. It helps to pass extra parameters which are not specified otherwise. This is very useful when using JavaScript in HTML. If you have a link that you want to edit inline, you can add: 1 < a rel = "clickable" href = "page.html" > This link is editable. < / a > The Javascript will look for an a link with the rel attribute "clickable" and apply some Ajax and allow it to be edited inline. This is just one of many techniques you can use the rel attribute, as its potential is endless. Interested friends can study in depth the W3C's introduction to Rel. 10. The <wbr> tag is an incredibly obscure tag. Frankly speaking, I doubt you will come across this label either, as it is almost never used. (Indeed, I had hardly ever seen this label before I wrote this article). In fact, this tag is a soft line break, which allows you to specify a line break point within a line, indicating that the line can be broken at this point, but it does not necessarily break the line. It will only break the line when it is necessary. This tag is great if you want to avoid horizontal scrollbars. Example: Below is a 200 pixel wide box with no overflow defined. NoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbr HavaWbr HavaWbr HavaWbrHavaWbrHavaWbrHavaWbrHavaWbr HavaWbr If you want to achieve the same effect without using the <wbr> tag, you can try ​ or ­. It is said that all three tags are not fully supported by all browsers. You can check the support status of each browser for the three tags through this article. PS: It was quite difficult to translate this article. Shen Fei deeply felt the charm of semantics and the power of HTML tags. I believe there are many tags that we have not recognized. As a result, everyone is familiar with common tags, but no one knows how to use uncommon tags. As I explained in a previous article, a big part of "semanticism" is using the right tags in the right places, rather than just using divs. If we can understand more HTML tags, we can write more semantic HTML code, which can also greatly reduce the difficulty and workload of writing CSS and make our page structure more reasonable. |
<<: Detailed analysis of the problem of adding where conditions using left join in MySQL
>>: Understand the use of CSS3's all attribute
Recommend
WeChat applet implements jigsaw puzzle game
This article shares the specific code for impleme...
8 commands to effectively manage processes in Linux
Preface The role of process management: Determine...
Detailed explanation of deploying Elasticsearch kibana and ik word segmenter in docker
es installation docker pull elasticsearch:7.4.0 #...
How to quickly use mysqlreplicate to build MySQL master-slave
Introduction The mysql-utilities toolset is a col...
Solution to 1449 and 1045 exceptions when connecting to MySQL
Solution to 1449 and 1045 exceptions when connect...
Detailed explanation of MySQL 8.0.18 commands
Open the folder C:\web\mysql-8.0.11 that you just...
Solution to Docker disk space cleaning
Some time ago, I encountered the problem that the...
Solve the problem that images and other resources are automatically deleted after Tomcat is redeployed
Yesterday when I was implementing the function of...
Vue implements pull-down to load more
Developers familiar with Element-UI may have had ...
Detailed explanation of the implementation principle of Vue2.0/3.0 two-way data binding
The implementation principle of Vue2.0/3.0 two-wa...
Tomcat maxPostSize setting implementation process analysis
1. Why set maxPostSize? The tomcat container has ...
Implementing a simple timer in JavaScript
This article example shares the specific code of ...
Tips for using top command in Linux
First, let me introduce the meaning of some field...
Summary of the unknown usage of "!" in Linux
Preface In fact, the humble "!" has man...
MySQL Query Cache and Buffer Pool
1. Caches - Query Cache The following figure is p...