Markup language - simplified tags
|
Click here to return to the 123WORDPRESS.COM HTML Tutorial section. Previous: Markup Language - Let's talk about the list again <br />Original source Chapter 9 Streamlining tags Previously, we kept mentioning that structured content can classify structure and design details and streamline tags. How to do it? We can use standard XHTML and CSS instead of tables and pictures to create the layout we need. When using standard technologies to create websites (especially those that rely heavily on CSS), we often develop a bad habit of adding unnecessary tags and class attributes that are completely unnecessary for the technology. By using descendant selectors in CSS, we can eliminate redundant <div>, <span>, and class attributes. Streamlining tags means that the page will be faster to read and easier to maintain. In this chapter, we will discuss several simple ways to accomplish this task. How to streamline tags when making a website with standard technology? Simplified tags are an important topic worth discussing. When creating a website, one of the great benefits of using legal XHTML and CSS to set the display effect is to simplify the tags. Short code means faster download speed, which is absolutely critical for users who use 56k dial-up to surf the Internet. Short code also means less server space requirements and bandwidth consumption, which can make bosses and system administrators happy. The problem is that simply making sure that a page complies with W3C standards does not mean that the code used for the content will be shorter. You can of course add all kinds of unnecessary tags to the content that complies with the standards. Yes, it does comply with the standards, but it may add a lot of unnecessary code to make it easier to design CSS. Fear not! Here are some tips for designing clean, standards-compliant markup that still retains plenty of CSS styling control. Let's learn a few simple techniques for keeping your markup simple. Inheriting Selectors Here we'll look at two approaches to marking up a sidebar (with information, links, and other stuff) on a personal website. Stuff all the good stuff into a <div> with an id of "sidebar" so you can move it somewhere in the browser viewport later (Part 2 will discuss CSS layout/typography features). Method A: Happy Classification
I’ve seen markup similar to method A on many websites. When designers first discover the power of CSS, it’s easy to go overboard and assign classes to every tag they want to style differently. In the previous example, we might think that the purpose of assigning class=sideheading to <h3> is to help them distinguish themselves from other headings on the page; the same reason applies to assigning class to <ul> and <li>. When specifying styles, let's say we want the title to be orange, in a serif font, with a light grey border at the bottom, and for the "sidelinks" unordered list we want to remove the dots and make the list items bold. The CSS required for method A would look like this:
We can specify special styles for these tags by referring to the category name (class) specified in the markup. You can even imagine other parts of the page being organized in this way: navigation bar, footer and content area, each tag is added with messy categories so that you have full control over them. Yes, it does work, but there is a simple way to save those classes and make your CSS easier to read and more organized. Let's move on to method B. Method B: The Natural Choice
Method B is neat! But wait, where are all the categories? Well... you'll quickly see that we don't really need them, mainly because we're stuffing all of these tags into a <div> with a unique name (sidebar in this case). This is where the inheritance selector comes into play. We only need to specify the tag in the sidebar directly by tag name, and we can remove the redundant classification attributes. Let's look at the same style as in Method A, but this time we use the inherited selector to specify the label in the sidebar.
By referencing the #sidebar ID, you can specify specific styles for the tags contained within it. For example, only the <h3> tag within a <div id="sidebar"> will have the above CSS rules set. This approach of specifying styles based on the context of the content is the key to shortening the markup content. Usually, after designing the semantic structure for the content, there is no need to add classification attributes to the tags. It is not only used in the sidebar. We only show one section of the page (the sidebar), but this approach can be applied to the entire page structure. Just divide the markup content into several logical sections (perhaps #nav, #content, #sidebar, #footer), and then use inheritance selectors to specify special styles for the tags within the section. For example, suppose you have <h3> tags in both the #content and #sidebar sections of your page, and you want them both to use a serif font. However, you want the <h3> in one section to be purple and the other to be orange. This does not require modifying any tags and adding classification attributes. We can specify the common rules for all <h3> tags through a global style, and then use the inheritance selector to set the color according to the position of the tag.
Specifies that all <h3> tags must use the senif font, and that the color must be purple or orange depending on the context. We don't need to repeat the shared rule (font-family in this case), thus shortening the CSS content and preventing duplicate rules in multiple declarations. Not only do we save on the extra markup space required by class attributes, but the CSS structure also makes more sense, making it easier to read its contents, easier to organize into page sections, and easier to modify specific rules. This is especially noticeable for large, complex layouts where you may have hundreds of CSS rules at once. For example, in this example, if you add the shared rules to each declaration, and later want to change all <h3> to sans serif font, you have to modify three places, and you can't do it all at once. Fewer categories are easier to maintain In addition to reducing the amount of source code space that needs to be used, using inherited selectors instead of redundant categories also means that the markup content is easy to expand in the future. For example, let's say you want the links in the sidebar to be red instead of blue like the rest of the page, so you create a class of red and add it to the anchor tag like this:
To turn these links red (assuming the default link color is not red) you would need CSS like this:
There’s nothing wrong with these actions and they work perfectly, but what if you change your mind in the future and want to change these links to green? Or more practically, your boss occasionally says “red is out this year, change these sidebar links to green!” No problem, you can just change the red class in the CSS and it’ll be done, but the class attribute in the markup will still be red, which is obviously not completely semantically correct, just like using any other color as a category name. This isn’t a good place to use display effects as category names, but we can save a lot of effort (and code) by not specifying categories at all, and make the content more semantically sound. Instead, we can select these sidebar links with inherited selectors and style them as needed. The markup is exactly the same as in method B, but the CSS needed to set the sidebar links would be:
Basically, this means "only anchor tags with an href attribute inside a <li> tag inside a <div id="sidebar"> should still be displayed in red". Now, we keep the markup short and flexible, and future updates will only require CSS, whether we want to make the link red, green, bold, or italic. Next, let's look at another way to streamline tags: eliminate unnecessary <div> tags and directly use existing block-level tags. Previous Page 1 2 3 Next Page Read More |
>>: jQuery implements Table paging effect
Recommend
MySQL merge and split by specified characters example tutorial
Preface Merging or splitting by specified charact...
CSS+HTML to implement Skeleton Screen loading placeholder animation effect (with animation)
Effect Fading from top to bottom Source code html...
Sample code for implementing markdown automatic numbering with pure CSS
The origin of the problem The first time I paid a...
Vue3 realizes the image magnifying glass effect
This article example shares the specific code of ...
Detailed explanation of jQuery chain calls
Table of contents Chain calls A small case Chain ...
Correct way to load fonts in Vue.js
Table of contents Declare fonts with font-face co...
An article explains Tomcat's class loading mechanism
Table of contents - Preface - - JVM Class Loader ...
Summary of the deployment of Tomcat cluster and Nginx load balancing based on Docker
Table of contents Written in front 1. Ngixn image...
Example of implementing login effect with vue ElementUI's from form
Table of contents 1. Build basic styles through E...
Nginx uses Lua+Redis to dynamically block IP
1. Background In our daily website maintenance, w...
Detailed explanation of the reasons and solutions for Docker failing to start normally
1. Abnormal performance of Docker startup: 1. The...
Detailed explanation and extension of ref and reactive in Vue3
Table of contents 1. Ref and reactive 1. reactive...
Analyze the usage and principles of Vue's provide and inject
First, let's talk about why we use provide/in...
A brief analysis of CSS3 using text-overflow to solve text layout problems
Basic syntax The use of text-overflow requires th...
Linux command line operation Baidu cloud upload and download files
Table of contents 0. Background 1. Installation 2...