fix: Update packages and fix local dev (#26907)
<!-- Please follow this checklist and put an x in each of the boxes, like this: [x]. It will ensure that our team takes your pull request seriously. --> - [x] I have read [freeCodeCamp's contribution guidelines](https://github.com/freeCodeCamp/freeCodeCamp/blob/master/CONTRIBUTING.md). - [x] My pull request has a descriptive title (not a vague title like `Update index.md`) - [x] My pull request targets the `master` branch of freeCodeCamp.
This commit is contained in:
Stuart Taylor
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
153e1c9f38
commit
7da04a348b
28
mock-guide/english/html/tutorials/basic-html/index.md
Normal file
28
mock-guide/english/html/tutorials/basic-html/index.md
Normal file
@@ -0,0 +1,28 @@
|
||||
---
|
||||
title: Basic HTML
|
||||
---
|
||||
## Basic HTML
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/html/tutorials/basic-html/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
Structure of a basic HTML file:
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
#### More Information:
|
||||
<!-- Please add any articles you think might be helpful to read before writing the article -->
|
||||
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
---
|
||||
title: Radio Button
|
||||
---
|
||||
|
||||
# Radio Button
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
|
||||
<form action="/action_page.php">
|
||||
<input type="radio" name="gender" value="male"> Male<br>
|
||||
<input type="radio" name="gender" value="female"> Female<br>
|
||||
<input type="radio" name="gender" value="other"> Other<br>
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
Radio buttons can be used to select a single option out of multiple options. You aren't allowed to choose 2 or more radio buttons in the same selection field.
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
title: Center an Image Using Text Align Center
|
||||
---
|
||||
## Center an Image Using Text Align Center
|
||||
|
||||
An `<img>` element is an inline element (display value of `inline-block`). It can be easily centered by adding the `text-align: center;` CSS property to the parent element
|
||||
that contains it.
|
||||
|
||||
To center an image using `text-align: center;` you must place the `<img>` inside of a block-level element such as a `div`.
|
||||
Since the `text-align` property only applies to block-level elements, you place `text-align: center;` on the wrapping block-level element to achieve a horizontally centered `<img>`.
|
||||
|
||||
### Example
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Center an Image using text align center</title>
|
||||
<style>
|
||||
.img-container {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="img-container"> <!-- Block parent element -->
|
||||
<img src="user.png" alt="John Doe">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**Note:** The parent element must be a block element. If it is not a block element, you should add ```display: block;``` CSS property along with the ```text-align``` property.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Center an Image using text align center</title>
|
||||
<style>
|
||||
.img-container {
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<span class="img-container"> <!-- Inline parent element -->
|
||||
<img src="user.png" alt="">
|
||||
</span>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**Demo:** [Codepen](https://codepen.io/aravindio/pen/PJMXbp)
|
||||
|
||||
## Documentation
|
||||
<a href='https://developer.mozilla.org/en-US/docs/Web/CSS/text-align' target='_blank' rel='nofollow'>**text-align** - MDN</a>
|
||||
|
||||
<a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img' target='_blank' rel='nofollow'>**\<img\>** - MDN</a>
|
||||
@@ -0,0 +1,33 @@
|
||||
---
|
||||
title: Embedding Youtube Videos
|
||||
---
|
||||
## Embedding Youtube Videos
|
||||
|
||||
Probably a lot of times you have seen embedded videos on your favorite websites. Today we will talk about embedding YouTube videos, what is very easy to do, even if you don't have any knowledge about it. For this action we will use `<frame>` element, which is very useful in embedding other HTMLs. It's very often used to promote some products as adds. Notice that you're not only limited to YouTube - you can also experiment with other documents.
|
||||
|
||||
### `<frame>` Element
|
||||
|
||||
#### Using
|
||||
You can easily put your chosen video by using `<frame>` element. But remember, you also need to define height and width of your player, so we will use attributes `height` and `width`.
|
||||
|
||||
What we will need?
|
||||
- Video on YouTube and URL
|
||||
- `<frame>` element (don't forget to close it!)
|
||||
- `width` and `height` attributes
|
||||
|
||||
```html
|
||||
<iframe width="420" height="315"
|
||||
src="https://www.youtube.com/watch?v=v8kFT4I31es">
|
||||
</iframe>
|
||||
```
|
||||
|
||||
Inserted values are recommended, but feel free to change them in a way that you would like.
|
||||
|
||||
#### Autoplay
|
||||
What should we do if we would like to make this player starting automatically playing? Just add to your link value `?autoplay=1`. But be careful, because it can be annoying for a lot of people visiting your webpage.
|
||||
|
||||
```html
|
||||
<iframe width="420" height="315"
|
||||
src="https://www.youtube.com/watch?v=v8kFT4I31es?autoplay=1">
|
||||
</iframe>
|
||||
```
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: How to Create an HTML Button That Acts Like a Link
|
||||
---
|
||||
## How to Create an HTML Button That Acts Like a Link
|
||||
|
||||
Sometimes you may want to use a button to link to another page or website rather than to submit a form or something like that. This is fairly simple to do and can be achieved in several ways.
|
||||
|
||||
One way is to simply wrap your `<button>` tag in an `<a>` tag:
|
||||
|
||||
```html
|
||||
<a href='https://www.freecodecamp.org/'><button>Link To freeCodeCamp</button></a>
|
||||
```
|
||||
|
||||
This transforms your entire button into a link.
|
||||
|
||||
A second option is to create your link as you normally would with your `<a>` tag and then style it via CSS:
|
||||
|
||||
```html
|
||||
<a href='https://www.freecodecamp.org/'>Link To freeCodeCamp</a>
|
||||
```
|
||||
|
||||
Once you've created your link, you can the use CSS to make it look like a button. For instance, you could add a border, a background color, some styles for when the user is hovering the link...
|
||||
|
||||
Another way to add a button is to wrap an `input` inside `form` tags. Specify the desired target URL in the form action attribute.
|
||||
|
||||
```html
|
||||
<form action="http://google.com">
|
||||
<input type="submit" value="Go to Google" />
|
||||
</form>
|
||||
```
|
||||
|
||||
#### More Information:
|
||||
* [FreeCodeCamp Guide - styling buttons](https://guide.freecodecamp.org/css/css-buttons/)
|
||||
* [How to create an HTML button that acts like a link?](https://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link)
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
title: How to Horizontally Center a Div Tag in Another Div Tag
|
||||
---
|
||||
## How to Horizontally Center a Div Tag in Another Div Tag
|
||||
Horizontally centering a `<div>` inside of another `<div>` is pretty easy.
|
||||
|
||||
Let's start by creating two div tags with "parent" and "child" classes. The parent will be our container, and the child will be the `<div>` we're horizontally centering.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>How to Horizontally Center a Div Tag in Another Div Tag</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="parent">
|
||||
<div class="child">
|
||||
<p>This is the center.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
There are a couple ways you can tacklet this, but for this tutorial let's focus on two. In the first we'll center our child `<div>` using `margin` and in the second we'll use `flexbox`.
|
||||
|
||||
|
||||
### Example of Centering a Div Tag with Margins
|
||||
If you specify a `width` on your child div you can use `margin: auto`. This will center your child `<div>` by evenly distributing it's left-and-right margins.
|
||||
|
||||
```css
|
||||
.parent {
|
||||
border: 2px solid red;
|
||||
}
|
||||
|
||||
.centered-child {
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
border: 1px solid black;
|
||||
}
|
||||
```
|
||||
|
||||
### Example of Centering a Div Tag with Flexbox
|
||||
Using flexbox to center a `<div>` is slightly different. First, it doesn't require you to specify `width` on your child `<div>`. Second, you actually center the child `<div>` by applying css properties on the parent `<div>`.
|
||||
|
||||
To center a child `<div>` using flexbox you need to use `display: flex` along with `justify-content: center` on the parent `<div>`.
|
||||
|
||||
```css
|
||||
.parent {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border: 2px solid red;
|
||||
}
|
||||
|
||||
.centered-child {
|
||||
border: 1px solid black;
|
||||
}
|
||||
```
|
||||
|
||||
#### More Information:
|
||||
[Flexbox Support Matrix](http://caniuse.com/#search=flexbox)
|
||||
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
---
|
||||
title: How to Insert Spaces or Tabs in Text Using HTML and CSS
|
||||
---
|
||||
## How to Insert Spaces or Tabs in Text Using HTML and CSS
|
||||
|
||||
There are a multitude of ways to insert spaces using html. For simplicity sake we will
|
||||
go over one of these, which are by inserting a Span tag.
|
||||
|
||||
## Span Tag
|
||||
|
||||
``<span>``
|
||||
|
||||
Span Tags ``<span>`` are self closing tags meaning they do not need a ``/>``.
|
||||
|
||||
## Span Example
|
||||
|
||||
An example of how a ``<span>`` tag inserts a space between text can be seen below.
|
||||
|
||||
``<p>Hello may name is <span> James</p>``
|
||||
|
||||
If you assign a class to your ``<span>`` then you could add some css to it.
|
||||
Like so,
|
||||
|
||||
``<p>Hello my name is <span class=tab> James</p>``
|
||||
|
||||
Then either in an external stylesheet or an internal-stylesheet you can give the ``class .tab``
|
||||
some properties.
|
||||
|
||||
## Span Class Example
|
||||
|
||||
For example
|
||||
|
||||
``.tab {padding-left: 2px;}``
|
||||
|
||||
You can also give the ``<span>`` some inline-style properties, as shown below.
|
||||
|
||||
``<p>Hello my name is <span style="padding-left: 2px;"> James</p>``
|
||||
|
||||
## More Information
|
||||
|
||||
For more information on the <span> tag or on; How to Insert Spaces or Tabs in Text Using HTML and CSS, you can visit w3schools. https://www.w3schools.com/tags/tag_span.asp
|
||||
|
||||
|
||||
36
mock-guide/english/html/tutorials/how-to-use-links/index.md
Normal file
36
mock-guide/english/html/tutorials/how-to-use-links/index.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: How to Use Links
|
||||
---
|
||||
## How to Use Links
|
||||
|
||||
In HTML you can use the `<a>` tag to create a link. For example you can write `<a href="https://www.freecodecamp.org/">freeCodeCamp</a>` to create a link to freeCodeCamp's website.
|
||||
|
||||
Links are found in nearly all web pages. Links allow users to click their way from page to page.
|
||||
|
||||
HTML links are hyperlinks. You can click on a link and jump to another document.
|
||||
|
||||
When you move the mouse over a link, the mouse arrow will turn into a little hand.
|
||||
|
||||
Note: A link does not have to be text. It can be an image or any other HTML element.
|
||||
|
||||
In HTML, links are defined with the <a> tag:
|
||||
|
||||
```html
|
||||
<a href="url">link text</a>
|
||||
```
|
||||
|
||||
Example
|
||||
|
||||
```html
|
||||
<a href="https://www.freecodecamp.org/">Visit our site for tutorials</a>
|
||||
```
|
||||
|
||||
The href attribute specifies the destination address (https://www.freecodecamp.org) of the link.
|
||||
|
||||
The link text is the visible part (Visit our site for tutorials).
|
||||
|
||||
Clicking on the link text will send you to the specified address.
|
||||
|
||||
#### More Information:
|
||||
<!-- Please add any articles you think might be helpful to read before writing the article -->
|
||||
* [MDN - HTML <a> Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)
|
||||
78
mock-guide/english/html/tutorials/how-to-use-lists/index.md
Normal file
78
mock-guide/english/html/tutorials/how-to-use-lists/index.md
Normal file
@@ -0,0 +1,78 @@
|
||||
---
|
||||
title: How to Use Lists
|
||||
---
|
||||
## How to Use Lists
|
||||
Lists are used to specify a set of consecutive items or related information in well formed and semantic way, such as a list of ingredients or a list of procedural steps.
|
||||
HTML markup has three different types of lists - **ordered**, **unordored** and **description** lists.
|
||||
|
||||
### Ordered Lists
|
||||
An ordered list is used to group a set of related items, in a specific order.
|
||||
This list is created with `<ol>` tag. Each list item is surrounded with `<li>` tag.
|
||||
|
||||
##### Code
|
||||
```html
|
||||
<ol>
|
||||
<li>Mix ingredients</li>
|
||||
<li>Bake in oven for an hour</li>
|
||||
<li>Allow to stand for ten minutes</li>
|
||||
</ol>
|
||||
```
|
||||
##### Example
|
||||
<ol>
|
||||
<li>Mix ingredients</li>
|
||||
<li>Bake in oven for an hour</li>
|
||||
<li>Allow to stand for ten minutes</li>
|
||||
</ol>
|
||||
|
||||
### Unordered Lists
|
||||
An unordered list is used to group a set of related items, in no particular order. This list is created with `<ul>` tag. Each list item is surrounded with `<li>` tag.
|
||||
|
||||
##### Code
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>Chocolate Cake</li>
|
||||
<li>Black Forest Cake</li>
|
||||
<li>Pineapple Cake</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
|
||||
#### Example
|
||||
<ul>
|
||||
<li>Chocolate Cake</li>
|
||||
<li>Black Forest Cake</li>
|
||||
<li>Pineapple Cake</li>
|
||||
</ul>
|
||||
|
||||
|
||||
### Description Lists
|
||||
A description list is used to specify a list of terms and their descriptions. This list is created with `<dl>` tag. Each list item is surrounded with `<dd>` tag.
|
||||
|
||||
##### Code
|
||||
|
||||
```html
|
||||
<dl>
|
||||
<dt>Bread</dt>
|
||||
<dd>A baked food made of flour.</dd>
|
||||
<dt>Coffee</dt>
|
||||
<dd>A drink made from roasted coffee beans.</dd>
|
||||
</dl>
|
||||
```
|
||||
|
||||
##### Output
|
||||
<dl>
|
||||
<dt>Bread</dt>
|
||||
<dd>A baked food made of flour.</dd>
|
||||
<dt>Coffee</dt>
|
||||
<dd>A drink made from roasted coffee beans.</dd>
|
||||
</dl>
|
||||
|
||||
#### Styling List
|
||||
You can also control the style of the list. You can use `list-style` property of lists. Your list can be bullets, square, in roman numearls or can be images you want.
|
||||
|
||||
`list-style` property is a shorthand for `list-style-type`, `list-style-position`, `list-style-image`.
|
||||
|
||||
#### More Information:
|
||||
[HTML lists · WebPlatform Docs](https://webplatform.github.io/docs/guides/html_lists/
|
||||
)
|
||||
50
mock-guide/english/html/tutorials/images-in-html/index.md
Normal file
50
mock-guide/english/html/tutorials/images-in-html/index.md
Normal file
@@ -0,0 +1,50 @@
|
||||
---
|
||||
title: Images in HTML
|
||||
---
|
||||
|
||||
|
||||
## Introduction
|
||||
|
||||
You can define images by using the `<img>` tag. It does not have a closing tag since it can contain only attributes.
|
||||
To insert an image you define the source and an alternative text wich is displayed when the image can not be rendered.
|
||||
|
||||
`src` - This attribute provides the url to image present either on your desktop/laptop or to be included from some other website. Remember the link provided should not be broken otherwise the image will not be produced on your webpage.
|
||||
|
||||
`alt` - This attribute is used to overcome the problem of broken image or incapability of your browser to not being able to produce image on webpage. This attribute as name suggests provide "alternative" to image which is some text describing the image.
|
||||
|
||||
|
||||
## Example
|
||||
|
||||
```html
|
||||
<img src="URL of the Image" alt="Descriptive Title" />
|
||||
```
|
||||
|
||||
### To define height and width of an image you can use the height and width attribute:
|
||||
```html
|
||||
<img src="URL of the Image" alt="Descriptive Title" height="100" width="150"/>
|
||||
```
|
||||
|
||||
### You can also define border thickness (0 means no border):
|
||||
```html
|
||||
<img src="URL of the Image" alt="Descriptive Title" border="2"/>
|
||||
```
|
||||
|
||||
### Align an image:
|
||||
```html
|
||||
<img src="URL of the Image" alt="Descriptive Title" align="left"/>
|
||||
```
|
||||
|
||||
### You are also able to use styles within a style attribute:
|
||||
```html
|
||||
<img src="URL of the Image" alt="Descriptive Title" style="width: 100px; height: 150px;"/>
|
||||
```
|
||||
|
||||
Here's an example to make a rounded image:
|
||||
```html
|
||||
<img src="URL of the Image" alt="Descriptive Title" style="border-radius: 50%;"/>
|
||||
```
|
||||
|
||||
### More Information
|
||||
|
||||
- See the freeCodeCamp page on the `<img>` tag [here](https://guide.freecodecamp.org/html/elements/img-tag)
|
||||
- To get more details on images in HTML, check out the [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img)
|
||||
15
mock-guide/english/html/tutorials/index.md
Normal file
15
mock-guide/english/html/tutorials/index.md
Normal file
@@ -0,0 +1,15 @@
|
||||
---
|
||||
title: Tutorials
|
||||
---
|
||||
## Tutorials
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/html/tutorials/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
|
||||
#### More Information:
|
||||
<!-- Please add any articles you think might be helpful to read before writing the article -->
|
||||
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
title: Redirect from an HTML Page
|
||||
---
|
||||
## Redirect from an HTML Page
|
||||
|
||||
|
||||
If you've changed the URL of your HTML page and want to automatically redirect your visitors to the new location of the page, you can use a meta tag within the `<head>` area of your old HTML page.
|
||||
|
||||
``` html
|
||||
<head>
|
||||
<meta http-equiv="refresh" content="0; url=http://freecodecamp.org/" />
|
||||
</head>
|
||||
```
|
||||
In the above example, visitors to the page would be redirected from your old html page to [http://freecodecamp.org/](http://freecodecamp.org/). The attribute of `content="0` means that the browser will redirect to the new page after 0 seconds. Changing the value to `content="2` would redirect after 2 seconds.
|
||||
|
||||
#### More Information:
|
||||
* [MDN - Redirections in HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections)
|
||||
@@ -0,0 +1,66 @@
|
||||
---
|
||||
title: Text Formatting in HTML
|
||||
---
|
||||
|
||||
## Text Formatting in HTML
|
||||
HTML provides you a lot of useful elements for text formatting. It allows to make your text: bold, italic, mark and much more. Changing the style of your text isn't without any reason - the main thing is just make the reader to take a look for some important notes.
|
||||
|
||||
### Bold and Strong
|
||||
You can easily change your text meaning by using HTML `<b>` element. It makes words bold, which function is singling out the fragment of sequence. For example:
|
||||
|
||||
```
|
||||
The most important part of your code is <b>the end</b>, because if you <b>don't close</b> the element, it will affect to <b>everything</b>!
|
||||
```
|
||||
|
||||
You can also use `<strong>` as well - it adds also semantic "strong" importance. Your browser doesn't recognize a difference between those two elements, but it exists.
|
||||
|
||||
### Italic and Emphasized
|
||||
Usually used when quote something or putting a translate of word in a lot of articles. It makes them italic - just imagine a little kicked in the right letters. For example:
|
||||
|
||||
```
|
||||
Theatre - <i>teatos</i>, <i>teates</i> and <i>teatron</i>.
|
||||
```
|
||||
|
||||
You can also use `<em>` as well - it adds also semantic "emphasized" importance. Your browser doesn't recognize a difference between those two elements, but it exists.
|
||||
|
||||
### Small
|
||||
It makes your text smaller than normal size of used font. This element's meaning was changed in HTML5 - it represents side-comments and small print.
|
||||
|
||||
```
|
||||
Normal, <small>small</small>, normal, <small>small</small>!
|
||||
```
|
||||
|
||||
### Marked
|
||||
Element `<mark>` makes your text marked - in different words, it makes your text highlighted. You can use it to tell readers that is one of important things in your article. For example:
|
||||
|
||||
```
|
||||
HTML is full of things and <mark>it's our journey</mark> to get known them better!
|
||||
```
|
||||
|
||||
### Deleted
|
||||
The element `<del>` makes your text striked in the center. It's useful to show changes in your documents.
|
||||
|
||||
```
|
||||
WWI started in <del>1913</del> 1914 year.
|
||||
```
|
||||
|
||||
### Inserted
|
||||
Tag `<ins>` makes your text inserted to the article. Using other words that makes it much easier to understand - added. It shows a line under inserted text.
|
||||
|
||||
```
|
||||
HTML isn't boring. <ins>You can make a lot of combinations of elements!</ins>
|
||||
```
|
||||
|
||||
### Subscripted
|
||||
Using element `<sub>` gives you a useful formatting as subscripted text (showing it smaller on the bottom). There is an example code:
|
||||
|
||||
```
|
||||
This was in 2003 year <sub>(needs a link)</sub>.
|
||||
```
|
||||
|
||||
### Superscripted
|
||||
If you want to make an opposite to subscripted text, you can easily use `<sup>` element. It shows a smaller text on the top.
|
||||
|
||||
```
|
||||
10<sup>x+y</sup> = 1000
|
||||
```
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Use Tab Space Instead of Multiple Non Breaking Spaces Nbsp
|
||||
---
|
||||
## Use Tab Space Instead of Multiple Non Breaking Spaces Nbsp
|
||||
|
||||
In HTML the most common way to add multiple spaces is by adding ` ` for each space. To add a tab space put your text in `<pre>` tags, for example `<pre>My Text Here</pre>` and every tab will be treated as eight spaces. Another way to add multiple spaces in HTML would be to use CSS for example `<p style="padding-right: 5px;">My Text Here</p>`.
|
||||
|
||||
#### More Information:
|
||||
* [MDN - The Preformatted Text element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre)
|
||||
Reference in New Issue
Block a user