This can be used to create the coolest effects in a website. Thats the good news. The bad news is that each browser appears to have its unique way of handling these tags. So what appears to be an extremely cool effect in your favorite browser will appear to be something very similar to green goo on other browsers. Using this a lot will give you sleepless nights — trust me — I know.
I will try to provide the best way to use this technology. The methods provided here will work on most of the browsers. But it may not work on all version of all browsers. To get more details on the difference between browsers, go to http://www.quirksmode.com/
Div Tag
Now that you are all sufficiently scared, lets try to write some text into the DIV tag. First, create the tag using the code
I don’t have to tell you what you can do armed with this knowledge and a little imagination. You can redesign the whole page dynamically with this. Not recommended — but possible.
document.getElementById(«div_tag») : This function will find the element in the current document with the id ‘div_tag’. There are other ways to do the same thing, but for the maximum browser compact ability and for conforming to W3C standards, this one is recommended.
innerHTML : A property of the DIV or SPAN. This will hold the text and its formatting — in HTML.
More methods/properties of this will come latter. Now let us create a below effect using this technique.
Span
Span is a tag very similar to DIV in its properties. The difference between the two is the while the DIV is a block-level element, SPAN is an inline element. Both DIV and SPAN are grouping elements. The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents.
So when do you use SPAN and when do you use DIV? Use DIV if you want do enclose lengthy contents or if the enclosed text will have HTML tags in them. Use span for enclosing very small contents.
I accidentally shot my father-in-law while deer hunting. It was an honest mistake. I came out of the tent in the morning and thought I saw a deer in an orange vest making coffee. Steven Wright
div.thequote < border:1px dashed black; padding-left:50px; padding-right:50px; >span.quoter I accidentally shot my father-in-law while deer hunting. It was an honest mistake. I came out of the tent in the morning and thought I saw a deer in an orange vest making coffee. Steven Wright
If you are serious about web development, you should know these two tags very well — they have awesome powers. These tags in alliance with CSS are currently posing a great threat to the other tags. If these two tags and CSS had their way, many old and obsolete tags would die — the first to go will be the font tag. Next in line will be other tags like b(bold) — will be replaced by , i(italics) — to be replaced by , etc. I have even heard reports that div is going to replace the old(and faithful) table tag in layout! These tags with some others are promising to bring about the HTML utopia — the separation of design and content.
I know that the last paragraph was off-topic — but I just wanted you to know that DIV and SPAN are tags with enormous potential and not to be taken lightly.
Now lets see a more practical use of SPAN tag.
Before marriage a man yearns for his wife. Change
The code use to create the above effect is given below.
In this example we changed the contents of the tag. Now let us try to change the appearance of the tag.
DIV/SPAN
Notice: Trying to access array offset on value of type null in /var/www/icms/classes/Menu.php on line 49
Notice: Trying to access array offset on value of type null in /var/www/icms/classes/Menu.php on line 49
Notice: Trying to access array offset on value of type null in /var/www/icms/classes/Menu.php on line 49
Notice: Trying to access array offset on value of type null in /var/www/icms/classes/Menu.php on line 49
Notice: Trying to access array offset on value of type null in /var/www/icms/classes/Menu.php on line 49
Notice: Trying to access array offset on value of type null in /var/www/icms/classes/Menu.php on line 49
Notice: Trying to access array offset on value of type null in /var/www/icms/classes/Menu.php on line 49
Notice: Trying to access array offset on value of type null in /var/www/icms/classes/Menu.php on line 49
Notice: Trying to access array offset on value of type null in /var/www/icms/classes/Menu.php on line 49
Notice: Trying to access array offset on value of type null in /var/www/icms/classes/Menu.php on line 49
Notice: Trying to access array offset on value of type null in /var/www/icms/classes/Menu.php on line 49
Notice: Trying to access array offset on value of type null in /var/www/icms/classes/Menu.php on line 49
Notice: Trying to access array offset on value of type null in /var/www/icms/classes/Menu.php on line 49
Notice: Trying to access array offset on value of type null in /var/www/icms/classes/Menu.php on line 49
Notice: Trying to access array offset on value of type null in /var/www/icms/classes/Menu.php on line 49
Notice: Trying to access array offset on value of type null in /var/www/icms/classes/Menu.php on line 49
You can use the HTML span tag as a container to group inline elements together so you can style or manipulate them with JavaScript.
In this article, I will show you how to use the span tag to make a certain part of your content distinct from the rest. Then you should be able to start using it in your coding projects.
What is the span tag used for?
The span tag is just like a div, which is used to group similar content so it can all be styled together.
But span is different in that it is an inline element, as opposed to div , which is a block element.
Also, keep in mind that span itself does not have any effect on its content unless you style it.
There are two major uses of the span tag – styling and manipulating a particular text with JavaScript.
How to style text with the span tag
If you want to makes some particular text or any other content different from the rest, you can wrap it in a span tag, give it a class attribute, then select it with the attribute value for styling.
In the examples below, I change the color , background-color , and font-style of some text by wrapping it in a span tag.
How to change the text color
This a crimson text within others.
I have added some basic CSS to center everything on the page:
How to change background color
A green background color perfectly implies the beauty of nature.
How to change font style
An italic font style could be instrumental in laying emphasis on a text.
How to Manipulate JavaScript with the span tag
Just as it is possible to style content by wrapping a span tag around it, you can also manipulate your content by wrapping it in a span tag. You give it an id attribute and then select it by its id with JavaScript so you can manipulate it.
In the example below, I changed some text within other text to uppercase with JavaScript:
The text, freecodecamp, was turned to upperase with JavaScript
In this tutorial, you have learned how to manipulate a particular piece of text with CSS and JavaScript by wrapping it in a span tag and giving it a unique class or id attribute.
Please note that in cases like this, you should use classes for styling and ids for manipulation with JavaScript in order to avoid confusion.
Thank you for reading, and keep coding.
Kolade Chris
Web developer and technical writer focusing on frontend technologies. I also dabble in a lot of other technologies.
If you read this far, tweet to the author to show them you care. Tweet a thanks
Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started
freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States Federal Tax Identification Number: 82-0779546)
Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons — all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.
Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.
Вы можете получить доступ к элементу с помощью getElementById():
Пример
Доступ к объекту Span
Вы можете получить доступ к элементу с помощью метода document.createElement():
Пример
Стандартные свойства и события
Объект Span также поддерживает стандартные свойства и события.
Связанные страницы
Мы только что запустили SchoolsW3 видео
ВЫБОР ЦВЕТА
Сообщить об ошибке
Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:
Ваше предложение:
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
ТОП Учебники
ТОП Справочники
ТОП Примеры
Получить сертификат
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.
