Sublime Forum

HTML Attributes

#1

Attached is a simple file which some might find useful. It’s a list of HTML attribute-completions. You could probably configure settings so that they display automatically within start-tags; personally, I type a letter or two and press Ctrl-Space.

Being a simple list, the attributes are not tailored according to the current tag - it will offer all of them regardless of tag. I was thinking, though, that it would be possible to create or modify html_completions.py such that only appropriate attributes are offered. Not sure whether I’ll pursue this at the moment though, unless someone expresses an interest.

N.B. This file is not likely to sit well with ZenCoding.
HTMLAttributeNames.zip (1.18 KB)

0 Likes
#2

A slight update, in that I’ve added HTML5 attributes.

It’s at my GitHub as well, in an HTML folder. This folder also includes HTML completions with HTML5 tags added.

HTMLAttributeNames.zip (1.25 KB)*

0 Likes
#3

Sorry, one last update - I promise :smiley:

Some attributes are specific to a particular tag, so it makes sense to indicate this as part of the completion-description.
HTMLAttributeNames.zip (1.41 KB)

0 Likes
#4

I needed a further update as I omitted a few HTML5 attributes - e.g. itemprop, etc.

For a limited few of the attributes it will auto-complete values. For example, with the align attribute you can type just ‘l’ for ‘left’, ‘r’ for ‘right’ etc…

Note: I renamed the file as well.

The HTML completion files at my GitHub are modifications of the standard files:
Added HTML5 tags;
A few of the tags include attributes which I would consider non-optional. E.g. method, action for ‘form’, and width, height for canvas;
The form tag, method attribute, has auto-completion for the words ‘get’ and ‘post’ (just type ‘g’ or ‘p’);
Similarly, the type attribute for input will autocomplete - c for checkbox, d for date, etc…

Of course, if you replace the standard HTML completion files with these, it is possible they will be over-ridden by a future ST upgrade or new build.
HTMLAttributes.zip (1.72 KB)

0 Likes
#5

I welcome your opinion on the following regarding HTML tag completions:

Would it not be preferable for the Tab position to be at the end of the tag-name, rather than within the content?
<table|> rather than

|
.

I don’t think it’s worth having two tab-positions as it is simpler just to use the right-arrow to move into the content.

Alternatively, I could position the cursor like this (after the tag-name) for most *major *tags, but leave as is for things like ‘p’, ‘li’, ‘h1’, etc. tags? But wouldn’t you find this disorientating?

A third option is to leave it exactly as it is now…

This is probably a small issue but I welcome opinions :smile:

0 Likes
#6

I added just a few more HTML5 attributes, such as **autocomplete **and form.

The form attribute is interesting in that it enables a form control to appear outside of the form element and yet still have the control-data submitted. It may even be possible to cross-reference the value of the control in another form. However, I understand that it is supported by modern browsers - except **IE10 **:shock:. This negates its usefulness.

I realise that there are still a number attributes that are listed at W3C, but current support for them is minimal (or non-existent). Besides which, the spec seems to be a moving target. I suppose the advise remains to check support for any HTML5 attributes.
HTMLAttributes (2).zip (1.83 KB)

0 Likes
#7

I’ve done a little more work on this file. Where there are fixed values that an attribute can take they will autocomplete. For example, ‘contenteditable’ will accept ‘t’ for ‘true’, ‘f’ for ‘false’ or ‘i’ for ‘inherit’.

I’ve supplied two alternative for a number of boolean values. For example, either

SELECTED, or
selected=“selected”

I tend to prefer all lowercase but I’ve taken some guidance from this useful style guide. I also like the idea of placing these boolean values at the end of the attribute list.

I’ve update my GitHub as well.
HTMLAttributes (3).zip (2.35 KB)

0 Likes
#8

There is a minor addition in the attached version. When using the atttibute **type ** it suggests “text” but we can over-type with “b” for “button” “te” for “textarea”, “c” for “checkbox”, etc. [A cool aspect of this is that if you Backspace and re-enter the letter(s) it will re-instate the chosen type :sunglasses: ]

I haven’t included text/css or text/javascript as I usually enter these with the default tag-completion or a snippet (for script/link).
(Besides, there are too many t’s :smile: ). Any types (other than for input) can just be typed in full.

Andy.
HTMLAttributes (3a).zip (2.54 KB)

0 Likes
#9

Thanks for this plugin, it works fine !
Did you consider sending it to wbond.net/sublime_packages/community ?

0 Likes
#10

[quote=“bistory”]Thanks for this plugin, it works fine !
Did you consider sending it to wbond.net/sublime_packages/community ?[/quote]

Thank you for your response! I could move it to Packages. There are a few steps involved, the first of which is to move it to its own repository in GitHub.

If one or two more people confirmed that it was useful to them then this might give me more encouragement :wink:

My GitHub also contains updated/ expanded HTML tag-completions, but I won’t include these are they will be over-written by, or conflict with, the default HTML completions. These have to be installed separately, and the default completions moved out of your Packages directory.

0 Likes
#11

Well I’ve created a separate repo for HTMLAttributes, forked from package_control_channel and amended repositories.json to refer to my repo.

I tried ‘Pull Request’ (from within my repositories.json location) but the green request button seems inactive. I must be missing something…?

Do I need to commit/push my editing of repositories.json? I just edited the raw file from within my GitHub.
Should I click Pull Request when I’m within wbond’s repo-area?

Andy.

Edited: I managed to send the pull request… suppose I’ll find out if I’ve done it correctly at some point :smile:

0 Likes
#12

I’ve only recently noticed that this is now available via Package Control.

Depending on your settings the HTML attributes may appear automatically when within a tag; I just call them up with Ctrl-Space when I want to use them.
It will autocomplete if there are specific values to choose from. For example, pressing ‘c’ when using the ‘type’ attribute will autocomplete ‘checkbox’, etc…

It’s quite discreet/neat :sunglasses:

0 Likes