Whenever I visit a beautiful website, I can't help but look at the source code. It's like having a pair of X-ray glasses and being able to see anyone - even through their fig leaf. This is simply a matter of course! I can't wait to find out whether this beautiful website is written with the same beautiful code, or whether it is just a beauty in the beauty. Code? Beauty? certainly! After all, code is like poetry. (Translation note: "Code is poetry" is the slogan of the famous blogging system WordPress.) This is just the most basic HTML. It is naturally not as complex and elegant as other dynamic languages, but it still maintains the charm given by its creator. Artistic strokes.
This made me start thinking, how to make the code beautiful? With HTML, this is all manual work. Let's look at how markup languages can reach a state of beauty.
The image is large enough (2000x2000) that you can print it out and stick it in your personal locker and impress your friends. Having said that, this is indeed a confusing size. I will release the original PSD image for everyone to modify.
HTML5 - HTML5 and its new elements bring an unprecedented beauty.
DOCTYPE - HTML5 has the best document type .
Indentation - Tabs and spaces are used to indent code to correctly show the parent-child relationship between tags and emphasize hierarchical structure.
Charset - A charset declaration must be made in the header before all content.
Title - The website title is simple and clear. Start by describing the function of the page, after the separator, and end with the website title.
CSS - uses only a simple style sheet (the media types are declared in the style sheet), and is only targeted at good browsers. IE6 and lower will get a generic style sheet.
Body - By giving the body an ID, you can style it uniquely for different pages without the need for more markup.
JavaScript - Called jQuery (the most beautiful JavaScript script library) from Google. Only a single JavaScript file is loaded. Each script is referenced at the bottom of the page.
File Path - For efficiency, use relative paths for site resources. From the perspective of adapting to reprinting, content files (such as pictures) use absolute paths.
Image Attributes - The image contains alternative text, mainly for the case where the image is missing, but it can also be used for verification. In order to improve rendering efficiency, it is best to specify the width and height of the image.
Main Content First - The main content of the page should be after the basic markup and navigation, and before any auxiliary content (such as sidebars).
Appropriate Descriptive Block-Level Elements - HEADER, NAV, SECTION, ARTICLE, ASIDE - these new " description sections " will describe the content better than the previous DIV.
Hierarchy – Capitalizing title tags will be effective and follow a clear “ hierarchy ”.
Appropriate Descriptive Tags - Lists are tagged according to different needs: unsorted, sorted, and custom lists that are not commonly used.
Common Content Included – The same content that appears on different pages is best included into the page from the server side. (By whatever method, language, CMS, whatever works for you.)
Semantic Classes – It is not only necessary to set up correct element names, but also to ensure that the names of classes and IDs are semantic : they can play a descriptive role even without specific instructions. (For example, "col" is better than "left")
Classes – When multiple elements need to use similar styles, try to define the same class for them. (Reusability)
IDs – When the element only appears once in the page, try to define IDs for them, and do not define the same ID for different elements.
Dynamic Elements – Dynamic effects are added only when really needed.
Characters Encoded – When special characters appear, please pay attention to the character encoding .
Free From Styling - Everything on the page has nothing to do with styling , and you don't even need to specify what style you want. Everything on the page is limited to the following three items: required site resources, content, description.
Comments - When looking at the code, content that does not require special emphasis or is not particularly obvious will be included in the comments .
Valid - Site-wide markup complies with W3C validation . Pay attention to tag closure, ensure necessary attributes, avoid obsolete methods, etc.