What is the difference between property and attribute?

Are you asking about the meaning of property and attribute in context of basic front-end web development, because you're learning HTML/CSS/JavaScript? I'll assume.

I'll give you a short answer that won't make sense initially, then the context needed to make sense of the short answer. The short answer is that properties are features of element objects in the DOM, whereas attributes are features of HTML elements, which are analogous to DOM element object properties. This will make more sense if you understand the distinction between the DOM representation of a page vs an HTML representation of a page.

A web browser is a program whose job is show web pages to a user. Specifically, a web browser is a program that reads instructions on how to render a page, then render that page on the user's screen. An HTML file is a description of what content and structure to put on this page.

Pay attention here because this is a common beginner's misconception: the web browser does not actually render a web page directly from the HTML markup in an HTML file. Why? It's complicated but one reason is that your your HTML may have errors that break the page. For example, if you make typos, these typos might break your page if followed precisely.

Browser makers want the user to see pages even if you submit markup with errors. So browsers are designed to tolerate errors. Imagine you someone gave you bad instructions on how to assemble a chair. You wouldn't build a chair using the model described in the faulty instructions. Rather, you would rewrite the instructions in your head based on the original instructions as a starting point, but adding in your own edits and special instructions. Effectively, you would build the chair using a chair-building model written in your head while reading and processing the original instructions, but which is distinct from the original instructions.

Similarly, the browser uses your HTML to build up its own model of the document, possibly with modifications that diverge from your original instructions. Then using this document model inspired by your original HTML, the browser uses this document model as the instructions for rendering a page to the user. If you've been wondering what all this has to do with properties and attributes, it's coming right up!

The browser models documents using a programming language construct called an object. An object is an abstract programming structure used for representing things as a collection of properties.

For example, if you want to represent a simplified dog in a programming language, you might create a dog object. This dog object would represent a dog by containing properties a real dog might have: it might have a name and the ability to bark. The dog's name and its ability to bark are its properties, both in real life, and also in the dog's abstract representation as a programming object. The details of how this is written aren't super important, but just to give you an idea, here's what such an object might look like in browser-based JavaScript.

var dog = { name: "Fido", bark: function() { alert("Woof!"); } };

The variable name "dog" stores an object represented by curly braces--{}. Inside the braces signifying the start and end of the object, there is a list of properties including "name", which holds a name, and "bark", which holds a function that can cause a message to display in the browser.

So objects are a way for programming languages to represent stuff as a list of properties. These properties can be data properties that just store data. The aforementioned dog object's name property just stores data, but doesn't make anything special happen. Properties can be method properties, which make something special happen when they are accessed. The aforementioned dog object's bark method property executes an alert on the page.

The browser's main job is to model a document then uses that model to render a document on your screen. As we've discussed, objects can be used to model things, including objects. Browsers model a document as a Document object with a bunch of properties. Many of these properties are themselves objects with their own properties. This is an important concept called the Document Object Model aka the DOM.

So now you are ready to grasp the commonality and difference between a property and an object. The DOM represents a document as a collection of properties. What properties does a document have? Documents in general have common elements: titles, headings, paragraphs, lists, and so on. So a document is made of these elements.

These elements are represented in the DOM as objects called element objects. These element objects have properties. For example, an image element object will have a property containing the image filepath to display, a property for the height of the image element in the document, a property for the width for the image element in the document, and so on.

So when you write HTML markup

<img src="cat.jpg" height="100px" width="100px">

you are marking up your document with instructions to create an img element object in the DOM where the src property's value is "cat.jpg", the height property's value is "100px", and the width property's value is "100px". Note, however, that this HTML markup is written in the syntax of an HTML element using HTML tags, not in the syntax of a programming language object. From this distinction, you will now understand the difference between property and attribute in the context of basic web development.

An HTML file is a list of HTML elements composed of HTML tags such as <img>. This list of HTML elements is a guideline the browser uses to build up its Document Object Model. When you place an HTML element <img src="cat.jpg" height="100px" width="100px"> in an HTML file, that is an instruction for the browser to create a DOM with an img object whose src property value is "cat.jpg", whose height property value is "100px", whose width property value is also "100px". In the DOM, these features of the img object are called properties. But in your HTML file, these features are called attributes in context of HTML elements, and they are analogues of HTML element object properties in the DOM.

This distinction becomes more important when you modify the DOM with JavaScript. JavaScript can be used to change the document displayed in the browser in real-time. JavaScript doesn't typically change the page by writing permanent changes to HTML files, which again, contains HTML elements with attributes. JavaScript instead manipulates the DOM representation of the page, where the page is represented not by HTML elements with attributes, but by objects with properties. By the way, this is called "DOM manipulation".

Thanks to DOM manipulation, the document represented in the DOM can differ a little or a lot from the document originally represented in HTML. The original element may originally specify <img src="cat.jpg">. Initially, the browser will process this and render a DOM where the img element object's src property is "cat.jpg". But then JavaScript DOM manipulation changes the DOM's img element's src property to "dog.jpg". Therefore, the features of the img element as an HTML element are very different than the img element's features as a DOM object.

When you are talking to someone about a problem with the value of src in your website, which src are you referring to: the src in HTML which doesn't change, or the src in the DOM which can change a lot? This is one case where it's helpful to use one name for src in an HTML element vs src in a DOM element object. So the src feature of your HTML element tag is called an attribute of the <img> element, whereas the related by distinct src feature of your DOM element object is called an "object property", or just "property" for short.

Hopefully my short answer up top now makes sense in context of the DOM. The question as I understand it is "What's the difference between property and attribute in basic web development?" The short answer is that properties are features of element objects in the DOM, whereas attributes are features of HTML elements. Hopefully this makes more sense now that you understand the distinction between the DOM representation of a page vs an HTML representation of a page.

/r/learnprogramming Thread