9 Replies - 326 Views - Last Post: 14 September 2017 - 03:37 AM

#1 au.ceif.  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 25-April 17

Is it really necessary to wrap the img tag inside a block?

Posted 05 September 2017 - 08:01 AM

Good morning fellas. I'm writing a HTML layout and I came across this doubt: What's the point of wrapping the img element inside a div tag when there's only the img inside of it? Please look at my code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="author" content="au.ceif." />
    <meta name="description" content="Analog Specialists Page" />
    <meta name="robots" content="index, follow" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta name="viewport" content="width=device-width,
    height=device-height, initial-scale=1.0, user-scalable=no" />
  </head>
  <body>
    <div id="main-container">
        <img src="images/logo.gif" width="150" height="58"
        alt="Analog Specialists" title="Analog Specialists" />
        <ul>
          <li>Home</li>
          <li>For Sale</li>
          <li>Repairs</li>
          <li>About</li>
          <li>Contact</li>
        </ul>
        <img src="images/keys.jpg" width="600" height="150"
        alt="classic keyboards" title="classic keyboards"  />
        <p>
          We specialize in the sale and repair of classic keyboards,
          in particular the Fender Rhodes, Wurlitzer EP200, and Hohner Clavinet.
        </p>
    </div>
  </body>
</html>




The book I've been following (HTML and CSS: Design and Build Websites by Jon Duckett), has been wrapping the img:

  <div id="logo">
     <img src="images/logo.gif" width="150" height="58"
        alt="Analog Specialists" title="Analog Specialists" />
  </div>



Is it good practice doing this? why?

Thank you.

Is This A Good Question/Topic? 0
  • +

Replies To: Is it really necessary to wrap the img tag inside a block?

#2 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 13493
  • View blog
  • Posts: 53,899
  • Joined: 12-June 08

Re: Is it really necessary to wrap the img tag inside a block?

Posted 05 September 2017 - 08:13 AM

Since there was a specific ID given for the div I would imagine you will find CSS specific to that tag.
Was This Post Helpful? 0
  • +
  • -

#3 au.ceif.  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 25-April 17

Re: Is it really necessary to wrap the img tag inside a block?

Posted 05 September 2017 - 08:19 AM

I will try to be more specific: img is an inline-block element, right? technically, it is already a block. then why would I need to put it inside another block, for example, a <p> tag or a <div> like I aforementioned?

This post has been edited by au.ceif.: 05 September 2017 - 08:19 AM

Was This Post Helpful? 0
  • +
  • -

#4 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 13493
  • View blog
  • Posts: 53,899
  • Joined: 12-June 08

Re: Is it really necessary to wrap the img tag inside a block?

Posted 05 September 2017 - 08:23 AM

An image can have it's own tag sure. It helps to think of divs as containers. You can knock out areas, interaction, formatting, etc of that little space irrelevant of the the actual content.. be it an img or text or what not. I prefer to block out with div containers and add my things to said containers.

An image can have it's own tag sure. It helps to think of divs as containers. You can knock out areas, interaction, formatting, etc of that little space irrelevant of the the actual content.. be it an img or text or what not. I prefer to block out with div containers and add my things to said containers.
Was This Post Helpful? 0
  • +
  • -

#5 au.ceif.  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 25-April 17

Re: Is it really necessary to wrap the img tag inside a block?

Posted 05 September 2017 - 08:28 AM

Quote

I prefer to block out with div containers and add my things to said containers.


So, it doesn't matter if the img is inside of a div or not, right?
Was This Post Helpful? 0
  • +
  • -

#6 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 13493
  • View blog
  • Posts: 53,899
  • Joined: 12-June 08

Re: Is it really necessary to wrap the img tag inside a block?

Posted 05 September 2017 - 08:33 AM

Well.. what does the CSS show? Not all CSS tags would apply to IMG.
Was This Post Helpful? 1
  • +
  • -

