HTML shorthand is a way to write HTML elements more efficiently, by using fewer characters to achieve the same results. Here are a few tips and examples to help you get started:
Self-closing tags: Some HTML elements, such as images and line breaks, do not require a closing tag. These tags can be written as self-closing tags, which is the same as writing an opening tag with a "/" before the closing angle bracket.
Example:
Can be written as:
Boolean attributes:
Some HTML attributes, such as "disabled" and "checked", do not require a value. These attributes can be written as boolean attributes, which is the same as writing the attribute name without a value.
Example:
Can be written as:
Omit optional end tags:
Some HTML elements, such as "p", "li", and "dt", have optional end tags. These tags can be omitted, which will result in the same behavior.
Example:
Can be written as:
Conditional comments: Conditional comments are a way to target specific versions of Internet Explorer with different CSS or JavaScript code.
Example:
Remember, HTML shorthand can make your HTML more concise and easier to read, but be careful not to sacrifice clarity for brevity.
Top comments (7)
I can’t bring myself to exclude closing tags, even when they’re optional.
I generally think that being explicit makes code makes code more readable, and optional closing tags may sometimes be ambiguous — was the paragraph intended to conclude here, or is something missing?
Purely personal preference, though. I’m old enough to remember when excluding a close tag, or messing up the nesting could wreak havoc on the browser rendering (or, even worse, the email rendering when coding html emails) so I’m sure part of my reticence is to do with old habits learned form concerns that aren’t so relevant these days.
First and foremost, I'd like to express my heartfelt gratitude!! This is my first post, and your comment has inspired me greatly!
As a result, I prefer closing tags too.
It's understandable that you prefer to include closing tags, even if they're optional, because they help to make the code more explicit and readable.
Furthermore, it is common for people to cling to habits learned from previous experiences, such as the possibility of browser rendering issues if close tags were excluded or nested incorrectly.
However, as web development technology advances, these issues become less common, and the decision to include or exclude closing tags ultimately comes down to personal preference and the specific requirements of the project.
Beautiful 🥰
Much obliged.😊
Glad my comments helped you settle in to the community! I look forward to seeing more of your articles and perspectives. :)
Feel adding the closing tags when it's omit optional tag for a newbie is the best way he/she can go far... Can start that habit as a pro
I agree; even at this point, I still prefer to keep my tags on. Your code is more defined and easier to read as a result. But occasionally, a little shorthand wouldn't hurt.