BRoberson1657 what she means is "hotlinking" is a term used to describe linking to a resource on an external site. So let's say you use the <img> element to link to an image from Amazon (or something.) This requires a request to Amazon, and uses their bandwidth to load your page, and is generally a nasty approach to building pages.
What you meant to say is hyperlink, or an inline link, as described above.
(I need all formatting lines as well.. width, padding, margin, border etc)
It's never really that simple. :-) An example, border for what doctype? border="0" is valid for HTML doctypes, but it's not a valid attribute for XHTML. To answer the question, most of what you ask for can be found for CSS - but "all formatting lines" would depend on
context. You may need no CSS at all for a "ordinary image" but you can apply lots of CSS rules to modify it's appearance. Another example, a simple left floated image in which the text would "flow" around it can be done in many ways. The stock minimalist approach:
<img
class="left-image" src="myimage.jpg" width="24" height="24" alt="my image">
The css:
img { border: none; } /* in case you wrap it in a link */
.left-image { float: left; margin: 0 12px 12px 0; }
But for many "purists" (probably not the right word) and for XHTML, you never want to leave a "bare element" in code source. Some examples of what I mean, in addition to the <img>,
<body>
<strong style="font-size:36px;">This may LOOK like a heading, but it's not - it's really big bare text.</strong><br>
<img src="myimage.jpg" alt="">
<br>
Here's some bare text. Since it has no semantic container, it doesn't indicate what kind of text it is.
<br>
</body>
Semantic containers do some of the lifting for us - and, give devices accessing the page some indication of "what the content is."
<body>
<h1>Ah. I'm a page heading, no argument.</h1>
<div class="left-image"><img src="myimage.jpg" width="24" height="24" alt="my image"></div>
<p>Here's some text. Since it is wrapped in a p, devices reading it know this is a paragraph and body text, distinctly different from the h1 above.</p>
</body>
In my example above I intentionally used <div> for the floated image because div, span, and br are generic elements with no semantic meaning - which is what I want in this context (or, if anything, says specifically, "this element has no semantic meaning, carry on . . . "). I could just as easily used <span> with it's display set to block.
So there really is no "give me teh codez" for any element, it depends on context.
One more (Rant? comment?) about <img> attributes, this
<img src="myimage.jpg" alt="my image">
as opposed to this
<img src="myimage.jpg" width="24" height="24" alt="my image">
The reason you want to include the width and height attributes in <img> elements, when you can, is because a browser first READS the source code then requests the resources in it. If it reads an <img> element and width and height attributes are present, it knows to "save space" for that element before the page renders.
* Without them, you may get that "floating around" effect as a page loads, elements jiggle and joggle until all the images loads and assume their position.
* Often the w/h attributes are left off if you apply CSS to these images for the same effect:
<img
id="img1234" src="myimage.jpg" alt="my image">
...
#img 1234 { width:24px; height:24px; }
.. however, this means you need to apply a whole set of classes and/or ID's to your CSS, bloating it further. In terms of maintenance, it's often easier to just include them inline, even though that's against the idea of separating presentation from markup.
In much of what I do, BOTH of these are impossible or at the least, difficult. Many CMS's don't allow (or make it difficult to) apply accurate width and height attributes, so you just have to leave them off and let it jiggle joggle as it loads. :-)
