When to use attribute=”value” vs property:value; syntax
The differences have to do with HTML vs CSS. HTML is a way to structure your document. HTML defines a group of text for the browser as a paragraph (<p>) or a heading (<h1> or an image (<img>). Since HTML is a markup language, not a programming language, its job is to structure the page. HTML used to be used to also affect the pages appearance, i.e. formatting. So there are many attributes, still in existence, that are used to change the appearance of elements on the page. However over the evolution of the language, it was found that using HTML elements to control the appearance was not the most effective way of web design. That is when CSS was introduced. Now pages are structured with HTML and appearance is controlled via CSS.
HTML uses attributes in the form, attribute=”value”, to modify or provide additional needed information for a HTML tag. For example, the <img> tag simply tells a brower that a space on the page is being reserved for an image. It however does not specify what image is being used. For that, the src (resource) attribute is used. The src=”filepath/filename” attribute tells the browser where to find the image to put in that location.
The <font> tag used to be used to specify font appearance on a page. And in some programs it still is. However, the font tag is deprecated, meaning there is a better way to accomplish that control. That doesn’t mean the font tag doesn’t work anymore. There are still too many web sites on the web that still use it, for it to be unsupported at this point. Even NSOnline, still uses the font tag to modify font appearance information. But there is a better way, and eventually, it will no longer be used. The preferred way is CSS.
CSS is not HTML. It is a complimentary technology, with its own syntax, Â you used to define, or declare, the properties of HTML elements. The syntax for a CSS declaration is “property: value;” (without the quotation marks). The similarities between an attribute, attribute=”value” and a CSS declaration, property: value; are confusing at first. Mostly because, at this point in the evolution of HTML, both are needed. So there has to be a way of inserting CSS declarations into HTML tags. There is…. it’s called the style attribute. Let’s look at an example.
<h1 id=”top” style=”font-family: Arial, Helvetica, sans-serif; color: #000000; weight: Bold; text-align: center;”> Understanding CSS syntax</h1>
In this example, the content “Understanding CSS syntax” is being marked-up as a level-one heading. It has been given an id attribute with a value of “top” – which means that you are defining this location on the page with a label called “top”. You also want it to look a certain way. Since CSS is used to control appearance we need to used CSS to accomplish that. In this example, we are using an in-line CSS declaration which will affect only this heading and no others. The style attribute is how we interface CSS style syntax with an individual HTML element. The syntax is style=”CSSproperty: value;”. The style attribute expects the value to be in CSS syntax.
In the example above, style=”font-family: Arial, Helvetica, sans-serif; color: #000000; weight: Bold; text-align: center;” we are using CSS syntax to define (declare) that the preferred font-family should be Arial. If Arial is not loaded on the computer (unlikely), then used Helvetica. If that is not available, use the generic sans-serif font. The color should be hexadecimal 000000 (Black). The weight should be “bold”. The text should be aligned to center. From the beginning of the font-family property to the end of the text-align property value, that entire “string” of properties end to end is the style attribute value because they are all contained within the quotation marks following style=.
To summarize, in the terminology of markup languages, attributes are HTML conventions, and properties are CSS conventions. For the time being, there are some overlaps, however, those overlaps are likely to not exist in a few years as HTML5 becomes the norm. For now, if there is a way to accomplish your goal in CSS, that is the preferred technique. If no CSS method exists, then HTML or Javascript will need to be used to accomplish your goal in making your page look and act the way you have designed.
The differences have to do with HTML vs CSS. HTML is a way to structure your document. HTML defines a group of text for the browser as a paragraph (<p>) or a heading (<h1> or an image (<img>). Since HTML is a markup language, not a programming language, its job is to structure the page. HTML used to be used to also affect the pages appearance, i.e. formatting. So there are many attributes, still in existence, that are used to change the appearance of elements on the page. However over the evolution of the language, it was found that using HTML elements to control the appearance was not the most effective way of web design. That is when CSS was introduced. Now pages are structured with HTML and appearance is controlled via CSS.
HTML uses attributes in the form, attribute=”value”, to modify or provide additional needed information for a HTML tag. For example, the <img> tag simply tells a brower that a space on the page is being reserved for an image. It however does not specify what image is being used. For that, the src (resource) attribute is used. The src=”filepath/filename” attribute tells the browser where to find the image to put in that location.
The <font> tag used to be used to specify font appearance on a page. And in some programs it still is. However, the font tag is deprecated, meaning there is a better way to accomplish that control. That doesn’t mean the font tag doesn’t work anymore. There are still too many web sites on the web that still use it, for it to be unsupported at this point. Even NSOnline, still uses the font tag to modify font appearance information. But there is a better way, and eventually, it will no longer be used. The preferred way is CSS.
CSS is not HTML. It is a complimentary technology, with its own syntax, Â you use to define, or declare, the properties of HTML elements. The syntax for a CSS declaration is “property: value;” (without the quotation marks). The similarities between an attribute, attribute=”value” and a CSS declaration, property: value; are confusing at first. Mostly because, at this point in the evolution of HTML, both are needed. So there has to be a way of inserting CSS declarations into HTML tags. There is…. it’s called the style attribute. Let’s look at an example.
<h1 id=”top” style=”font-family: Arial, Helvetica, sans-serif; color: #000000; weight: Bold; text-align: center;”> Understanding CSS syntax</h1>
In this example, the content “Understanding CSS syntax” is being marked-up as a level-one heading. It has been given an id attribute with a value of “top” – which means that you are defining this location on the page with a label called “top”. You also want it to look a certain way. Since CSS is used to control appearance we need to used CSS to accomplish that. In this example, we are using an in-line CSS declaration which will affect only this heading and no others. The style attribute is how we interface CSS style syntax with an individual HTML element. The syntax is style=”CSSproperty: value;”. The style attribute expects the value to be in CSS syntax.
In the example above, style=”font-family: Arial, Helvetica, sans-serif; color: #000000; weight: Bold; text-align: center;” we are using CSS syntax to define (declare) that the preferred font-family should be Arial. If Arial is not loaded on the computer (unlikely), then used Helvetica. If that is not available, use the generic sans-serif font. The color should be hexadecimal 000000 (Black). The weight should be “bold”. The text should be aligned to center. From the beginning of the font-family property to the end of the text-align property value, that entire “string” of properties end to end is the style attribute value because they are all contained within the quotation marks following style=.
To summarize, in the terminology of markup languages, attributes are HTML conventions, and properties are CSS conventions. For the time being, there are some overlaps, however, those overlaps are likely to not exist in a few years as HTML5 becomes the norm. For now, if there is a way to accomplish your goal in CSS, that is the preferred technique. If no CSS method exists, then HTML or Javascript will need to be used to accomplish your goal in making your page look and act the way you have designed.
About