logo

Align Attribute of <img> Tag – Long Answer Questions

Medium Level (Application & Explanation)

Q1. Explain horizontal alignment using the align attribute. How does text wrap around the image?

Answer:

  • The align attribute controls the horizontal position of an image.
  • With align="left", the image goes to the left. The text wraps on the right.
  • With align="right", the image goes to the right. The text wraps on the left.
  • This creates a magazine-style look where text flows beside images.
  • In HTML5, this attribute is deprecated.
  • We now use CSS float like float:left or float:right to get the same effect.

Q2. Describe vertical alignment values top, middle, and bottom for images within a line of text.

Answer:

  • Vertical alignment decides how the image aligns with text on the same line.
  • align="top" lines up the top of the image with the top of the tallest text in that line.
  • align="middle" centers the image with the middle of the text.
  • align="bottom" places the bottom of the image on the text baseline.
  • Bottom is the default vertical alignment.
  • Use these values to make small icons sit neatly with text in a sentence.

Q3. What is a floating image? How can you create it using the align attribute?

Answer:

  • A floating image sits on the left or right and the text wraps around it.
  • It gives a newspaper-style layout.
  • Using align="left" moves the image to the left and wraps text on the right.
  • Using align="right" moves the image to the right and wraps text on the left.
  • This method is from older HTML and is easy to understand.
  • In modern HTML5, use CSS float to create the same floating effect.

Q4. Why is the align attribute called deprecated in HTML5? What should you use instead?

Answer:

  • The align attribute is deprecated in HTML5.
  • Deprecated means it is not recommended for modern web pages.
  • It may still work, but it should not be used now.
  • The preferred way is to use CSS for layout and styling.
  • Use float:left or float:right for floating images.
  • You can also add margins in CSS for better spacing around images.

Q5. When should you use align="left" and align="right"? Explain with use cases.

Answer:

  • Use align="left" when you want the image on the left and text on the right.
  • This is common for L-R reading languages to start with images.
  • Use align="right" when you want the image on the right and text on the left.
  • This can
    highlight
    the image while the reader begins with text.
  • Both create text wrapping, which saves space and looks balanced.
  • In HTML5, do the same with CSS float for a modern approach.

High Complexity (Analysis & Scenario-Based)

Q6. You want a small icon to align neatly with text in the same line. Which vertical align value will you choose and why?

Answer:

  • For inline icons, the goal is clean alignment with the text.
  • align="middle" is a good choice for balanced look with words.
  • It places the image center near the text middle.
  • align="top" pushes the icon to the top, which may look uneven.
  • align="bottom" aligns to the baseline, which is the default and often okay.
  • Pick middle for icons beside short phrases for a smooth visual flow.

Q7. A page has an image on the left and another on the right. Predict how the text will flow between them if both images use align.

Answer:

  • If one image uses align="left", it stays on the left.
  • If another uses align="right", it stays on the right.
  • The text will try to flow between the two images where space allows.
  • If the images are wide, the text may appear below them.
  • If they are narrow, some text can appear between them.
  • In HTML5, the same idea is done with CSS float for better control.

Q8. An old webpage uses align for floating images. Show how you would modernize it using CSS while keeping the same look.

Answer:

  • First, note which images use align="left" and align="right".
  • Replace the align attribute with CSS on the image tag.
  • Use style="float:left;" for left float and add margin-right for spacing.
  • Use style="float:right;" for right float and add margin-left for spacing.
  • Keep width values same to preserve size.
  • The page will look similar, but now uses HTML5-friendly CSS.

Q9. In a sentence, a small image looks too low compared to text. Which vertical align should you use and what will be the effect?

Answer:

  • The image is likely aligned to the baseline using bottom by default.
  • To lift it, use align="middle" for balanced vertical alignment.
  • This brings the center of the image to the middle of the text.
  • It makes the icon look even with surrounding words.
  • align="top" can also work if you want it at the top of tall text.
  • Choose based on which gives a cleaner visual line in that sentence.

Q10. In an exam, you used align in your answer. How will you justify it correctly while also showing modern knowledge?

Answer:

  • State that the align attribute sets horizontal (left, right) and vertical (top, middle, bottom) alignment.
  • Explain that it can create floating images with text wrapping.
  • Add that in HTML5, the align attribute is deprecated.
  • Show the modern way: use CSS float for left/right floating.
  • Mention simple CSS like float:left; margin-right:10px; width:150px;
  • This shows you know both the old method and the current standard.

Back to Topics

Take the test