在 HTML 中，span 標籤被定義為“內聯”元素。這意味著它主要用於對文字進行樣式化或語義分組，並且它本身不會導致換行。 因此，你可以在 <span> 標籤內放置其他內聯元素，但不建議放置塊級元素。
可以放在 <span> 標籤內的元素：
-
短語元素:
<em>,<strong>,<cite>,<dfn>,<abbr>,<time>,<code >,<var>,<samp>,<kbd>,<mark>,<ruby>,<rt>,<rp>,<bdi>,<bdo>這些元素用於對文字新增語義或樣式。 -
其他內聯元素:
<a>,<img>,<br>,<script>,<style>,<input>,<textarea>,<button>,<select>,<span>(可以巢狀<span>標籤) 等。 這些元素也是內聯的，不會導致換行。 -
文字內容: 當然，
<span>標籤最主要的作用就是包裹文字內容。
不建議放在 <span> 標籤內的元素：
- 塊級元素:
<div>,<p>,<h1>-<h6>,<ul>,<ol>,<li>,<dl>,<dt>,<dd>,<table>,<form>,<article>,<aside>,<nav>,<header>,<footer>,<section>等。 這些元素會導致換行，在語義上也不適合放在<span>內。 雖然瀏覽器可能會渲染出來，但這是不合規範的，可能會導致不可預期的行為。
示例：
<span>This is some text with <em>emphasized</em> and <strong>strong</strong> text.</span>
<span>Here's a link: <a href="https://www.example.com">Example</a></span>
<span>An image: <img src="image.jpg" alt="Example Image"></span>
<span><input type="text" placeholder="Enter text"></span>
總結: 最好將 <span> 標籤用於其預期的目的：對內聯內容應用樣式或語義分組。避免在其中巢狀塊級元素，以保持 HTML 的結構良好和語義清晰。 如果需要對塊級元素應用樣式或新增語義，應該直接在塊級元素上操作。