Pay attention to the use of HTML tags in web page creation

HTML has attempted to move away from presentation and towards content, leading to a rationale: separate content meaning (HTML) from presentation (CSS). This will reduce the size of web pages, because a set of presentation instructions (in the form of an external CSS document) can be applied to multiple pages. This will also make the site easier to manage because global changes can be made by modifying a single file.
Some of the bad tags are essentially presentational tags (such as small ) that can be replaced with more meaningful and simpler CSS rules. Others are not only for presentation, but are either unnecessarily bulky (like font tag) or obnoxious enough to be detrimental to usability (like blink ). Tags Here are some tags you may encounter frequently that have better options: b can be used to make elements bold. It would make more sense to use strong (meaning strong emphasis) instead, or to do the job with CSS, adding font-weight: bold rule to indicate bold elements. i can be used to italicize elements. Use em (for emphasis), which also makes more sense. Or you can use CSS to make italic: font-style: italic big can produce a larger font. Use headings (such as h1 , h2 , etc. when the text is already a heading) instead to add meaning, or simply use the font-size property in CSS to gain more control. small can produce small fonts. Once again, CSS ( font-size ) gives us more control. hr can be used to display a horizontal line. It is rare to use hr in CSS design. The CSS border-top , border-bottom properties or simple images will work better.
Although the above tags are compatible with the latest HTML standards, they do not have any meaning for the content as a good tag should. They could be more useful but they aren't particularly harmful, and might easily be mistaken for innocent butter-wouldn't-melt-in-their-mouth nuggets of pure goodness when standing next to the following filthy tags. u can underline elements. It reminds us that the underlined text has many connections. This is why this tag died a long time ago - you don't have to underline non-connecting text. center can be used to center elements within an element. The CSS property text-align allows not only center , but also left , right and justify . menu is used to create a menu list. It's not as perfect as ul , because unordered lists are more versatile, and ul stands tall over the corpse of menu. layer are similar to div elements in that they are positioned by CSS. This only works in older versions of Netscape, so it's no longer useful. blink or marquee . Say no loudly! They should be expected as such, but have very limited support, and only make for very, very sick jokes. font , which can be used to define the font name, size and color of an element, has rightfully earned the infamous title of king of tags in the tag world. Old websites (and even new ones, too) are all over the page like a plague of ants. Most of font tag proliferation comes from web design software, which uses font tag to include color and size for every element. font tag is abused to appear on every repeating element (e.g., every time you use a p element), while CSS can be applied to repeating elements or even control the entire website with a short code. Using the CSS approach not only makes the page slimmer than if it were cluttered with font tags, but it's also easier to maintain because all you need to do is change one line in the CSS file, rather than modifying each font tag one by one. This also increases the likelihood of maintaining a website with a consistent design style over time. font tags and improper use of tables are two of the main causes of unnecessary bloat on web pages. Attributes You may think you are using good tags, but there are still some troublesome parasite attributes lurking, ready to pop up at any time. name is used to specify a name for an element. It is perfectly acceptable in form elements such as input , but in other places, the job of name has been replaced by id attribute. text and bgcolor can be used to define the basic text color and background color of the page in body start tag. The CSS color and background-color properties can also do this when applied to body selector. background You can specify a background image in the body tag. CSS does a better job of handling background images with properties like background-image. link , alink , vlink are used in body tag to specify links (unvisited, active, and visited). CSS babes – :link , :active , and :visited will do the job. align can be used to align the contents of an element (like <div align="center">Stuff</div> ), but, like the center tag, the CSS text-align property is the new boss. target can open a link in different ways, the most common being opening a new window (eg <a href="wherever.html" target="_blank">Help me</a> ). Looks nice, but you don’t do this to your site. Users don't expect weird things (like new windows) to appear, and the most commonly used browsing tool is the browser's back button, which won't work if you open a new window. It is illegal and unusable. Note that presentation attributes of tags such as width and height for images, cellpadding and cellspacing for tables are preserved, since these elements often use different values. It’s not a perfect solution, but if your pages have lots of images and tables, you have no other sensible choice but to use them.
The most confusing presentation attribute is the textarea tag, which has only two legal attributes, cols and rows , which are also required in the latest HTML versions. Good label, bad use To get into your bedroom you can bend over and go through a dog hole, but wait, there's also a door for humans with a handle! Wow, look—just enough for one to enter.
There is a very good reason to use HTML tags (good tags), believe it or not (believe it!): the better premise you use them, the better results you will get.
The web page itself is easier for users to use than the syntax and semantics of HTML tags. Screen readers often highlight a ul tag or a title tag with h1 or h2 when they encounter it.
The most abused tag in the world of HTML is the table. Tables are often used for layout, but tables should only be used to display tabular data, as they are designed to do. The table-free layout approach is not some kind of zen-like pursuit of enlightenment; it can not only significantly reduce the size of a web page, but also make it easier to maintain and redesign. Note that designers sometimes use the tags and attributes mentioned here (especially using tables for layout) to create transitional designs that work on both older browsers (especially Netscape 4) and modern browsers. Tables do have greater control over presentation on Netscape 4, where CSS is incompetent. Unfortunately, these users are few and far between, while the number of mobile device users is increasing, where the shortcomings of table layouts are clearly visible. The table-less design described above prevents these drawbacks, with slight performance changes for a small subset of users, while maintaining full functionality in all views. frame
Goldilocks thinks a cup of cereal would be a good idea, but three large carnivorous mammals suddenly appear and throw her out of the window. The frame is the cup that holds the cereal. They may seem good, but they are endangered and will soon disappear.
Most websites do not use frames, and ordinary users will also treat a document as a page.
In some cases, such as if you want to prevent users from adding specific web pages to bookmarks, or if you want users to recommend specific web pages via email or instant messaging software, or if you want to make the entire website very complicated so that users using screen readers have to frequently operate between frames, or if you want to confuse search engines, that's enough, use frames!
In short, frameworks only increase complexity and lose usability . Note that as long as you follow these rules, you won't make mistakes in your future:
1) If a tag or attribute has even a slight correlation with the performance , do not use it. That's CSS's thing. And CSS does it better.
2) Use the label for the purpose its name implies . The table tag is used for tabular data. Title tags are used for titles. And so on and so forth.
3) Use appropriate tags for specific content. Use list for lists, hx (x = 1 - 7) for headings, and so on.

