all of :
href
src
rel
attributes all seems to have same function so why each html element use these different attributes . So what is the function of each of these attributes and when to use each one of them
href
The href attribute specifies the location(URL) of any resource that anchor tag points to.
src
The src attribute specifies the location(URL) of any resource that needs to be embedded into the present HTML document. Resourse pointed by src attribute is linked to the current document such as img, video, audio, or script. The browser will allocate screen real estate depending upon the physical dimensions of the embedded object. href has no such provision.
The ***rel*** attribute defines the relationship that the linked resource has to the document from which it’s referenced. In most cases, this resource will simply be “stylesheet“, which means, not surprisingly, “the referenced document is a style sheet.” Related to this value is alternate, which is used alongside the stylesheet value (rel="alternate stylesheet") to indicate that there’s another style associated with the page. In fact, you can define several alternative styles, although the main issue with this approach lies in making it clear to the user that an alternative style sheet is available. In Firefox, you can chose View > Page Style and pick from the available style sheets on offer, but there’s no obvious indication in any browser that these alternatives exist—it’s usually left to the developer to provide some kind of JavaScript-based style switcher that renders as a control on the page. The following markup shows a page that has one main style sheet and two alternatives: