--- id: html-images title: "HTML Images" category: "Frontend" status: "draft" verification_status: "conceptual" canonical_id: "" aliases: ["img tag", "src attribute", "alt attribute", "HTML image size", "image as link", "image float"] duplicate_of: "" source_trust_level: "B" confidence_score: 0.90 created_at: 2026-06-23 updated_at: 2026-06-23 review_reason: "" merge_history: [] tags: ["html", "web", "frontend", "w3schools", "images", "media"] raw_sources: ["https://www.w3schools.com/html/html_images.asp"] applied_in: [] github_commit: "" --- # [[HTML Images]] ## 🎯 ν•œ 쀄 톡찰 (One-line insight) The HTML `` tag embeds an image via its required `src` (path) and `alt` (alternate text) attributes; images are linked into the page, not technically inserted. [S1] ## 🧠 핡심 κ°œλ… (Core concepts) - **`` tag** β€” embeds an image in a web page; it is empty (attributes only), has no closing tag, and images are linked to pages rather than inserted into them. [S1] - **`src` attribute** β€” specifies the path to the image; the browser fetches it from a web server at load time. [S1] - **`alt` attribute** β€” required; provides alternate text describing the image for when it cannot be viewed, and for screen readers. [S1] - **Size** β€” set width/height via the `style` attribute or the `width`/`height` attributes (always in pixels); the source suggests using `style`. [S1] - **Paths** β€” images can live in a sub-folder (include the folder in `src`) or on another server (use an absolute URL). [S1] - **Animated GIFs, image links, floating** β€” HTML allows animated GIFs; nest `` in `` for a link; use CSS `float` to float an image left/right of text. [S1] ## 🧩 μΆ”μΆœλœ νŒ¨ν„΄ (Extracted patterns) - **Embed pattern** β€” `alternatetext`. [S1] - **Sizing pattern** β€” `style="width:500px;height:600px;"` or `width="500" height="600"`. [S1] - **Sub-folder / cross-server pattern** β€” `src="/images/file.gif"` or `src="https://host/path.jpg"`. [S1] - **Image-link pattern** β€” ``. [S1] - **Float pattern** β€” `style="float:right;"` / `style="float:left;"`. [S1] ## πŸ“– μ„ΈλΆ€ λ‚΄μš© (Details) Images can improve the design and the appearance of a web page. [S1] **HTML Images Syntax** The HTML `` tag is used to embed an image in a web page. Images are not technically inserted into a web page; images are linked to web pages. The `` tag is empty, it contains attributes only, and does not have a closing tag. The two required attributes are `src` (the path to the image) and `alt` (an alternate text for the image). [S1] ```html alternatetext ``` **The `src` Attribute** When a web page loads, it is the browser, at that moment, that gets the image from a web server and inserts it into the page. [S1] ```html Flowers in Chania ``` **The `alt` Attribute** The required `alt` attribute provides an alternate text for an image, if the user for some reason cannot view it. The value of the `alt` attribute should describe the image. A screen reader is a software program that reads the HTML code, and allows the user to "listen" to the content. [S1] ```html Flowers in Chania ``` **Image Size β€” Width and Height** Using the `style` attribute: [S1] ```html Girl in a jacket ``` Using the `width` and `height` attributes (these always define the size in pixels): [S1] ```html Girl in a jacket ``` > **Note:** Always specify the width and height of an image. If width and height are not specified, the web page might flicker while the image loads. [S1] **Width and Height, or Style?** The `width`, `height`, and `style` attributes are all valid in HTML. However, the source suggests using the `style` attribute. [S1] ```html HTML5 Icon HTML5 Icon ``` **Images in Another Folder** If you have your images in a sub-folder, you must include the folder name in the `src` attribute. [S1] ```html HTML5 Icon ``` **Images on Another Server/Website** Some web sites point to an image on another server. To point to an image on another server, you must specify an absolute (full) URL in the `src` attribute. [S1] ```html W3Schools.com ``` > **Note:** External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; they can suddenly be removed or changed. [S1] **Animated Images** HTML allows animated GIFs. [S1] ```html Computer Man ``` **Image as a Link** To use an image as a link, put the `` tag inside the `` tag. [S1] ```html HTML tutorial ``` **Image Floating** Use the CSS `float` property to let the image float to the right or to the left of a text. [S1] ```html

Smiley face The image will float to the right of the text.

Smiley face The image will float to the left of the text.

``` **Common Image Formats** [S1] | Abbreviation | File Format | File Extension | |---|---|---| | APNG | Animated Portable Network Graphics | .apng | | GIF | Graphics Interchange Format | .gif | | ICO | Microsoft Icon | .ico, .cur | | JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp | | PNG | Portable Network Graphics | .png | | SVG | Scalable Vector Graphics | .svg | **Chapter Summary** [S1] - Use the HTML `` element to define an image - Use the HTML `src` attribute to define the URL of the image - Use the HTML `alt` attribute to define an alternate text for an image, if it cannot be displayed - Use the HTML `width` and `height` attributes or the CSS `width` and `height` properties to define the size - Use the CSS `float` property to let the image float to the left or to the right > **Note:** Loading large images takes time, and can slow down your web page. Use images carefully. [S1] **HTML Image Tags** [S1] | Tag | Description | |---|---| | `` | Defines an image | | `` | Defines an image map | | `` | Defines a clickable area inside an image map | | `` | Defines a container for multiple image resources | ## πŸ› οΈ 적용 사둀 (Applied in summary) The Chania, img_girl, HTML5 icon, animated GIF, image-link, and floating examples above are the canonical applied examples from the source. No external project/commit applications found in the source. ## πŸ’» μ½”λ“œ νŒ¨ν„΄ (Code patterns) Basic image (HTML): ```html Flowers in Chania ``` Sized via style: ```html Girl in a jacket ``` Image as a link: ```html HTML tutorial ``` Floated image: ```html Smiley face ``` ## βš–οΈ 비ꡐ 및 선택 κΈ°μ€€ (Comparison & decision criteria) The source notes that `width`/`height` attributes and the `style` attribute are all valid for sizing, but suggests using `style`: [S1] | Approach | Note | |---|---| | `width`/`height` attributes | Valid; always in pixels | | `style` attribute | Valid; suggested (avoids conflicts with stylesheet `width`/`height`) | ## βš–οΈ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (Contradictions & updates) No contradictions found in the source. ## βœ… 검증 μƒνƒœ 및 신뒰도 - **μƒνƒœ:** draft - **검증 단계:** conceptual (μ‹€μ œ 적용 사둀 발견 μ‹œ applied/validated둜 승격 κ°€λŠ₯) - **좜처 신뒰도:** B (W3Schools β€” widely used educational reference, not a primary standards body) - **μ‹ λ’° 점수:** 0.90 - **쀑볡 검사 κ²°κ³Ό:** μ‹ κ·œ 생성 (New discovery) ## πŸ”— 지식 κ·Έλž˜ν”„ (Knowledge Graph) - **μƒμœ„/루트:** [[HTML Tutorial]] - **κ΄€λ ¨ κ°œλ…:** [[HTML Links]], [[HTML Favicon]], [[HTML CSS]], [[HTML Attributes]] - **μ°Έμ‘° λ§₯락:** Referenced whenever embedding images, sizing them, linking via images, or floating images alongside text. ## πŸ“š 좜처 (Sources) - [S1] W3Schools β€” HTML Images β€” https://www.w3schools.com/html/html_images.asp ## πŸ“ λ³€κ²½ 이λ ₯ (Change history) - 2026-06-23: Initial draft synthesized from the W3Schools "HTML Images" page (Astra wiki-curation, P-Reinforce v3.1 format).