Further reading: HTML Advanced Guide: Breaking Bad Habits and Moving to Standards - XHTML Compatibility

<<: JavaScript Reflection Learning Tips

>>: Solve the problem after adding --subnet to Docker network Create

Pay attention to the use of HTML tags in web page creation

Further reading: HTML Advanced Guide: Breaking Bad Habits and Moving to Standards - XHTML Compatibility

CSS implements the function of hiding the search box (animation forward and reverse sequence)

Use SQL statement to determine whether the record already exists before insert

About Zabbix forget admin login password reset password

Detailed tutorial on MySql installation and uninstallation

Summary of MySQL slow log practice

Vue+elementUI component recursively implements foldable dynamic rendering multi-level sidebar navigation

How to customize at and cron scheduled tasks in Linux

Implementation of whack-a-mole game in JavaScript

Detailed explanation of Vue custom instructions and their use

Nginx location matching rule example

Recommend

Example of how to quickly build a LEMP environment with Docker

vue_drf implements SMS verification code

How to use ssh tunnel to connect to mysql server

Teach you how to implement Vue3 Reactivity

A brief summary of my experience in writing HTML pages

Example code for implementing equal height layout in multiple ways with CSS

Specific method to add foreign key constraints in mysql

Example of using js to natively implement year carousel selection effect

Implementation of ssh non-secret communication in linux

How to use docker to build redis master-slave

SQL implementation of LeetCode (175. Joining two tables)

30 minutes to give you a comprehensive understanding of React Hooks

How to install mysql6 initialization installation password under centos7

mysql calculation function details

How to modify the sources.list of Ubuntu 18.04 to Alibaba or Tsinghua mirror