#7 au.ceif.  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 25-April 17

Re: Is it really necessary to wrap the img tag inside a block?

Posted 05 September 2017 - 08:39 AM

The author code is this one:

<!DOCTYPE html>
<html>
	<head>
		<title>Boxes</title>
		<style type="text/css">
			body {
				font-size: 80%;
				font-family: "Courier New", Courier, monospace;
				letter-spacing: 0.15em;	
				background-color: #efefef;}
			#page {
				max-width: 940px;
				min-width: 720px;
				margin: 10px auto 10px auto;
				padding: 20px;
				border: 4px double #000;
				background-color: #ffffff;}
			#logo {
				width: 150px;
				margin: 10px auto 25px auto;}
			ul {
				width: 570px;
				padding: 15px;
				margin: 0px auto 0px auto;
				border-top: 2px solid #000;
				border-bottom: 1px solid #000;
				text-align: center;}
			li {
				display: inline;
				margin: 0px 3px;}
			p {
				text-align: center;
				width: 600px; 
				margin: 20px auto 20px auto; 
				font-weight: normal;}
			a {
				color: #000000;
				text-transform: uppercase;
				text-decoration: none;
				padding: 6px 18px 5px 18px;}
			a:hover, a.on {
				color: #cc3333;
				background-color: #ffffff;}
		</style>
	</head>
	<body>
		<div id="page">
			<div id="logo">
				<img src="images/logo.gif" alt="The Analog Specialists" />
			</div>
			<ul id="navigation">
				<li><a href="#" class="on">Home</a></li>
				<li><a href="#">For Sale</a></li>
				<li><a href="#">Repairs</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
			<p>
				<img src="images/keys.jpg" alt="Fender Rhodes, Hohner Clavinet, and Wurlitzer EP200" />
			</p>
			<p>
				We specialize in the sale and repair of classic keyboards, in particular the Fender Rhodes, Wurlitzer EP200, and Hohner Clavinet.
			</p>
		</div>
	</body>
</html>



Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is online

  • the case is sol-ved
  • member icon

Reputation: 6380
  • View blog
  • Posts: 25,776
  • Joined: 12-December 12

Re: Is it really necessary to wrap the img tag inside a block?

Posted 05 September 2017 - 08:49 AM

If #logo only ever contains an img then it could be redundant, if CSS where added to the image to make it behave as a block element. It could even just be a background image.

Maybe the author anticipated other content for logo, such as a second image or promotional text.

But I'm glad that you recognise this possible redundancy.
Was This Post Helpful? 1
  • +
  • -

#9 au.ceif.  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 25-April 17

Re: Is it really necessary to wrap the img tag inside a block?

Posted 05 September 2017 - 09:04 AM

Quote

But I'm glad that you recognise this possible redundancy.


Thank you andrews.

You are right. Images can't have this rule applied to them:

img {

  margin: auto; 
}




unless they become block elements with display:

img {

  display: block; 
  margin: auto;

}



This post has been edited by au.ceif.: 05 September 2017 - 09:06 AM

Was This Post Helpful? 0
  • +
  • -

#10 ge∅  Icon User is online

  • D.I.C Lover

Reputation: 180
  • View blog
  • Posts: 1,127
  • Joined: 21-November 13

Re: Is it really necessary to wrap the img tag inside a block?

Posted 14 September 2017 - 03:37 AM

I think you should not think of tags as inline or block when you write HTML. It use to matter because the W3C forbid placing block elements inside inline elements, and inline elements had to be a child of at least one block (you could not for instance have something like body > img). The W3C has since HTML5 abandoned this distinction (you can have bloc elements inside links for example), so I recommend you simply write semantically correct HTML and don't bother about the default display mode of the tags you use, the same way you would ignore the default font size of a title element.

I also find useful sometimes to wrap some elements in a div when I suspect the content may change because it would be tedious to change the relevant CSS later.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1