Suggestion 1: Clear Description of Page Content
lang Attribute
<html lang="zh-Hant-TW"> <!--...--></html>The <html> element of a webpage should clearly describe the lang attribute to identify the primary language of the website, such as Traditional Chinese in Taiwan, which is zh-Hant-TW.
<head> Element
It can be used to place data that describes the content of the page, which will not be directly displayed on the webpage but can be provided to browsers or crawlers. For instance, writing a <meta> element can further help robots and browsers understand your website, making them more familiar with the content and better guiding users to the site.
Some social platforms like Twitter and Facebook also have their own established standards to complete this data description, so sharing websites on these platforms will have a more complete info, such as:
<!-- Encoding method --><meta charset="UTF-8" /><!-- Page zoom settings --><meta name="viewport" content="width=device-width, initial-scale=1" /><!-- Page title --><title>Teaching Assistant Collects n Methods to Help You Write Better HTML - Web Page Development</title><!-- Page short description --><meta name="description" content="A short description of the page" /><!-- Page favicon --><link rel="icon" type="image/png" href="http://example.com/image.png" /><!-- Page description --><meta name="description" content="This is a description of a webpage" /><!-- Open Graph title --><meta property="og:title" content="This is the title of a webpage" /><!-- Twitter Card --><meta name="twitter:card" content="summary" /><!--...-->Suggestion 2: Check for Syntax Errors in the Code
You can visit W3C’s Validation Service to check for syntax errors in your website pages. Common issues include:
- Tags not properly closed
- Attributes not properly used
- Incorrect use of tags
Suggestion 3: Use Semantic Tags to Describe Web Content
In the past, it was common to only use <div> or <span> in webpage content, with less emphasis on semantic descriptions of the webpage. Nowadays, HTML5 has introduced many semantic tags that can more efficiently structure and describe webpage content. It is recommended to visit: Fooish 程式技術 to understand different HTML5 tags and their appropriate usage scenarios. Below are some tags that students often misuse, along with explanations of their correct usage:
There Should Only Be One <h1> Tag Per Page
In a webpage, the <h1> tag generally only appear once and is used to denote the most important information title of the current page. Do not have more than one <h1> tag on a page, as this is not proper syntax. Conversely, it is also recommended not to completely avoid using an <h1> tag; a well-defined <h1> tag can anchor the main focus of the entire page effectively.
Avoid Skipping Heading Tags
For example, using an <h1> tag followed by an <h3> tag, and so on, is valid syntax, but it can confuse users relying on screen readers. Below are comparative examples of both cases:
<!-- ❌ Skipping heading tags --><h1>Web Page Development: Describing How to Design and Structure Webpages in a Simple and Friendly Way</h1><h2>Our Advantages</h2><h4>Image Support</h4><p>Some explanation</p><h4>Beginner Friendly</h4><p>Some explanation</p><h4>Free Resources</h4><p>Some explanation</p>
<!-- ✅ No skipped heading tags --><h1>Web Page Development: Describing How to Design and Structure Webpages in a Simple and Friendly Way</h1><h2>Our Advantages</h2><h3>Image Support</h3><p>Some explanation</p><h3>Beginner Friendly</h3><p>Some explanation</p><h3>Free Resources</h3><p>Some explanation</p>You should use different levels of heading structure in order, and not randomly jump between different levels.
<ul> Must Contain <li> Tags
<li> can only exist within <ul>, <ol>, or <menu> tags, otherwise it is not compliant syntax.
<!-- ❌ Not compliant --><ul> <div></div> <p></p></ul>
<!-- ✅ Compliant --><ul> <li></li> <li></li> <li></li></ul>
<!-- ✅ Compliant --><ul> <li><div></div></li> <li><div></div></li> <li><div></div></li></ul><section> Should Preferably Be Accompanied by Headings
If there is a clearly defined section, <section> can be used and it is recommended to pair it with heading tags; there are extremely rare situations where this is not needed (for example, second-level navigation). Otherwise, it is advised to pair it with headings.
<section> <h2>Title</h2> <p>Content</p></section>Suggestion 4: Use of Images and Videos
Large files are often a performance killer for webpages, requiring extra caution, as these resources are areas where minimal optimization can yield significant benefits. I wrote a separate article on this topic about web image optimization: All You Need To Know About Optimal Images! for your reference.
Effectively Use Inline SVGs
If your SVG images consist of simple shapes and do not repeat, it is advisable to embed them in HTML to avoid sending unnecessary additional HTTP requests and to gain easier control over the SVG’s styling. For instance, in the following case, the fill attribute of an inline SVG is set to currentColor, allowing it to adapt and change its fill color based on the external text color:
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"> <path d="M450 856V606H200v-60h250V296h60v250h250v60H510v250h-60Z" /></svg>Use Appropriate Formats
If there is no special need to support older browsers, it is strongly recommended to convert bitmap images to webp format. This new image format is well-supported and can significantly reduce image file sizes while also supporting transparency. For videos, it is strongly recommended to use webm format.
Use Appropriate Sizes
Adjust image sizes according to the situation; do not load a very large image or video when it will be displayed small. Load only as much size as needed. Generally, images over 300k are not acceptable, and if larger, you may consider using lazy loading to enhance the user experience.
Write Detailed alt Attributes
It is strongly advised to add alt attributes that clearly describe the content of the images. Why is the alt attribute of images so important? Because when images fail to load or when crawlers are indexing your page, the content of the alt attribute can help them understand what the image is about, which is essential for SEO. Here, I strongly recommend reading: Best Practices for Google Image Search Engine Optimization (SEO).
Write width and height Attributes
It is strongly advised to add width and height attributes to avoid layout shifts.
A student asked: If the CSS for images is set to be responsive, can that improve layout shifts? The answer is no; consider a scenario: “When the webpage is just opened and the CSS hasn’t loaded yet.” The browser is trying to render each element, but how big will the images be? Therefore, layout shifts will still occur. The width and height of the images should be clearly described at the time of creation, regardless of how the CSS is set.