fix(guide): simplify directory structure

This commit is contained in:
Mrugesh Mohapatra
2018-10-16 21:26:13 +05:30
parent f989c28c52
commit da0df12ab7
35752 changed files with 0 additions and 317652 deletions

View File

@@ -0,0 +1,69 @@
---
title: A Href Attribute
---
## A Href Attribute
The `<a href>` attribute refers to a destination provided by a link. The `a` (anchor) tag is dead without the `<href>` attribute. Sometimes in your workflow, you don't want a live link or you won't know the link destination yet. In this case, it's useful to set the `href` attribute to `"#"` to create a dead link. The `href` attribute can be used to link to local files or files on the internet.
For instance:
```html
<html>
<head>
<title>Href Attribute Example</title>
</head>
<body>
<h1>Href Attribute Example</h1>
<p>
<a href="https://www.freecodecamp.org/contribute/">The freeCodeCamp Contribution Page</a> shows you how and where you can contribute to freeCodeCamp's community and growth.
</p>
</h1>
</body>
</html>
```
The `<a href>` attribute is supported by all browsers.
#### More attributes:
`hreflang` : Specifies the language of the linked resource.
`target` : Specifies the context in which the linked resource will open.
`title` : Defines the title of a link, which appears to the user as a tooltip.
### Examples
```html
<a href="#">This is a dead link</a>
<a href="https://www.freecodecamp.org">This is a live link to freeCodeCamp</a>
<a href="https://html.com/attributes/a-href/">more with a href attribute</a>
```
### In-page anchors
It's also possible to set an anchor to certain place of the page. To do this you should first place a tab at location on the page with tag <a> and necessary attribute "name" with any keyword description in it, like this:
```html
<a name="top"></a>
```
Any description between tags is not required. After that you can place a link leading to this anchor at any place on the same page. To do this you should use tag <a> with necessary attribute "href" with symbol # (sharp) and key-word description of the anchor, like this:
```html
<a href="#top">Go to Top</a>
```
### Image Links
The `<a href="#">` may also be applied to images and other HTML elements.
### Example
```html
<a href="#"><img itemprop="image" style="height: 90px;" src="http://www.chatbot.chat/assets/images/header-bg_y.jpg" alt="picture"> </a>
```
### Example
<a href="#"><img itemprop="image" style="height: 90px;" src="http://www.chatbot.chat/assets/images/header-bg_y.jpg" alt="picture"> </a>
### Some more examples of href
```html
<base href="https://www.freecodecamp.org/a-href/">This gives a base url for all further urls on the page</a>
<link href="style.css">This is a live link to an external stylesheet</a>
```

View File

@@ -0,0 +1,51 @@
---
title: A Target Attribute
---
## A Target Attribute
The `<a target>` attribute specifies where to open the linked document in an `a` (anchor) tag.
<br>
#### Examples:
A target attribute with the value of “_blank” opens the linked document in a new window or tab.
```html
<a href="https://www.freecodecamp.org" target="_blank">freeCodeCamp</a>
```
A target attribute with the value of “_self” opens the linked document in the same frame as it was clicked (this is the default and usually does not need to be specified).
```html
<a href="https://www.freecodecamp.org" target="_self">freeCodeCamp</a>
```
```html
<a href="https://www.freecodecamp.org">freeCodeCamp</a>
```
A target attribute with the value of “_parent” opens the linked document in the parent frame.
```html
<a href="https://www.freecodecamp.org" target="_parent">freeCodeCamp</a>
```
A target attribute with the value of “_top” opens the linked document in the full body of the window.
```html
<a href="https://www.freecodecamp.org" target="_top">freeCodeCamp</a>
```
A target attribute with the value of _"framename"_ Opens the linked document in a specified named frame.
```html
<a href="https://www.freecodecamp.org" target="framename">freeCodeCamp</a>
```
#### More Information:
Target Attribute: <a href="https://www.w3schools.com/tags/att_a_target.asp" target="_blank">w3schools</a>

View File

@@ -0,0 +1,38 @@
---
title: Autofocus Attribute
---
## Autofocus Attribute | HTML5
The **autofocus** attribute is a boolean attribute.
When present, it specifies that the element should automatically get input focus when the page loads.
Only one form element in a document can have the **autofocus** attribute. It cannot be applied to `<input type="hidden">`.
### Applies to
| Element | Attribute |
| :-- | :-- |
| `<button>` | autofocus |
| `<input>` | autofocus |
| `<select>` | autofocus |
| `<textarea>` | autofocus |
### Example
```html
<form>
<input type="text" name="fname" autofocus>
<input type="text" name="lname">
</form>
```
### Compatibility
This is an HTML5 attribute.
#### More Information:
[HTML autofocus Attribute](https://www.w3schools.com/tags/att_autofocus.asp) on w3schools.com
[&lt;input&gt; autofocus attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) on MDN web docs

View File

@@ -0,0 +1,37 @@
---
title: Body Background Attribute
---
## Body Background Attribute
If you want to add a background image instead of a color, one solution is the `<body background>` attribute. It specifies a background image for an HTML document.
Syntax:
`<body background="URL">`
Attribute:
`background - URL for background image`
Example:
```html
<html>
<body background="https://assets.digitalocean.com/blog/static/hacktoberfest-is-back/hero.png">
</body>
</html>
```
## body-background attribute is depreciated
the body-background attribute been deprecated in HTML5. The correct way to style the ```<body>``` tag is with CSS.
There are several CSS properties used for setting the background of an element. These can be used on <body> to set the background of an entire page.
## Check it Out:
* [CSS background proprety](https://github.com/freeCodeCamp/guides/blob/master/src/pages/css/background/index.md)

View File

@@ -0,0 +1,42 @@
---
title: Body Bgcolor Attribute
---
## Body Bgcolor Attribute
The `<body bgcolor>` attribute assigns a background color for an HTML document.
**Syntax**:
`<body bgcolor="color">`
The color value can be either a color name (like, `purple`) or a hex value (like, `#af0000`).
To add a background color to a webpage you can use the `<body bgcolor="######">` attribute. It specifies a color for the HTML document to display.
**For example:**
```html
<html>
<head>
<title>Body bgcolor Attribute example</title>
</head>
<body bgcolor="#afafaf">
<h1>This webpage has colored background.</h1>
</body>
</html>
```
You can change the color by replacing ###### with a hexadecimal value. For simple colors you can also use the word, such as "red" or "black".
All major browsers support the `<body bgcolor>` attribute.
*Note:*
* HTML 5 does not support the `<body bgcolor>` attribute. Use CSS for this purpose. How? By using the following code:
`<body style="background-color: color">`
Of course, you can also do it in a separate document instead of an inline method.
* Do not use RGB value in `<body bgcolor>` attribute because `rgb()` is for CSS only, that is, it will not work in HTML.
**See it in action:**
https://repl.it/Mwht/2
**Other resources:**
* HTML color names: https://www.w3schools.com/colors/colors_names.asp
* CSS background-color property: https://www.w3schools.com/cssref/pr_background-color.asp

View File

@@ -0,0 +1,43 @@
---
title: Div Align Attribute
---
## Div Align Attribute
The `<div align="">` attribute is used for aligning the text in a div tag to The Left, Right, center or justify.
For instance:
```html
<html>
<head>
<title> Div Align Attribbute </title>
</head>
<body>
<div align="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div align="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div align="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div align="justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>
```
## Important!
This attribute is no longer supported in html5. css is the way to go.
The Div Align attribute can be used to horizontally align the contents within a div. In the below example, the text will be centered within the div.
```html
<div align="center">
This Text Will Be Centered
</div>
```
**This attribute is not supported in HTML5 and [CSS Text Align](https://github.com/freeCodeCamp/guides/blob/f50b7370be514b2a03ee707cd0f0febe2bb713ae/src/pages/css/text-align/index.md) should be used instead

View File

@@ -0,0 +1,43 @@
---
title: Font Color Attribute
---
## Font Color Attribute
This attribute is used to set a color to the text enclosed in a ```<font>``` tag.
### Syntax:
```html
<font color= "color">
```
### Important:
This attribute is not supported in HTML5. Instead, this [freeCodeCamp article](https://guide.freecodecamp.org/css/colors) specifies a CSS method, which can be used.
### Note:
A color can also be specified using a 'hex code' or an 'rgb code', instead of using a name.
### Example:
1. Color name attribute
```html
<html>
<body>
<font color="green">Font color example using color attribute</font>
</body>
</html>
```
2. Hex code attribute
```html
<html>
<body>
<font color="#00FF00">Font color example using color attribute</font>
</body>
</html>
```
3. RGB attribute
```html
<html>
<body>
<font color="rgb(0,255,0)">Font color example using color attribute</font>
</body>
</html>
```

View File

@@ -0,0 +1,22 @@
---
title: Font Size Attribute
---
## Font Size Attribute
This attribute specifies the font size as either a numeric or relative value. Numeric values range from `1` to `7` with `1` being the smallest and `3` the default. It can also be defined using a relative value, like `+2` or `-3`, which set it relative to the value of the size attribute of the `<basefont>` element, or relative to `3`, the default value, if none does exist.
Syntax:
`<font size="number">
`
Example:
```html
<html>
<body>
<font size="6">This is some text!</font>
</body>
</html>
```
Note : `The size attribute of <font> is not supported in HTML5. Use CSS instead.`

View File

@@ -0,0 +1,21 @@
---
title: Href Attribute
---
## Href Attribute
Href is short for "Hypertext Reference" and is an HTML attribute. The href attribute is mainly used for `<a>` tags to specify the URL for a webpage the link leads to (whether it be on a different section of the same page, or on a completely different webpage).
#### How to use
`<a href="URL"></a>`
#### Examples
```html
<a href="https://www.freecodecamp.org">This is an absolute URL</a>
<a href="index.html">This is a relative URL</a>
```
#### More Information:
[W3Schools](https://www.w3schools.com/tags/att_href.asp)
[HTMLElementReference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)

View File

@@ -0,0 +1,51 @@
---
title: Href
---
## Href
Hypertext Reference (HREF) is an HTML attribute that you use to specify a link destination or Uniform Resource Locator (URL). Most commonly you will see the HREF attribute paired with an anchor tag `<a>`.
The HREF attribute gets the exact meaning of a link depending on the element that is using it. For instance when using with the `<a>` tag, it is referencing the location of an object express as a URL. When using the HREF attribute with the `<image>` tag, the HREF attribute is referencing the URL of the image to render.
### Examples:
Link to Google's Homepage:
-> The text "Visit Google's Homepage acts like the link to the Homepage
```html
<a href="https://www.google.com">Visit Googles Homepage</a>
```
Image as an Link:
-> Google Logo that refers to Google's Homepage
```html
<a href="https://www.google.com">
<img border="0" alt="Google" src="https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif" width="100" height="100">
```
Tags that use HREF:
```html
<a>
<area>
<base>
<cursor>
<discard>
<feImage>
<hatch>
<image>
<link>
<mesh>
<meshgradient>
<mpath>
<pattern>
<script>
<textPath>
<use>
```
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
<a href='https://tomayko.com/blog/2008/wtf-is-an-href-anyway' target='_blank' rel='nofollow'>WTF is a href anyway</a>
<a href='https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/href' target='_blank' rel='nofollow'>MDN</a>

View File

@@ -0,0 +1,36 @@
---
title: Img Align Attribute
---
## Img Align Attribute
The align attribute of an image specifies where the image should be aligned according to the surrounding element.
Attribute Values:
right - Align image to the right
left - Align image to the left
top - Align image to the top
bottom - Align image to the bottom
middle - Align image to the middle
For example:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Img Align Attribute</title>
</head>
<body>
<p>This is an example. <img src="image.png" alt="Image" align="middle"> More text right here
<img src="image.png" alt="Image" width="100"/>
</body>
</html>
```
We can also align in right if we want:
```html
<p>This is another example<img src="image.png" alt="Image" align="right"></p>
```
**Please note the align attribute is not supported in HTML5, and you should use CSS instead. However, it is still supported by all the major browsers.**
#### More Information:
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img" target="_blank">MDN article on the img tag and its attributes<a>

View File

@@ -0,0 +1,40 @@
---
title: Img Src Attribute
---
## Img Src Attribute
The `<img src>` attribute refers to the source of the image you want to display. The `img` tag will not display an image without the `src` attribute. However, if you set the source to the location of the image, you can display any image.
There is an image of the freeCodeCamp Logo located at `https://avatars0.githubusercontent.com/u/9892522?v=4&s=400`
You can set that as the image using the `src` attribute.
```html
<html>
<head>
<title>Img Src Attribute Example</title>
</head>
<body>
<img src="https://avatars0.githubusercontent.com/u/9892522?v=4&s=400">
</body>
</html>
```
The above code displays like this:
![The freeCodeCamp Avatar](https://avatars0.githubusercontent.com/u/9892522?v=4&s=400?raw=true)
The `src` attribute is supported by all browsers.
You can also have a locally hosted file as your image.
For example, `<img src="images/freeCodeCamp.jpeg>` would work if you had a folder called `images` which had the `freeCodeCamp.jpeg` inside, as long as the 'images' folder was in the same location as the `index.html` file.
`../files/index.html`
`..files/images/freeCodeCamp.jpeg`
### More Information:
- [HTML.com](https://html.com/attributes/img-src/)
- [W3 Schools](https://www.w3schools.com/tags/att_img_src.asp)

View File

@@ -0,0 +1,24 @@
---
title: Img Width Attribute
---
## Img Width Attribute
The HTML 'width' attribute refers to the width of an image. The value in the quotations is the amount of pixels.
For example, if you already have a link to an image set up via the `src` attribute you can add the width attribute like so:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Img Width Attribute</title>
</head>
<body>
<img src="image.png" alt="Image" width="100"/>
</body>
</html>
```
In the code snippet above there is an image tag and the image is set to a width of 100 pixels. `width="100"`
#### More Information:
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img" target="_blank">MDN article on the img tag<a>

View File

@@ -0,0 +1,43 @@
---
title: Attributes
---
# HTML Attributes
HTML elements can have attributes, which contain additional information about the element.
HTML attributes generally come in name-value pairs, and always go in the opening tag of an element. The attribute name says what type of information you're providing about the element, and the attribute value is the actual information.
For example, an anchor (`<a>`) element in an HTML document creates links to other pages, or other parts of the page. You use the `href` attribute in the opening `<a>` tag to tell the browser where the link sends a user.
Here's an example of a link that sends users to freeCodeCamp's home page:
```html
<a href="www.freecodecamp.org">Click here to go to freeCodeCamp!</a>
```
Notice that the attribute name (`href`) and value ("www.freeCodeCamp.org") are separated with an equals sign, and quotes surround the value.
There are many different HTML attributes, but most of them only work on certain HTML elements. For example, the `href` attribute won't work if it's placed in an opening `<h1>` tag.
In the example above, the value supplied to the `href` attribute could be any valid link. However, some attributes only have a set of valid options you can use, or values need to be in a specific format. The `lang` attribute tells the browser the default language of the contents in an HTML element. The values for the `lang` attribute should use standard language or country codes, such as `en` for English, or `it` for Italian.
## Boolean Attributes
Some HTML attributes don't need a value because they only have one option. These are called Boolean attributes. The presence of the attribute in a tag will apply it to that HTML element. However, it's okay to write out the attribute name and set it equal to the one option of the value. In this case, the value is usually the same as the attribute name.
For example, the `<input>` element in a form can have a `required` attribute. This requires users to fill out that item before they can submit the form.
Here are examples that do the same thing:
```html
<input type="text" required >
<input type="text" required="required" >
```
## Other Resources
[HTML links](#)
[Href Attribute](#)
[Lang Attribute](#)
[HTML Input Element](#)
[Required Attribute](#)

View File

@@ -0,0 +1,23 @@
---
title: Input Checked Attribute
---
## Input Checked Attribute
The checked attribute is a boolean attribute.
When present, it specifies that an <input> element should be pre-selected (checked) when the page loads.
The checked attribute can be used with <input type="checkbox"> and <input type="radio">.
The checked attribute can also be set after the page load, through JavaScript.
## Take a look at the following example:
```html
<form action="/action_page.php">
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
<input type="submit" value="Submit">
</form>
```
In the example above when the web page is loaded by default the first checkbox will come automatically selected due to the checked attribute.

View File

@@ -0,0 +1,86 @@
---
title: Input Type Attribute
---
## Input Type Attribute
The input type attribute specifies the type of the input the user should put in your form.
### text
One line of a text.
```html
<form>
<label for="login">Login:</label>
<input type="text" name="login">
</form>
```
### password
One line of a text. Text is automatically displayed as a series of dots or asterisks (depends on the browser and OS).
```html
<form>
<label for="password">Password:</label>
<input type="password" name="password">
</form>
```
### email
The HTML checks if the input matches the e-mail address format (something@something).
```html
<form>
<label for="email">E-mail address:</label>
<input type="email" name="email">
</form>
```
### number
Allow only numeric input. You can also specify the min and max value allowed. The example below check that the input is number between 1 and 120.
```html
<form>
<label for="age">Age:</label>
<input type="number" name="age" min="1" max="120">
</form>
```
### radio
Only one option can be selected by the user. The group of radio buttons need to have the same name attribute. You can select automatically one option by using `checked` property (in example below the value Blue is selected).
```html
<form>
<label><input type="radio" name="color" value="red">Red</label>
<label><input type="radio" name="color" value="green">Green</label>
<label><input type="radio" name="color" value="blue" checked>Blue</label>
</form>
```
### checkbox
User can select zero or more options from the group of checkboxes. You can use `checked` property here too for one or more options.
```html
<form>
<label><input type="checkbox" name="lang" value="english">english</label>
<label><input type="checkbox" name="lang" value="spanish">spanish</label>
<label><input type="checkbox" name="lang" value="french">french</label>
</form>
```
### button
The input is displayed as button, the text which should be displayed in the button is in value attribute.
```html
<form>
<input type="button" value="click here">
</form>
```
### submit
Displays the submit button. The text which should be displayed in the button is in value attribute. After clicking on the button, the HTML do the validation and if it passes, the form is submitted.
```html
<form>
<input type="submit" value="SUBMIT">
</form>
```
### reset
Displays the reset button. The text which should be displayed in the button is in value attribute. After clicking on the button, all values from the form are deleted.
```html
<form>
<input type="reset" value="CANCEL">
</form>
```
There are more types elements. For more information visit [MSDN]("https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input") or [w3schools]("https://www.w3schools.com/Html/html_form_input_types.asp").

View File

@@ -0,0 +1,42 @@
---
title: Input
---
## Input
The HTML `<input>` tag is used within a form to declare an input element.
It allows the user to enter data.
## Example
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML input Tag</title>
</head>
<body>
<form action = "/cgi-bin/hello_get.cgi" method = "get">
First name:
<input type = "text" name = "first_name" value = "" maxlength = "100" />
<br />
Last name:
<input type = "text" name = "last_name" value = "" maxlength = "100" />
<input type = "submit" value = "Submit" />
</form>
</body>
</html>
```
In the above example, there are two input fields which ask the user to enter their first and last names according to the labels specified. The submit `<button type="submit">` is another type of input which is used to take the data entered by the user into the form and send it to some other location specified in the code.
#### More Information:
<a href="https://www.youtube.com/watch?v=qJ9ZkxmVf5s">Youtube</a>
## Input
The HTML `<input>` tag is of many types to enter data. Some of them are:
Type:Text(This is the most common type which is used to create general textboxes)
Type:Password(This type is used for creation of password feilds)
Type:Hidden(This is a special type of Input that is not shown to the user but it is used for passing information from one page to another while using <a href> tag)

View File

@@ -0,0 +1,25 @@
---
title: Lang
---
## Lang
In HTML, Lang tag is used to declare the language of the whole or a part of a web page.
### Examples
```html
<html lang="en">
</html>
```
The lang attribute can also be used to specify the language of a specific element:
```html
<p lang="hi">
फ्री कोड कैंप
</p>
```
In the above example, "hi" denotes the Hindi language. Similarly, you can use "en" for English, "es" for Spanish, "fr" for French and so on.
Refer to [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) for the appropriate two-digit Language code.

View File

@@ -0,0 +1,48 @@
---
title: Links
---
## Links
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/html/attributes/links/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 -->
Links are used everywhere on the web, with the purpose if directing users to various content items. They're usually indicated by your cursor turning into a hand icon. Links can be text, images or other elements contained within your HTML or webpage.
You use an ```code <a>``` tag or anchor element to define your link, which also also needs a destination address that you'll access with the ```code href``` attribute. Here's a snippet that makes the phrase 'the freeCodeCamp Guide' a link:
```html
<a href="https://guide.freecodecamp.org">the freeCodeCamp Guide</a>
```
If you'd like your link to open in a new tab, you'll use the ```code target``` attribute along with the ```code "_blank"``` value inside your opening ```code <a>``` tag. That looks like this:
```html
<a href="https://guide.freecodecamp.org" target="_blank">the freeCodeCamp Guide</a>
```
When you need to guide users to a specific part of your webpage, let's assume the very bottom, you first need to assign the hash ```code #``` symbol to the ```code href``` attribute, like this
```html
<a href="#footer>More about us<a/>
```
you'll then need to use an ```code id``` attribute in the element you want to direct your user to - in this case the ```code <footer>``` at the bottom of the webpage.
```html
<footer id="footer">Powered by freeCodeCamp</footer>
```
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
<a href="https://www.w3schools.com/html/html_links.asp" target="_blank">w3sschools - HTML Links</a>

View File

@@ -0,0 +1,39 @@
---
title: Onclick Event Attribute
---
## Onclick Event Attribute
When the element is clicked fires a event.
It works just like the *onclick method* or `addEventListener('click')` to the element.
```html
<element onclick="event"></element>
```
> `event` can be a JavaScript function or you can write raw JavaScript
### Examples
Changing the color of a ```<p>``` element when clicked
```html
<p id="text" onclick="redify()">Change my color</p>
<script>
function redify(){
let text = document.querySelector('#text');
text.style.color = "red";
}
</script>
```
Using raw JavaScript onclick attribute:
```html
<button onclick="alert('Hello')">Hello World</button>
```
#### More Information:
- [MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/GlobalEventHandlers/onclick)

View File

@@ -0,0 +1,36 @@
---
title: P Align Attribute
---
## P Align Attribute
### Important
This attribute is not supported in HTML5. It is recommended to use the [`text-align` CSS property](https://guide.freecodecamp.org/css/text-align).
To align the text inside a `<p>` tag, this attribute will help.
### Syntax
```html
<p align="position">Lorem Ipsum...</p>
```
### Attributes
- **left** - Text aligns to the left
- **right** - Text aligns to the right
- **center** - Text aligns to the center
- **justify** - All lines of text have equal width
### Example
```html
<html>
<body>
<p align="center">Paragraph align attribute example</p>
</body>
</html>
```
#### More Information:
* [CSS `text-align`](https://guide.freecodecamp.org/css/text-align)
* [W3 - HTML 4.01 Specification](https://www.w3.org/TR/html401/struct/text.html#h-9.3.1)
* [MDN - CSS Text Align](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)

View File

@@ -0,0 +1,35 @@
---
title: Placeholder Attribute
---
## Placeholder Attribute | HTML5
Specifies a short hint that describes the expected value of an `<input>` or `<textarea>` form control.
The placeholder attribute must not contain carriage returns or line-feeds.
NOTE: Do not use the placeholder attribute instead of a &lt;label&gt; element, their purposes are different. The &lt;label&gt; attribute describes the role of the form element (i.e. it indicates what kind of information is expected), and the placeholder attribute is a hint about the format that the content should take.
### Example
Input Example
```html
<form>
<input type="text" name="fname" placeholder="First Name">
<input type="text" name="lname" placeholder="Last Name">
</form>
```
Textarea Example
```html
<textarea placeholder="Describe yourself here..."></textarea>
```
### Compatibility
This is an HTML5 Attribute.
#### More Information:
[HTML placeholder Attribute](https://www.w3schools.com/tags/att_placeholder.asp) on w3schools.com

View File

@@ -0,0 +1,51 @@
---
title: Required
---
## Required
The HTML required attribute is used in an input element to make the input field in a form required to submit the form.
If the user does not fill in the input field the form will not submit and it will give a message asking the user to fill out the field.
The `required` attribute is applicable to `<input>`, `<select>`, `<textarea>`.
For example:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML Required Attribute</title>
</head>
<body>
<form action="/">
Text Field: <input type="text" name="textfield" required>
<input type="submit" value="Submit">
</form>
</body>
</html>
```
Select Example:
```html
<form action="/action.php">
<select required>
<option value="">None</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</form>
```
Text Area Example:
```html
<form action="/action.php">
<textarea name="comment" required></textarea>
<input type="submit">
</form>
```
Simply add `required` to an input element
#### More Information:
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input" target="_blank">MDN article on the input element</a>

View File

@@ -0,0 +1,20 @@
---
title: Role Attribute
---
## Role Attribute
The `role` attribute, describes the role of an element to programs that can make use of it, such as screen readers or magnifiers.
Usage Example:
```html
<a href="#" role="button">Button Link</a>
```
Screen Readers will read this element as "button" instead of "link".
There are four categories of roles:
- Abstract Roles
- Widget Roles
- Document Structure Roles
- Landmark Roles
For full list of existing roles, refer to [aria roles documentation](https://www.w3.org/TR/wai-aria/roles).

View File

@@ -0,0 +1,42 @@
---
title: Script Src Attribute
---
## Script Src Attribute
The 'src' attribute in a <script></script> tag is the path to an external file or resource that you want to link to your HTML document.
For example, if you had your own custom JavaScript file named 'script.js' and wanted to add its functionality to your HTML page, you would add it like this:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Script Src Attribute Example</title>
</head>
<body>
<script src="./script.js"></script>
</body>
</html>
```
This would point to a file named 'script.js' that is in the same directory as the .html file. You can also link to other directories by using '..' in the file path.
```html
<script src="../public/js/script.js"></script>
```
This jumps up one directory level then into a 'public' directory then to a 'js' directory and then to the 'script.js' file.
You can also use the 'src' attribute to link to external .js files hosted by a third party. This is used if you don't want to download a local copy of the file. Just note that if the link changes or network access is down, then the external file you are linking to won't work.
This example links to a jQuery file.
```html
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
```
#### More Information:
<a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-src' target='_blank' rel='nofollow'>MDN Article on the HTML <script> tag</a>

View File

@@ -0,0 +1,10 @@
---
title: Table Border Attribute
---
## Table Border Attribute
The `<table>` tag border attribute is a way to order a border to a HTML Table. The supported values are `0` (no border) and `1` (border). The border attribute is not supported in HTML 5 the latest version of HTML. It's recommended to use CSS to add a border to a table in HTML 5.
#### More Information:
* [MDN - HTML Attribute Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes)
* [MDN - CSS Border](https://developer.mozilla.org/en-US/docs/Web/CSS/border)

View File

@@ -0,0 +1,37 @@
---
title: Block and Inline Elements
---
## Block and Inline Elements
Let us understand them using below examples :
#### Code Sample with Output :
![Block Output](https://user-images.githubusercontent.com/16048167/31070017-6f2cf0a2-a77c-11e7-9de6-110b9d0b488d.PNG)
#### Block-Level Element :
A Block-level element occupies the entire space of the parent(container) such as `<div>` and `<p>` in the example .
Note that both `<div>` and `<p>` start from a new line each time, forming a **block-like** structure. Block-level elements begin on new lines.
Common **block-level elements** are `<div>`,`<p>`,`<article>`,`<section>`,`<figure>`,`<footer>` etc.
#### Inline Element :
Inline as the name says "included as a part of the main text and not as a separate section". Inline elements occupy the space as needed within the space defined by the main element. Unlike block-level elements, they do not begin on new lines.
Some of the **inline elements** are `<a>`,`<span>`,`<img>`,`<code>`,`<cite>`,`<button>`,`<input>` etc.
#### Code Sample with Output :
![Inline Output](https://user-images.githubusercontent.com/16048167/31069389-e1e3fc10-a779-11e7-86d2-6685e0061f52.png)
***Note*** : Block-level elements may contain other block-level elements or inline elements. Inline elements **cannot** contain block-level elements.
#### Changes In HTML5
While an understanding of block and inline elements is still relevant, you should be aware that these terms were defined in prior versions of the HTML specification. In HTML5, a more complex set of "content categories" replaces block-level and inline elements. Block-level elements are largely placed in the "flow content" category in HTML5, while inline elements correspond to the "phrasing content" catagory. For more information on the new content categories in HTML5, including flow content and phrasing content, refer to the <a href = "https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories">Content categories page on the Mozilla Developer Network.</a>
#### More Information:
Please refer <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Block-level_vs._inline' target='_blank' rel='nofollow'>Mozilla Docs</a>

View File

@@ -0,0 +1,59 @@
---
title: Comments in HTML
---
## Comments in HTML
The comment tag is an element used to leave notes, mostly related to the project or the website. This tag is frequently used to explain something in the code or leave some recommendations about the project. The comment tag also makes it easier for the developer to come back and understand the code he's written at a later stage. Comments can also used for commenting out lines of code for debugging purposes.
It is good practice to add comments to your code, especially when working with a team or at a company.
Comments are started with `<!--` and ended with `-->`, and can span multiple lines. They can contain code or text, and won't appear on the front-end of the website when a user visits a page. You can view comments through the Inspector Console, or by viewing Page Source.
### Example
```html
<!-- You can comment out a large number of lines like this.
Author: xyz
Date: xx/xx/xxxx
Purpose: abc
-->
Read more: https://html.com/tags/comment-tag/#ixzz4vtZHu5uR
<!DOCTYPE html>
<html>
<body>
<h1>FreeCodeCamp web</h1>
<!-- Leave some space between the h1 and the p in order to understand what are we talking about-->
<p>FreeCodeCamp is an open-source project that needs your help</p>
<!-- For readability of code use proper indentation -->
</body>
</html>
```
## Conditional Comments
Conditional Comments defines some HTML tags to be excuted when a certain codition is fullfilled.
Conditional Comments are only recognised by Internet Explorer Version 5 through to Version 9 (IE5 - IE9).
### Example
```html
<!DOCTYPE html>
<html>
<body>
<!--[if IE 9]>
<h1>FreeCodeCamp web</h1>
<p>FreeCodeCamp is an open-source project that needs your help</p>
<![endif]-->
</body>
</html>
```
### IE Conditional Comments
These comments are only available in Internet Explorer and can be used up to IE9. In the current times, there is a good change you will never see them, but it is good to know about their existance. Conditional Comments are a way to serve a different experience for different client browsers. For example:
```html
<!--[if lt IE 9]> <p>Your browser is lower then IE9</p> <![endif]-->
<!--[if IE 9]> <p>Your browser is IE9</p> <![endif]-->
<!--[if gt IE 9]> <p>Your browser is greater then IE9</p> <![endif]-->
```
[About conditional comments](https://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx)

View File

@@ -0,0 +1,71 @@
---
title: CSS Classes
---
## CSS Classes
Classes are an efficient way of grouping HTML elements so that they can share the same styles. CSS (Cascading Style Sheets) classes can be used to arrange and decorate web page elements.
When writing HTML, you can add classes to an element. Just add the attribute `class="myclass"` to the element. Multiple elements can have the same class, and one element can have multiple classes. You can assign multiple classes to an element by adding all the desired class names separated by a space to the `class` attribute in HTML.
```html
<h1 class="super-man other-class third-class">"Here I come to save the day!"</h1>
<p>is a popular catchphrase that <span class="super-man">Super Man</span> often said.</p>
```
You can then style these elements with CSS. Classes are referenced with period (.) before them in CSS, but you should not put periods in your HTML.
```css
.super-man {
color: red;
background-color: blue;
}
```
This code will give s blue background and red text color to all the elements which have the `super-man` class.
[View this example on CodePen](https://codepen.io/Tlandis/pen/RLvomV).
You can also declare more than one class to your element, like:
```html
<div class="ironMan alfred">
We're going to save you.
</div>
```
Then in your css file:
```css
.ironMan{
color:red;
}
.alfred{
background-color: black;
}
```
**Note:** Class names are traditionally all lowercase, with each word in a multi-word class name separated by hyphens (e.g. "super-man").
You can also combine classes in the same line:
```css
.superMan .spiderMan {
color: red;
background-color: blue;
}
```
You can see the result of the above code [here](https://codepen.io/Tlandis/pen/RLvomV'). Learn how to combine css classes using selectors [here](https://www.w3schools.com/css/css_combinators.asp').
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
- [CSS Class Selector, w3 schools](https://www.w3schools.com/cssref/sel_class.asp)
- [HTML Classes, w3 Schools](https://www.w3schools.com/html/html_classes.asp)
- [css-tricks](https://css-tricks.com/how-css-selectors-work/)
- [How to Code in HTML5 and CSS3](http://howtocodeinhtml.com/chapter7.html)
- [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class)

View File

@@ -0,0 +1,67 @@
---
title: Doctype Declaration
---
## Doctype Declaration
The HTML document type declaration, also known as `DOCTYPE`, is the first line of code required in every HTML or XHTML document. The `DOCTYPE` declaration is an instruction to the web browser about what version of HTML the page is written in. This ensures that the web page is parsed the same way by different web browsers.
In HTML 4.01, the `DOCTYPE` declaration refers to a document type definition (DTD). A DTD defines the structure and the legal elements of an XML document. Because HTML 4.01 was based on the Standard Generalised Markup Language (SGML), referring to a DTD in the `DOCTYPE` declaration was necessary.
Additionally, doctypes for HTML 4.01 required the declaration of either `strict`, `transitional`, or `frameset` DTD, each with a different use case as outlined below.
- **Strict DTD**: Used for web pages that *exclude* attributes and elements that W3C expects to phase out as CSS support grows
- **Transitional DTD**: Used for web pages that *include* attributes and elements that W3C expects to phase out as CSS support grows
- **Frameset DTD**: Used for web pages with frames
In contrast, the declaration of HTML5 `DOCTYPE` is much simpler: it no longer requires a reference to DTDs as it is no longer based on SGML. See the examples below for a comparison between HTML 4.01 and HTML5 `DOCTYPE`s.
### Examples
Doctype syntax for HTML5 and beyond:
```html
<!DOCTYPE html>
```
Doctype syntax for strict HTML 4.01:
```html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```
Doctype syntax for transitional HTML 4.01:
```html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
```
Doctype syntax for frameset HTML 4.01:
```html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
```
## History
During the formative years of HTML, web standards were not agreed upon yet. Browser vendors would build new features in whatever way they wanted. There was little concern for competing browsers. The result was that web developers had to choose a browser to develop their sites for. This meant that sites would not render well in unsupported browsers. This situation could not continue.
The W3C (World Wide Web Consortium) wrote a set of web standards to handle this situation. All browser vendors and web developers should adhere to these standards. This would ensure that websites would render well across browsers. The changes required by the standards were quite different from some existing practices. Adhering to them would break existing non standards compliant websites.
To handle this problem, vendors began programming rendering modes in to their browsers. Web developers would need to add a doctype declaration to the top of an HTML document. The doctype declaration would tell the browser which rendering mode to use for that document. Three separate rendering modes were generally available across browsers. **Full standards mode** renders pages according to the W3C web standards. **Quirks mode** renders pages in a non standards compliant way. **Almost standards mode** is close to full standards mode, but features support for a small number of quirks.
In the modern age of HTML5, web standards are fully implemented in all major browsers. Web sites are generally developed in a standards compliant way. Because of this the HTML5 doctype declaration only exists to tell the browser to render the document in full standards mode.
## Usage
The Doctype Declaration must be the very first line of code in an HTML document, aside from comments, which can go before it if needed. For modern HTML5 documents the doctype declaration should be as follows:
`<!DOCTYPE html>`
#### More Information:
While no longer in general use, there are several other doctype declaration types from previous versions of HTML. There are also specific versions for XML documents. To read more about these, and to see code examples for each, take a look at the [Wikipedia article](https://en.wikipedia.org/wiki/Document_type_declaration).
[A note from the W3](https://www.w3.org/QA/Tips/Doctype)
[MDN Glossary entry](https://developer.mozilla.org/en-US/docs/Glossary/Doctype)
[W3Schools](https://www.w3schools.com/tags/tag_doctype.asp)
[A quick explanation of "Quirks Mode" and "Standards Mode"](https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode)

View File

@@ -0,0 +1,46 @@
---
title: A Tag
---
## A Tag
The `<a>` tag or _anchor_ element creates a hyperlink to another page or file. In order to link to a different page or file the `<a>` tag must also contain a `href` attribute, which indicates the link's destination.
The text between the opening and closing `<a>` tags becomes the link.
By default, a linked page is displayed in the current browser window unless another target is specified.
#### Example:
```html
<a href= "https://guide.freecodecamp.org/">freeCodeCamp</a>
```
An image can also be turned into a link by enclosing the `<img>` tag in an `<a>` tag.
#### Example:
```html
<a href= "https://guide.freecodecamp.org/"><img src="logo.svg"></a>
```
It is also possible to determine the target of the `<a>` tag. This is done using the `target` attribute. The `target` attribute has the following values available `_blank|_self|_parent|_top|framename`.
`_blank`: Opens the link in a new tab or a new window depending on the user's preferences.
`_self`: Opens the link in same frame (default behaviour).
`_parent`: Opens the link in the parent frame, for example when the user clicks a link in an iframe.
`_top`: Opens the link in the full body of the window.
`framename`: Opens the link in the specified frame.
#### Example:
```html
<a href= "https://guide.freecodecamp.org/" target="_blank">freeCodeCamp</a>
```
<a href= "https://guide.freecodecamp.org/" target="_blank">freeCodeCamp</a><br>
This link is created in the same way as the example code block suggests. Click it to see how it works.
#### More Information:
- <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a' target='_blank' rel='nofollow'>The HTML &lt;a&gt; element: MDN</a>
- <a href='https://www.w3schools.com/tags/tag_a.asp' target='_blank' rel='nofollow'>A tag: w3schools</a>
- <a href='http://htmlreference.io/element/a/' target='_blank' rel='nofollow'>A tag: htmlreference.io</a>

View File

@@ -0,0 +1,16 @@
---
title: Abbr Tag
---
## Abbr Tag
The `<abbr>` tag stands for 'abbreviation'. It can take `title` attribute, to explain the abbreviation.
Example usage:
```html
<abbr title="Free Code Camp">FCC</abbr>
```
#### More Information:
- <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr' target='_blank' rel='nofollow'>The HTML &lt;abbr&gt; element: MDN</a>
- <a href='https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations' target='_blank' rel='nofollow'>Advanced Text Formatting: Abbreviations</a>

View File

@@ -0,0 +1,33 @@
---
title: Address Tag
---
## Address Tag
Bootstraps form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.
Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.
Heres a quick example to demonstrate Bootstraps form styles. Keep reading for documentation on required classes, form layout, and more.
#### Usage
```html
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
```

View File

@@ -0,0 +1,15 @@
---
title: Area Tag
---
## Area Tag
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/html/elements/area-tag/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 -->

View File

@@ -0,0 +1,24 @@
---
title: Article Tag
---
## Article Tag
The `<article>` tag represents self-contained content in a document. The article should be independent from the rest of page, intended to be distributable and reusable.
The `<article>` tag was added in HTML5 and is supported by major browsers.
### Example
Here is an example of how to use article tag in webpage:
```html
<article>
<h1>FreeCodeCamp</h1>
<p>
Learn to code with a community of programmers and contribute to open source projects.
</p>
</article>
```
#### More Information:
[MDN](https://developer.mozilla.org/tr/docs/Web/HTML/Element/article)

View File

@@ -0,0 +1,13 @@
---
title: Aside Tag
---
## Aside Tag
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/html/elements/aside-tag/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 -->

View File

@@ -0,0 +1,64 @@
---
title: Audio Tag
---
## Audio Tag
The <***audio***> tag defines an audio element, that can be used to add audio media resource to an HTML document that will be played by native support for audio playback built into the browser rather than a browser plugin.
The audio tag currently supports three file formats OGG, MP3 and WAV which can be added to your html as follows.
##### Adding an OGG
```
<audio controls>
<source src="file.ogg" type="audio/ogg">
</audio>
```
##### Adding an MP3
```
<audio controls>
<source src="file.mp3" type="audio/mpeg">
</audio>
```
##### Adding a WAV
```
<audio controls>
<source src="file.wav" type="audio/wav">
</audio>
```
It may contain one or more audio sources, represented using the src attribute or the source element.
##### Adding Multiple Audio Files
```
<audio controls>
<source src="file-1.wav" type="audio/wav">
<source src="file-2.ogg" type="audio/ogg">
<source src="file-3.mp3" type="audio/mpeg">
</audio>
```
#### Browser Support for different filetypes is as follows
| Browser | Mp3 | Wav | Ogg|
|:-------:|:---:|:---:|:---:|
|Internet Explorer| Yes | No | No |
|Google Chrome| Yes | Yes | Yes |
|Mozilla Firefox | Yes | Yes | Yes |
|Safari| Yes | Yes | No|
|Opera | Yes | Yes | Yes
### Supported Attributes
| Attribute | Value | Description |
|:-------:|:---:|:---:|
|autoplay|autoplay|The audio will start playing as soon as it is ready|
|controls|controls|audio will be displayed (such as a play/pause button etc)|
|loop|loop|audio will start over again, every time it is finished|
|muted|muted|audio output will be muted|
|src|URL|Specifies the URL of the audio file|
#### More Information:
[https://www.w3schools.com/tags/tag_audio.asp](https://www.w3schools.com/tags/tag_audio.asp)
[https://html.com/tags/audio/](https://html.com/tags/audio/)
[https://html.com/tags/audio/#ixzz5Sg4QbtH8](https://html.com/tags/audio/#ixzz5Sg4QbtH8)

View File

@@ -0,0 +1,20 @@
---
title: B Tag
---
## B Tag
The `<b>` tag is used to specify bold text, without conveying any special importance or relevance. When bolding text of special importance or relevance, it is recommended that you use the `<strong>` tag.
### Example:
```html
<b>This text is bold</b>
```
This would appear as:
**This text is bold**
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
1. [w3schools](https://www.w3schools.com/tags/tag_b.asp "<b> Tag: w3schools") <br />
2. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b)

View File

@@ -0,0 +1,13 @@
---
title: Base Tag
---
## Base Tag
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/html/elements/base-tag/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 -->

View File

@@ -0,0 +1,24 @@
---
title: Blockquote Tag
---
## Blockquote Tag
### Purpose
The HTML `<blockquote>` element breaks out a quote from the surrounding content. This allows the reader to clearly see the quotation as material attributed to it's original author.
### Usage
Just like the "H" tags send signals to a reader that the informaiton is important, the blockquote alerts a reader that the information they're reading is from an outside source. The `<blockquote>` tag can include A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the `<cite>` element.
### Example
```html
<blockquote cite="https://www.cnet.com/news/tim-cook-maintains-steve-jobs-beatles-business-model/">
“My model for business is The Beatles. They were four guys who kept each others kind of negative tendencies in check.
They balanced each other and the total was greater than the sum of the parts.
Thats how I see business: great things in business are never done by one person, theyre done by a team of people.”
</blockquote>
<cite>Steve Jobs</cite>
```
#### More Information:
[blockquote MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote)

View File

@@ -0,0 +1,25 @@
---
title: Body Tag
---
## Body Tag
The `<body>` tag contains the content for a webpage. Along with `<head>`, it is one of the two required elements of an HTML document. `<body>` must be the second child of an `<html>` element. There can only be one `<body>` element on a page.
The `<body>` element should contain all of a page's content, including all display elements. The `<body>` element can also contain `<script>` tags, generally scripts that must be run after a page's content has been loaded.
```html
<html>
<head>
<title>Document Titles Belong in the Head</title>
</head>
<body>
<p>This paragraph is content. It goes in the body!</p>
</body>
</html>
```
#### More Information:
<a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body' target='_blank' rel='nofollow'>MDN</a>

View File

@@ -0,0 +1,26 @@
---
title: Br Tag
---
## Br Tag
The `<br>` tag produces a line break in a text. This is useful for poems and addresses.
### Example
```html
<!DOCTYPE html>
<html>
<body>
Mozilla Foundation<br>
1981 Landings Drive<br>
Building K<br>
Mountain View, CA 94043-0801<br>
USA
</body>
</html>
```
#### More Information:
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br)
[br tag: w3schools](https://www.w3schools.com/tags/tag_br.asp)

View File

@@ -0,0 +1,69 @@
---
title: Button Tag
---
## Button Tag
A `<button>` tag specifies a clickable button on the HTML document.
Between the `<button>` tags, you can put content, like text or images. This is different from the button created using `<input>` tag, which only takes text as content.
**Syntax:**
`<button type="submit">Click Here!</button>`
**Atributes:**
Following are the associated attribute supported by HTML 4:
| **Attributes** | **Value** | **What it does** |
|---|---|---|
| disabled | disabled | Disables the button |
| name | name | Specifies a name for the button. The name is for referencing the button in HTML form, JS, etc. |
| type | button or reset or submit | Sets the type of the button. A button with `button` type is a simple clickable button, with `submit` type it submits form-data, and with `reset` type it resets form-data. |
| value | text | Sets an initial value for the button. This value is sent along with the form-data. |
HTML 5 supports the following extra attributes:
| **Attributes** | **Value** | **What it does** |
|---|---|---|
| autofocus | autofocus | Should the button automatically get focus when the page loads. For example, see Google. As the page gets loaded completely, the text-box get focus automatically. |
| form | form_id | Specifies one or more forms the button belongs to. |
| formaction | URL | Specifies where to send the form-data once the `submit` type button is pressed. |
| formmethod | get or post | Specifies how to send the form-data. Only for `submit` type button. |
| formtarget | `_blank` or `_self` or `_parent` or `_top` or framename | Specifies the location where the result is to be displayed after submitting form-data. |
**Example:**
```html
<html>
<head>
<title>Button Tag example</title>
</head>
<body>
<form>
First name:<br>
<input type="text" name="firstname" value="Free">
<br>
Last name:<br>
<input type="text" name="lastname" value="CodeCamp">
<br><br>
<input type="submit" value="Submit" formtarget="_self">
</form>
</body>
</html>
```
All major browsers support the `<button>` tag. `<button>` tag also supports event attributes in HTML.
**Note:** Different browsers may send different values if you use `<button>` element. It is advised to either specify the button value or use the `<input>` tag to create button in an HTML form.
**Other resources:**
* Other attributes:
| **Attributes** | **Link** |
|---|---|
| formenctype | https://www.w3schools.com/TAgs/att_button_formenctype.asp |
| formnovalidate | https://www.w3schools.com/TAgs/att_button_formnovalidate.asp |
* `<input>` tag: https://www.w3schools.com/TAgs/tag_input.asp
* Event Attributes: https://www.w3schools.com/TAgs/ref_eventattributes.asp
* `formtarget` attribute values: https://www.w3schools.com/TAgs/att_button_formtarget.asp
* HTML Form:

View File

@@ -0,0 +1,15 @@
---
title: Canvas Tag
---
## Canvas Tag
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/html/elements/canvas-tag/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 -->

View File

@@ -0,0 +1,10 @@
---
title: Center Tag
---
## Center Tag
In HTML the `<center>` tag is used to center text on a page. You can write a `<center>` tag as `<center>My Text Here</center>` The feature is obsolute not recommended to use. The `<center>` tag was deprecated in HTML 4, the feature could be removed from web browsers at anytime. It is recommended to use CSS `text-align` to center text.
#### More Information:
* [MDN - HTML Center Tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center)
* [MDN - CSS Text Align](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)

View File

@@ -0,0 +1,14 @@
---
title: Code Tag
---
## Code Tag
The `<code>` tag contains the piece of computer code for webpage. By default, the `<code>` tag displayed in the browser's default monospace font.
```html
<code>A piece of computer code</code>
```
#### More Information:
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code)

View File

@@ -0,0 +1,28 @@
---
title: Comment Tag
---
## Comment Tag
Comments are tags used to leave notes in the document. Only the developer have access to the comments, the final user don't see unless they check with the browser's Inspector Element.
When you're working in some code, it's helpful to leave tips to others developers in order to understand what the work is about.
### Example
```html
<!-- This is a comment -->
```
Comments can also be used to make code inactive without having to delete it entirely.
### Example
```html
<!--
<h1>Hello Campers</h1>
-->
<h2>Hello Friends</h2>
<!--
<p>Hello Paragraph</p>
-->
```

View File

@@ -0,0 +1,23 @@
---
title: Div Tag
---
## Div Tag
The `<div>` tag is a generic container that defines a section in your HTML document. A `<div>` element is used to group sections of HTML elements together and format them with CSS. A `<div>` is a block-level element. This means that it takes up its own line on the screen. Elements right after the `<div>` will be pushed down to the line below. For similar grouping and styling that is not block-level, but inline, you would use the `<span>` tag instead. The <span> tag is used to group inline-elements in a document.
### Example
Here is an example of how to display a section in the same color:
```html
<div style="color:#ff0000">
<h3>my heading</h3>
<p>my paragraph</p>
</div>
```
#### More Information:
<a href='https://www.tutorialspoint.com/html/html_div_tag.htm' target='_blank' rel='nofollow'>Tutorialspoint</a>
<a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div' target='_blank' rel='nofollow'>MDN</a>

View File

@@ -0,0 +1,26 @@
---
title: Doctype Tag
---
## Doctype Tag
HTML code is always accompanied by its "boilerplate" of tags. The very first tag found on any HTML file must be a Doctype declaration.
The html5 doctype `<!DOCTYPE html>` is a required preamble used to inform the browser which [rendering mode](https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode) to use (HTML5 vs. XHTML). Be sure to place the doctype at the very top of the document.
```html
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Document Title</title>
</head>
<body>
<p>Document content.</p>
</body>
</html>
```
#### More Information:
- [Doctype: MDN](https://developer.mozilla.org/en-US/docs/Glossary/Doctype)
- [Introduction to HTML5: MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5)
- [Quirks Mode and Standards Mode: MDN](https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode)

View File

@@ -0,0 +1,22 @@
---
title: Em Tag
---
## Em Tag
The `<em>` tag is used to emphasize text in an HTML document. This can be done by wrapping the text you would like to be emphasized in an `<em>` tag. Most browsers will render text wrapped in an `<em>` tag as italicized.
Note: The `<em>` tag should not be used to stylistically italicize text. The `<em>` tag is used to stress emphasis on text.
### Example:
```
<body>
<p>
Text that requires emphasis should go <em>here</em>.
</p>
</body>
```
#### More Information:
- [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em)
- [em tag: w3schools](https://www.w3schools.com/tags/tag_em.asp)
- [em tag: htmlreference.io](http://htmlreference.io/element/em/)

View File

@@ -0,0 +1,9 @@
---
title: Fieldsets and Legends
---
#### Suggested Reading:
<!-- Please add any articles you think might be helpful to read before writing the article -->
See the <a href='http://webaim.org/techniques/forms/controls' target='_blank' rel='nofollow'>WebAIM site</a> for accessible form examples - specifically the part about radio buttons
#### Draft of Article:
<!-- Please add your working draft below in GitHub-flavored Markdown -->
Explanation and examples to group related elements in a form with the `fieldset` and `legend` elements

View File

@@ -0,0 +1,23 @@
---
title: Font Tag
---
## Font Tag
*This feature was deprecated in HTML 4.01 and removed in HTML 5.*
The HTML Font Element `<font>` defines the font size, color and face for its content. It was normalized in HTML 3.2 but was then deprecated in HTML 4.01 and is now obsolete in HTML5. Although it still may work in some browsers, it is advised to stop using it as it could be removed at anytime. Styling fonts can be achieved and far better controlled through CSS, in fact all styling should be written using CSS only.
The **former** behavior of the `<font>` element:
* **Color:** This attribute lets you set the textcolor to either a named color like blue, or a hexadecimal color in the format of #RRGGBB.
* **Face:** This attribute lets you set the font family and will contain a comma-separated list of one or more font names. If the first font in the list is not supported by the browser, then it will move onto the second font. If no font is supported or listed then the browser typically defaults a font for that system.
* **Size:** This attribute lets you specify the size of the font. There are two ways to do this, either setting a numeric value or a relative value. Numeric values range from 1 to 7, 1 being the smallest and 3 being the default. Relative values, like -2 or +2, set the value relative to the size of the `<basefont>` element or 3 the default value.
An example:
```html
<font face="fontNameHere" size="7" color="blue">My Text Here</font>
```
#### More Information:
* [MDN - HTML font tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font)
* [MDN - CSS Font](https://developer.mozilla.org/en-US/docs/Web/CSS/font)

View File

@@ -0,0 +1,23 @@
---
title: Footer Tag
---
## Footer Tag
The `<footer>` tag denotes the footer of an HTML document or section. Typically, the footer contains information about the author, copyright information, contact information, and a sitemap. Any contact information inside of a `<footer>` tag should go inside an `<address>` tag.
### Example
```html
<html>
<head>
<title>Paragraph example</title>
</head>
<body>
<footer>
<p>&copy; 2017 Joe Smith</p>
</footer>
</body>
</html>
```
#### More Information:
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer)

View File

@@ -0,0 +1,47 @@
---
title: Form Tag
---
## Form Tag
The `<form>` tag is used to create forms in HTML that are for user input. Once a user inputs data and submits it, the data is sent to the server to be processed.
Here's a basic example of how to use the `<form>` tag:
```html
<form action="/example.php" method="get">
Name: <input type="text"><br>
Email Address: <input type="text"><br>
<input type="submit" value="Submit">
</form>
```
###Action Attribute
Every `<form>` element needs an action attribute. The value of the action attribute is the URL on the server that will receive the data in the form when submitted.
Here's an example using the action attribute:
```html
<form action="http://www.google.com/form.php" method="get">
<p>Controls will appear inside here.</p>
</form>
```
As you can see, the form is submitting its data to the URL [http://www.google.com/from.php](http://www.google.com/from.php).
###Method
Forms can be submitted using either the GET or POST method.
- The GET method is ideal for shorter forms since it attaches data to the end of the URL specified inside of the action attribute.
- The POST method is ideal for forms that are longer, or when you are adding or deleting information from a database. With the POST method, the values of the form are being sent in HTTP headers.
###Elements
The `<form>` element will have at least have one of the following elements nested inside of it:
- [`<input>`](https://guide.freecodecamp.org/html/elements/input "Input")
- [`<button>`](https://guide.freecodecamp.org/html/elements/button-tag "Button")
- [`<label>`](https://guide.freecodecamp.org/html/elements/label-tag "Label")
- [`<select>`](https://guide.freecodecamp.org/html/elements/select-tag "Select")
- [`<textarea>`](https://guide.freecodecamp.org/html/elements/textarea-tag "Textarea")
- [`<fieldset>`](https://guide.freecodecamp.org/html/elements/fieldsets-and-legends "Fieldset")
### Resources
- [W3 Schools Form Resource](https://www.w3schools.com/tags/tag_form.asp "W3 Schools")
- [Mozilla Form Resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form "Mozilla Form")

View File

@@ -0,0 +1,24 @@
---
title: Head Tag
---
## Head Tag
The `<head>` tag contains information about a webpage. Along with `<body>`, it is one of the two required elements of an HTML document. `<head>` must be the first child of an `<html>` element. There can only be one `<head>` element on a page.
The `<head>` element contains information about how a webpage should be displayed, also known as metadata. The document title, links to stylesheets, and `<script>` tags linking to JavaScript files should all be placed in the `<head>`. The `<head>` should not contain any page content.
```html
<html>
<head>
<title>Document Titles Belong in the Head</title>
</head>
<body>
<p>This paragraph is content. It goes in the body!</p>
</body>
</html>
```
#### More Information:
- [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head)

View File

@@ -0,0 +1,27 @@
---
title: Header Tag
---
## Header Tag
The `<header>` tag is a container which is used for navigational links or introductory content.
It may typically include heading elements, such as `<h1>`, `<h2>`, but may also include other elements such as a search form, logo, author information etc.
<h1> corresponds to the most important heading. As we move to other tags like <h2>, <h3>, etc the degree of importance decreases.
Although not required, the `<header>` tag is intended to contain the surrounding sections heading. It may also be used more than once in an HTML document. It is important to note that the `<header>` tag does not introduce a new section, but is simply the head of a section.
Here's an example using the `<header>` tag:
```html
<article>
<header>
<h1>Heading of Page</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
```
#### More Information:
- [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header)
- [W3 Schools](https://www.w3schools.com/tags/tag_header.asp)

View File

@@ -0,0 +1,25 @@
---
title: Hr Tag
---
## Hr Tag
The horizontal rule or `<hr>` is a tag that allows to insert a divisory line, defining the content of your document.
It's very important to clarify that this tag is a thematic break; in previous versions of .html is a horizontal rule.
### Example
```
<!DOCTYPE html>
<html>
<body>
<h2>FreeCodeCamp</h2>
<p>FreeCodeCamp is a place where you can learn to code from scratch to professional</p>
<hr>
<h3>How to start</h3>
<p>Just go to <a href="www.freecodecamp.com">FreeCodeCamp website and start learning!</a></p>
<hr>
</body
</html>
```

View File

@@ -0,0 +1,21 @@
---
title: I Tag
---
## I Tag
The `<i>` element is used to denote text that is set apart from its surrounding text in some way. By default, text surrounded by `<i>` tags will be displayed in italic type.
In previous HTML specifications, the `<i>` tag was solely used to denote text to be italicized. In modern semantic HTML, however, tags such as `<em>` and `<strong>` should be used where appropriate. You can use the "class" attribute of the `<i>` element to state why the text in the tags is different from the surrounding text. You may want to show that the text or phrase is from a different language, as in the example below.
```HTML
<p>The French phrase <i class="french">esprit de corps</i> is often
used to describe a feeling of group cohesion and fellowship.</p>
```
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
- <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i' target='_blank' rel='nofollow'>The HTML &lt;i&gt; element: MDN</a>
- <a href='https://www.w3schools.com/tags/tag_i.asp' target='_blank' rel='nofollow'>I tag: w3schools</a>
- <a href='http://htmlreference.io/element/i/' target='_blank' rel='nofollow'>I tag: htmlreference.io</a>

View File

@@ -0,0 +1,30 @@
---
title: Iframe Tag
---
## Iframe Tag
Iframe tags are used to add an existing web page or app to your website within a set space.
When using the iframe tags the src attribute should be used to indicate the location of the web page or app to use within the frame.
```html
<iframe src="framesite/index.html"></iframe>
```
You can set the width and height attributes to limit the size of the frame.
```html
<iframe src="framesite/index.html" height="500" width="200"></iframe>
```
Iframes have a border by default, if you wish to remove this you can do so by using the style attribute and setting CSS border properties to none.
```html
<iframe src="framesite/index.html" height="500" width="200" style="border:none;"></iframe>
```
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
* [MDN - HTML iframe tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)
* [W3 - HTML 5.2 iframe specification](https://www.w3.org/TR/html5/semantics-embedded-content.html#the-iframe-element)

View File

@@ -0,0 +1,36 @@
---
title: Img Tag
---
## Img Tag
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
A simple HTML Image element can be included in an HTML document like this:
```html
<img src="path/to/image/file" alt="this is a cool picture">
```
`alt` tags provide alternate text for an image. One use of the `alt` tag is for visually impaired people using a screen reader; they can be read the `alt` tag of the image in order to understand the image's meaning.
Note that the path to the image file can be either relative or absolute. Also, remember that the `img` element is self-closing, meaning that it does not close with the `<img />` tag and instead closes with just a single `>`.
Example:
```html
<img src="https://example.com/image.png" alt="my picture">
```
(This is assuming that the html file is at https://example.com/index.html, so it's in the same folder as the image file)
is the same as:
```html
<img src="image.png" alt="my picture">
```
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
<a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img' target='_blank' rel='nofollow'>MDN</a>
<a href="https://www.w3schools.com/TAGs/tag_img.asp">W3Schools</a>

View File

@@ -0,0 +1,114 @@
---
title: Elements
---
# HTML Elements
Elements are the building blocks of HTML that describe the structure and content of a web page. They are the "Markup" part of HyperText Markup Language (HTML).
HTML syntax uses the angle brackets ("&lt;" and "&gt;") to hold the name of an HTML element. Elements usually have an opening tag and a closing tag, and give information about the content they contain. The difference between the two is that the closing tag has a forward slash.
Here's an example using the [p element](#) (`<p>`) to tell the browser that a group of text is a paragraph:
```html
<p>This is a paragraph.</p>
```
Opening and closing tags should match, otherwise the browser may display content in an unexpected way.
![XKCD comic showing the text "Q: How do you annoy a developer?" surrounded by an opening div tag and closing span tag](http://imgs.xkcd.com/comics/tags.png)
## Self-closing Elements
Some HTML elements are self-closing, meaning they don't have a separate closing tag. Self-closing elements typically insert something into your document.
An example is the [br element](#) (`<br>`), which inserts a line break in text. Formerly, self-closing tags had the forward slash inside them (`<br />`), however, HTML5 specification no longer requires this.
## HTML Element Functionality
There are many available HTML elements. Here's a list of some of the functions they perform:
- give information about the web page itself (the metadata)
- structure the content of the page into sections
- embed images, videos, audio clips, or other multimedia
- create lists, tables, and forms
- give more information about certain text content
- link to stylesheets which have rules about how the browser should display the page
- add scripts to make a page more interactive and dynamic
## Nesting HTML Elements
You can nest elements within other elements in an HTML document. This helps define the structure of the page. Just make sure the tags close from the inside-most element first.
Correct:
`<p>This is a paragraph that contains a <span>span element.</span></p>`
Incorrect:
`<p>This is a paragraph that contains a <span>span element.</p></span>`
## Block-level and Inline Elements
Elements come in two general categories, known as block-level and inline. Block-level elements automatically start on a new line while inline elements sit within surrounding content.
Elements that help structure the page into sections, such as a navigation bar, headings, and paragraphs, are typically block-level elements. Elements that insert or give more information about content are generally inline, such as [links](#) or [images](#).
## The HTML Element
There's an `<html>` element that's used to contain the other markup for an HTML document. It's also known as the "root" element because it's the parent of the other HTML elements and the content of a page.
Here's an example of a page with a [head element](#the-head-element), a [body element](#the-body-element), and one [paragraph](#the-p-element):
```html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>I'm a paragraph</p>
</body>
</html>
```
## The HEAD Element
This is the container for processing information and metadata for an HTML document.
```html
<head>
<meta charset="utf-8">
</head>
```
## The BODY Element
This is container for the displayable content of an HTML document.
```html
<body>...</body>
```
## The P Element
Creates a paragraph, perhaps the most common block level element.
```html
<p>...</p>
```
## The A(Link) Element
Creates a hyperlink to direct visitors to another page or resource.
```html
<a href="#">...</a>
```
## Other Resources
- [HTML Paragraphs](#)
- [HTML br](#)
- [HTML Links](#)
- [HTML Images](#)
- [HTML Head](#)
- [HTML Body](#)
- [HTML DOCTYPE](#)

View File

@@ -0,0 +1,73 @@
---
title: Input Tag
---
## Input
HTML input tag can be included in HTML document like this:
```html
<input type="text">
```
This creates an area within which a user can easily enter information. This information is then sent to a back end database and stored or used further down within the website or application.
An input with "type='text'" will produce a single line field where any information can be entered. Other common types of inputs include but are not limited to: button, checkbox, color, email and password.
### The most common types used
* `text`: A single-line text field.
* `button`: A button with no default behavior.
* `submit`: A button that submits the form.
* `checkbox`: A check box allowing values to be selected/deselected.
* `date`: For entering a date (year, month, and day).
* `email`: For editing an e-mail address.
* `file`: Lets the user select a file.
* `hidden`: Not displayed but its value is submitted to the server.
* `number`: For entering a number.
* `password`: A single-line text field whose value is obscured.
* `radio`: A radio button, allowing a single value to be selected out of multiple choices.
* `range`: A control for entering a number.
* `url`: For entering a URL.
Example:
```html
<input type="button">
<input type="checkbox">
<input type="color">
<input type="email">
<input type="password">
```
Inputs come with a lot of predetermined attributes.
Some commonly found attributes include autocomplete, checked and placeholder.
```html
<input type="text" placeholder="This is a placeholder">
```
In the above instance, an area within which input can be entered is rendered, with the placeholder stating "This is a placeholder". Once the input line is clicked and a key is pressed, the placeholder disappears and is replaced by your own input.
```html
<input type="checkbox" checked>
```
In this instance, a checkbox appears and it is checked by default due to the attribute 'checked'.
There are many different types of inputs and associated attributes that can all be found on the link found below.
#### More Information:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
https://www.w3schools.com/tags/tag_input.asp

View File

@@ -0,0 +1,13 @@
---
title: Input Types
---
## Input Types
Input HTML elements can be assigned an attribute called a "type." The type of an input element determines what type of data the user can input. The default input is text, but other options incude Checkboxes, simple buttons, or Color (utilizing hex codes).
#### More Information:
[W3 Schools: Input Type](https://www.w3schools.com/tags/att_input_type.asp)
[MDN: <input>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)

View File

@@ -0,0 +1,65 @@
---
title: Label Tag
---
# Label Tag
<***label***> defines a label for an <input> type element/tag.
### Usage
```
<label for="id">Label</label>
<input type="text" name="text" id="id" value="yourvalue"><br>
```
As you can see, the *for* attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.
### Platform Support
|Browser|Element Support|
|:-----:|:-------------:|
|Internet Explorer|:white_check_mark:|
|Mozilla Firefox|:white_check_mark:|
|Google Chrome|:white_check_mark:|
|Opera|:white_check_mark:|
|Safari|:white_check_mark:|
### Attributes
|Attribute| Value|Description|
|:-------:|:----:|:---------:|
|for| element_id| Specifies which form element a label is bound to|
|form|form_id |Specifies one or more forms the label belongs to|
### Global Attribute
The <**label**> tag supports the Global Attributes in HTML.
### Event Attribute
The <**label**> tag supports the Event Attributes in HTML.
> The <**label**> element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control.
#### More Information:
[https://www.w3schools.com/jsref/dom_obj_label.asp](https://www.w3schools.com/jsref/dom_obj_label.asp)
=======
## Label
The `<label>` tag defines a label for an `<input>` element.
A label can be bound to an element either by using the "for" attribute, or by placing the element inside the <label> element.
```html
<label for="peas">Do you like peas?
<input type="checkbox" name="peas" id="peas">
</label>
```
```html
<label>Do you like peas?
<input type="checkbox" name="peas">
</label>
```
#### More Information:
<a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label' target='_blank' rel='nofollow'>MDN - Tabel Tag</a>
<a href='https://www.w3schools.com/tags/tag_label.asp' target='_blank' rel='nofollow'>W3School - Label Tag</a>

View File

@@ -0,0 +1,171 @@
---
title: Li Tag
---
## Li Tag
The `<li>` tag defines a list item in a list. The `<li>` tag can be used with unordered lists (`<ul>`), ordered lists (`<ol>`), and menus (`<menu>`).
To define a list item, wrap the desired elements in an `<li>` tag. `<li>` elements must be contained inside a parent element that is a list.
### Example
```html
<body>
<ul>
<li>
<p>I'm a list item</p>
</li>
<li>
<p>I'm a list item too</p>
</li>
<li>
<p>Me three/p>
</li>
</ul>
</body>
```
In an ordered list, `<li>` appears as an item with a bullet point.
* First item
* Second item
* Third item
In an unordered list, `<li>` appears as a numbered item.
1. First item
2. Second item
3. Third item
This numeric display counter can be customized using the _list-style-type_ CSS property.
Examples:
```html
<!-- In a simple unordered list -->
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<!-- In a simple ordered list -->
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<!-- In a menu list -->
<menu>
<li>Menu item one</li>
<li>Menu item two</li>
<li>Menu item three</li>
</menu>
```
### Attributes
The `<li>` element has the following elements:
#### Type
The `type` attribute defines the numbering type that will be used in the list. The following values are used to determine which numbering style will be used:
* `1`: numbers
* `a`: lowercase letters
* `A`: uppercase letters
* `i`: lowercase numerals
* `I`: uppercase numerals
#### Example
```html
<body>
<ol type="I">
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
</body>
```
The above HTMl will output:
<ol type="I">
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
#### Value
The `value` attribute specifies the numeric order of the current `<li>`. This attribute only accepts a numeric value and can only be used with an ordered list. Any list items that follow will be ordered numerically based on the numeric input of the `value` attribute.
#### Example
```html
<body>
<ol>
<li value="4">list item</li>
<li>list item</li>
<li>list item</li>
</ol>
</body>
```
The above HTML will output:
4. list item
5. list item
6. list item
### Nesting another list as an item
Besides creating individual items, you can also use `<li>` tags to create a nested list, ordered or unordered. To do this, you nest a `<ol>` or `<ul>` _within_ a `<li>` tag.
Here is an unordered list with a nested, ordered list.
* First item
* Second item
1. First sub-item
2. Second sub-item
* Third item
And here is an ordered list with a nested, unordered list.
1. First item
2. Second item
* First sub-item
* Second sub-item
3. Third item
```html
<!-- An unordered list with a nested, ordered list. -->
<ul>
<li>First item</li>
<li>Second item <!-- No closing </li> tag before the nested list -->
<ol>
<li>First sub-item</li>
<li>Second sub-item</li>
</ol>
</li> <!-- The closing </li> tag comes after the nested list -->
<li>Third item</li>
</ul>
<!-- An ordered list with a nested, unordered list. -->
<ol>
<li>First item</li>
<li>Second item <!-- No closing </li> tag before the nested list -->
<ul>
<li>First sub-item</li>
<li>Second sub-item</li>
</ul>
</li> <!-- The closing </li> tag comes after the nested list -->
<li>Third item</li>
</ol>
```
#### More Information:
- [The HTML &lt;li&gt; element: MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li)
- [HTML &lt;li&gt; tag: w3schools](https://www.w3schools.com/cssref/pr_list-style-type.asp)
- [CSS list-style Property: CSS-Tricks](https://css-tricks.com/almanac/properties/l/list-style/)

View File

@@ -0,0 +1,10 @@
---
title: Link Tag
---
## Link Tag
The link element can be used to tether relevant content from another webpage or document. Link tags commonly involve implementation of CSS to an HTML document.
#### More Information:
[MDN: Link Tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)

View File

@@ -0,0 +1,72 @@
---
title: Lists
---
## Lists
There are three types of lists in HTML. All lists must contain one or more list elements.
### Unordered HTML List
The unordered list starts with `<ul>` tag and list items start with the `<li>` tag. In unordered lists all the list items marked with bullets by default.
```
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
```
Output:
<html>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</html>
### Ordered HTML List
The ordered list starts with `<ol>` tag and list items start with the `<li>` tag. In ordered lists all the list items are marked with numbers.
```
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
```
Output:
<html>
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</html>
### HTML Description List
The description list contains list items with their definitons. We use `<dl>` tag to start list, `<dt>` tag to define a term and `<dd>` tag to describe each term.
```
<dl>
<dt>freeCodeCamp</dt>
<dd>Learn to code with free online courses, programming projects, and interview preparation for developer jobs.</dd>
<dt>GitHub</dt>
<dd>GitHub is a web-based Git or version control repository and Internet hosting service. It is mostly used for code.</dd>
</dl>
```
Output:
<html>
<dl>
<dt>freeCodeCamp</dt>
<dd>Learn to code with free online courses, programming projects, and interview preparation for developer jobs.</dd>
<dt>GitHub</dt>
<dd>GitHub is a web-based Git or version control repository and Internet hosting service. It is mostly used for code.</dd>
</dl>
</hhtml>
#### More Information:
<a href='https://html.com/lists/' target='_blank' rel='nofollow'>HTML</a>
<a href='https://www.w3schools.com/html/html_lists.asp' target='_blank' rel='nofollow'>w3schools</a>

View File

@@ -0,0 +1,25 @@
---
title: Main Tag
---
## Main Tag
The `<main>` tag works similar to the `<div>` tag but semantically represents the main content of the document or portion of the document. Multiple `<main>` tags may be used, e.g. for the main content of various articles, and thus its contents should be unique to the document and not repeated elsewhere.
### Example
The following example illustrates the use of the `<main>` tag:
```html
<!-- other content -->
<main>
<h1>Diary Entry 31</h1>
<p>Oct 23 2017</p>
<article>
<h2>Today Is Unique</h2>
<p>This information will be unique among other articles.</p>
</article>
</main>
<!-- other content -->
```

View File

@@ -0,0 +1,30 @@
---
title: Meta Tag
---
## Meta Tag
The `<meta>` tag provides the metadata about the HTML document.
This metadata is used to specify a page's charset, description, keywords, the author, and the viewport of the page.
This metadata will not appear on the website itself, but it will be used by the browers and search engines to determine how the page will display content and assess search engine optimization (SEO).
The metadata is assigned to the <head></head> of the HTML document:
```html
<head>
<meta charset="UTF-8">
<meta name="description" content="Short description of website content here">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Jane Smith">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag. The viewport is the user's visible area of a web page. A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling. -->
</head>
```
#### More Information:
For additional information on the <meta> tag, please visit the following:
(https://www.w3schools.com/TAgs/tag_meta.asp "w3schools.com <meta> tag")
(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta "MDN <meta> tag")

View File

@@ -0,0 +1,25 @@
---
title: Nav Tag
---
## Nav Tag
The `<nav>` tag is intended for major block of navigation links. NOT all links of a document should be inside a `<nav>` element.
Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.
#### Example
``` html
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
```
#### More Information:
- <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav' target='_blank' rel='nofollow'>MDN</a>

View File

@@ -0,0 +1,33 @@
---
title: ol Tag
---
## ol Tag
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
The `<ol>` tag creates an ordered list element in HTML. An ordered list is one of two list structures in HTML, the other is the unordered list, created by the `<ul>` tag. Ordered lists are used to display lists with meaningful order. By default, list items in an ordered list are displayed as a numbered list, starting with 1. This behavior can be changed with the "type" attribute or by using CSS styles. List elements can be nested.
```html
<ol>
<li>First Item</li>
<li>Second Item <!-- No closing </li> tag before the nested list -->
<ol>
<li>First Subitem</li>
<li>Second Subitem</li>
</ol>
</li> <!-- The closing </li> tag comes after the nested list -->
<li>Third Item</li>
</ol>
```
### Ordered vs. Unordered Lists
In HTML, ordered and unordered lists are similar in both usage and styling. Use ordered lists in places where changing the order of the items would change the meaning of the list. For example, an ordered list could be used for a recipe, where changing the order of the steps would matter. Use unordered lists for groups of items without meaningful order. A list of animals on a farm could go in an unordered list.
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
## Other Resources
* [The unordered list `<ul>`](https://github.com/freeCodeCamp/guides/blob/master/src/pages/html/elements/ul-tag/index.md)
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol)

View File

@@ -0,0 +1,39 @@
---
title: P Tag
---
## P Tag
The `<p>` tag stands for paragraph, which is the most common tag used to create lines of words inside the `<html>` document. Using `<p>` will be very useful to add the margin automatically between elements. The `<p>`attribute can also be helpful for CSS styling.
### P tag with other tags
The use of the `<p>` is compatible with other tags, allowing to add hyperlinks (`<a>`), bold (`<strong>`), italics(`<i>`) among others.
### Example
```html
<html>
<head>
<title>Paragraph example</title>
</head>
<body>
<p>
This <strong>sentence</strong> was created to show how the paragraph works.
</p>
</body>
</html>
```
You can also nest an anchor element `<a>` within a paragraph.
### Example
```html
<p>Here's a
<a href="http://freecodecamp.com">link to Free Code Camp.com</a>
for you to follow.</p>
```
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
- <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p' target='_blank' rel='nofollow'>MDN: &lt;p&gt; The Paragraph element</a>
- <a href='https://www.w3schools.com/tags/tag_i.asp' target='_blank' rel='nofollow'>w3schools: HTML &lt;p&gt; Tag</a>

View File

@@ -0,0 +1,21 @@
---
title: Paragraph Tag
---
## Paragraph
The HTML <p> element represents a paragraph of text. <p> usually represents a block of text that it separated from other blocks by vertical blank space.
### Example
``` html
<p>
This is a paragraph
</p>
<p>
This is another paragraph
</p>
```
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

View File

@@ -0,0 +1,15 @@
---
title: Paragraphs
---
## Paragraphs
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/html/elements/paragraphs/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 -->

View File

@@ -0,0 +1,15 @@
---
title: S Tag
---
## S Tag
In HTML the `<s>` tag is used to strikethrough text. For instance:
```html
<p><s>This year is the year of the monkey.</s></p>
<p>This year is the year of the Rooster.</p>
```
#### More Information:
* [MDN - HTML s tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s)
* [W3 - HTML 5.2 s tag specification](https://www.w3.org/TR/html5/textlevel-semantics.html#the-s-element)

View File

@@ -0,0 +1,40 @@
---
title: Script Tag
---
## Script Tag
The HTML Script tag is used to either contain client side JavaScript or reference an external JavaScript file using the script “src” attribute.
The `<script>` tag/element is used to incorporate client-side Javascript into your HTML file which can be used to add interactivity and logic to your website
```
<script>
//JavaScript code is written here
</script>
<script src="js/app.js">
```
The tag can be used to encompass actual Javascript code right in the HTML itself like this
```
<script>
alert('hello this is my Javascript doing things!');
</script>
```
Or you can use it as a way to reference an external javascript file like this
```
<script src="main.js" />
```
Here the `src` attribute of the element takes in a path to a Javascript file
Script tags are loaded into your HTML in-order and syncronously so it is usually best practice to add your scripts right before the ending of your `<body>` tag in your HTML like so
```
<script src="main.js" />
<script>
alert('hello this is my Javascript doing things!');
</script>
</body>
```
You can see the official documentation for the script element on the [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)

View File

@@ -0,0 +1,28 @@
---
title: Section Tag
---
## Section
The HTML ```<section>``` element defines a section within an HTML page that is used when there is not a more specific semantic HTML element to represent it. Typically, a ```<section>``` element will include a heading element (```<h1>``` - ```<h6>```) as child element.
For example, a web page could be divided into various sections such as welcome, content and contact sections.
A ```<section>``` element should not be used in place of a ```<div>``` element if a generic container is needed. It should be used to define sections within an HTML page.
```html
<html>
<head>
<title>Section Example</title>
</head>
<body>
<section>
<h1>Heading</h1>
<p>Bunch of awesome content</p>
</section>
</body>
</html>
```
#### More Information:
* [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section)
* [W3 Schools](https://www.w3schools.com/tags/tag_section.asp)

View File

@@ -0,0 +1,15 @@
---
title: Select Tag
---
## Select Tag
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/html/elements/select-tag/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 -->

View File

@@ -0,0 +1,32 @@
---
title: Span Tag
---
## Span Tag
The `<span>` tag is a general purpose container element similar to `<div>`. Browsers do not make any visual changes to `<span>`s by default, but you can style them with CSS or manipulate them with JavaScript.
### Example
```html
<html>
<head>
<title>The Span Tag</title>
</head>
<body>
<div>
<p>This is a normal paragraph without any changes.</p>
<p>This paragraph has <span style="color:red">red span styling</span> inside it without affecting the rest of the document.</p>
</div>
</body>
</html>
```
The code for the paragraph with red text looks like this:
```html
<p>This paragraph has <span style="color:red">red span styling</span> inside it without affecting the rest of the document.</p>
```
#### Differences between `<span>` and `<div>`
The main difference is that `<span>` is an inline element, while `<div>` is a block element. This means that a `<span>` can appear within a sentence or paragraph (as in the example above), while a `<div>` will start a new line of content. Note that the CSS `display` property can change this default behavior, but that's way beyond the scope of this article!
#### More Information:
* [MDN HTML Element Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span)

View File

@@ -0,0 +1,50 @@
---
title: Strong Tag
---
# Strong Tag
The HTML < ***strong***> tag is a text emphasis tag which when used, results in, bold display of text, placed within the tags.
### Usage
```
<strong> Hello World! </strong>
```
The above code results in
**Hello World!**
This tag is also commonly referred to as the **strong element** . When it comes to attributes, only the Global Attributes apply to **strong**
tag ie., there are no specific attributes for <**strong**> tag.
### Browser Support
| Name of the Browser | Support |
|:-------------------:|:-------:|
|Chrome|Yes|
|Android|Yes|
|Firefox|Yes|
|Internet Explorer|Yes|
|Opera|Yes|
|Safari|Yes|
#### More Information:
[https://www.techonthenet.com/html/elements/strong_tag.php](https://www.techonthenet.com/html/elements/strong_tag.php)<br>
[https://www.w3schools.com/tags/tag_strong.asp](https://www.w3schools.com/tags/tag_strong.asp)
=======
The `<strong>` tag is used to give importance to text in an HTML document. This can be done by wrapping the text you would like to be emphasized in an `<strong>` tag. Most browsers will render text wrapped in an `<strong>` tag as bold.
Note: The `<strong>` tag should not be used to stylistically bold text.
### Example:
```
<body>
<p>
<strong> This </strong> is important.
</p>
</body>
```
#### More Information:
- [em tag: w3schools](https://www.w3schools.com/tags/tag_strong.asp)

View File

@@ -0,0 +1,42 @@
---
title: Style Tag
---
## Style Tag
The style tag is used sort of like a css file except inside of an HTML, like so:
```
<head>
<title>Your Title</title>
<style>
p {
color:red;
}
</style>
</head>
```
That would make the paragraph tag's color red. It is kind of useful if you just want to put a little bit of code, but if you want a really long stylesheet, then I recommend just using `<link />`.
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
[W3C schools](https://www.w3schools.com/tags/tag_style.asp)
More Info:
Style tag is used to set any CSS-styles for web-page inside a document. Style tag should be nested within head section of html-document:
```html
<head>
<style>
h1 {
text-align: center;
font-family: sans-serif;
}
</style>
</head>
```
You can write any CSS-code inside style tag according to its syntax.

View File

@@ -0,0 +1,38 @@
---
title: Table Tag
---
## Table Tag
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
The `<table>` tag allows you to display a table on your webpage.
### Example
```html
<table>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
```
This code block would produce the following output:
<table>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)

View File

@@ -0,0 +1,34 @@
---
title: Td Tag
---
## Td Tag
The `<td>` tag defines a standard cell in an HTML table.
An HTML table has two kinds of cells:
* Header cells - contains header information (created with the `<th>` element)
* Standard cells - contains data (created with the `<td>` element)
The text in `<th>` elements are bold and centered by default.
The text in `<td>` elements are regular and left-aligned by default.
### Example
```html
<html>
<head>
<title>Td Tag Example</title>
</head>
<body>
<table>
<tr>
<th>Header1</th>
<th>Header2</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
</body>
</html>
```

View File

@@ -0,0 +1,23 @@
---
title: Textarea Tag
---
## Textarea Tag
The HTML textarea tag allows you to enter a box that will contain text for user feedback or interaction. In most cases, it is common to see the textarea used as part of a form.
Programmers use textarea tag to create multiline field for user input (useful especially in case when user should be able to put on the form longer text). Programmers may specify different attributes for textarea tags.
Sample code:
```html
<form>
<textarea name="comment" rows="8" cols="80" maxlength="500" placeholder="Enter your comment here..." required></textarea>
</form>
```
Most common attributes:
`row` and `cols` attributes determine the height and width of the textarea
`placeholder` attribute specifies the text which is visible to the user, it helps the user to understand what data should be typed in
`maxlength` attribute determines the maximum length of the text which can be typed in the textarea, user cannot submit more characters
`required` attribute means that this field must be filled in before the form submission
For more information about textarea tag and its attributes visit [MDN]("https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea") or [w3schools]("https://www.w3schools.com/tags/tag_textarea.asp").

View File

@@ -0,0 +1,38 @@
---
title: Th Tag
---
## Th Tag
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
The `<th>` tag allows you to define a header cell in HTML tables. By default, most browsers will bold and center data in these tags.
### Example
```html
<table>
<tr>
<th>Movie</th>
<th>Rating</th>
</tr>
<tr>
<td>Die Hard</td>
<td>5 Stars</td>
</tr>
</table>
```
This markup will create the following output:
<table>
<tr>
<th>Movie</th>
<th>Rating</th>
</tr>
<tr>
<td>Die Hard</td>
<td>5 Stars</td>
</tr>
</table>
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th)

View File

@@ -0,0 +1,34 @@
---
title: Tr Tag
---
<p>The <code class="language-text">&lt;tr&gt;</code> tag defines a standard row in an HTML table on a web page.</p>
<p>The <code class="language-text">&lt;tr&gt;</code> tag houses the <code class="language-text">&lt;th&gt;</code> and <code class="language-text">&lt;td&gt;</code> tags, also known as Table Header and Table Data respectively.</p>
<p><code class="language-text">&lt;tr&gt;</code> tag is a close-ended tag meaning that every <code class="language-text">&lt;tr&gt;</code> tag opened must be closed with their sub-sequent closing tag denoted by <code class="language-text">&lt;/tr&gt;</code></p>
<p><code class="language-text">&lt;tr&gt;</code> tag defines a row in a table. </p>
<h3>Example</h3>
<p>&nbsp;</p>
```html
<html>
<head>
<title>Tr Tag Example</title>
</head>
<body>
<table>
<tr>
<th>Header One</th>
</tr>
<tr>
<td>The usual table data/column cell.</td>
</tr>
<tr>
<td>The usual table data/column cell.</td>
</tr>
<tr>
<td>The usual table data/column cell.</td>
</tr>
</table>
</body>
</html>

View File

@@ -0,0 +1,28 @@
---
title: U Tag
---
## U Tag
The HTML `<u>` tag renders text with an underline.
The `<u>` element was deprecated in HTML 4.01. In HTML5, the `<u>` tag was redefined to represent text that should be stylistically different form normal text. This includes misspelled words or proper nouns in Chinese.
Instead, to underline text, it is recommended that the `<span>` tag is used in place of `<u>`. Style your `<span>` tags with the CSS `text-decoration` property with the value `underline`.
### Examples:
``` html
<html>
<body>
<p>This parragraph has a <u>underline</u>.</p>
</body>
</html>
```
Underlining text with the `<span>` tag:
```html
<span style="text-decoration: underline">Everyone</span> has been talking about <span style="text-decoration: underline">freeCodeCamp</span> lately.
```
### More Information:
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u)

View File

@@ -0,0 +1,48 @@
---
title: Ul Tag
---
## Ul Tag
The unordered list `<ul>` is a tag used to create bulleted lists. To create a list inside the `<ul>`, use the `<li>` tag. To style lists, go to the CSS style lists and make the changes.
The `<ul>` can be nested inside other lists and is compatible with others tag such as `<a>`,`<p>`,`<button>`, the html styling tags (`<strong>`,`<em>`, etc).
### Example
To create the following:
```html
<ul>
<li>This is the bulleted list #1</li>
<li>This is the bulleted list #2</li>
<li>This is the bulleted list #3</li>
<li>
<ul>
<li>This is the bulleted nested list #1</li>
</ul>
</li>
</ul>
```
You would use this HTML code:
``` html
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li>This is the bulleted list #1</li>
<li>This is the bulleted list #2</li>
<li>This is the bulleted list #3</li>
<li>
<ul>
<li>This is the bulleted nested list #1</li>
</ul>
</li>
</ul>
</body>
</html>
```
## Other Resources
- [The ordered list `<ol>`](https://github.com/freeCodeCamp/guides/blob/master/src/pages/html/elements/ol-tag/index.md)

View File

@@ -0,0 +1,71 @@
---
title: HTML Entities
---
# HTML Entities
## Overview
### What are HTML Entities?
HTML entities are characters that are used to replace reserved characters in HTML or for characters that do not appear on your keyboard. Some characters are reserved in HTML. If you use the less than(<) or greater than(>) signs in your text, the browser might mix them up with tags.
### What are they used for?
As mentioned about HTML entities are used in order to replace reserved characters that are reserved by HTML.
### How do you use them?
A character entity looks similar to this:
```html
<!-- format &[entity_name]; -->
<!-- example for a less-than sign (<) -->
&lt;
```
Or
```html
<!-- &#[entity_number]; -->
<!-- example for a less-than sign (<) -->
&#60;
```
## Reference Guide
This is by no means an exhaustive list but the links below will be able to give you more entities if the ones below do not work for your needs. Happy Coding :bowtie:
| Character | Entity Name | Entity Number | Description |
|-------|-----------|-----------|-------|
| | | `&#32;` | Space |
| ! | | `&#33;` | Exclamation mark |
| " | | `&#34;` | Quotation mark |
| # | | `&#35;` | Number sign |
| $ | | `&#36;` | Dollar sign |
| ¢ | `&cent;` | `&#162;` | Cent sign |
| € | `&euro;` | `&#8364;` | Euro sign |
| £ | `&pound;` | `&#163;` | GBP sign |
| ¥ | `&yen;` | `&#165;` | Yen sign |
| % | | `&#37;` | Percent sign |
| & | `&amp;` | `&#38;` | Ampersand |
| ' | | `&#39;` | Apostrophe |
| ( | | `&#40;` | Opening/Left Parenthesis |
| ) | | `&#41;` | Closing/Right Parenthesis |
| * | | `&#42;` | Asterisk |
| + | | `&#43;` | Plus sign|
| , | | `&#44;` | Comma |
| - | | `&#45;` | Hyphen |
| . | | `&#46;` | Period |
| / | | `&#47;` | Slash |
| © | `&copy;` | `&#169;` | Copyright |
| ® | `&reg;` | `&#174;` | Registered Trademark |
| " | `&quot;` | `&#34;` | double quotation mark |
| `>` | `&gt;` | `&#62;` | Greater-than sign |
| `<` | `&lt;` | `&#60;` | Less-than sign |
| `•` | `&bull;` | `&#8226` | Bullet point |
#### More Information:
There are plenty of HTML entites references out there; some examples are:
* [Table of Entities - W3](https://dev.w3.org/html5/html-author/charref)
* [W3 Schools](https://www.w3schools.com/html/html_entities.asp)
* [Freeformatter](https://www.freeformatter.com/html-entities.html)

View File

@@ -0,0 +1,73 @@
---
title: HTML Forms
---
## HTML Forms
Basically, forms are used to collect data entered by a user, which are then sent to the server for further processing. They can be used for different kinds of user inputs, such as name, email etc.
Form contains control elements which are wrapped around ```<form></form>``` tags, like ```input```, which can have types like:
- ```text```
- ```email```
- ```password```
- ```checkbox```
- ```radio```
- ```submit```
- ```range```
- ```search```
- ```date```
- ```time```
- ```week```
- ```color```
- ```datalist```
Code example:
```html
<form>
<label for="username">Username:</label>
<input type="text" name="username" id="username">
<label for="password">Password:</label>
<input type="password" name="password" id="password">
<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
<input list="Options">
<datalist id="Options">
<option value="Option1">
<option value="Option2">
<option value="Option3">
</datalist>
<input type="submit" value="Submit">
<input type="color">
<input type="checkbox" name="correct" value="correct">Correct
</form>
```
Other elements that form can contain:
- ```textarea``` - is a multiline box which is most often used for adding some text eg. comment. Size of textarea is defined by number of rows and columns.
- ```select``` - together with ```<option></option>``` tag creates drop-down select menu.
- ```button``` - The button element can be used to define a clickable button.
MORE INFORMATION ON HTML FORMS.
HTML Forms are required when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, credit card, etc.
A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.
There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.
The HTML `<form>` tag is used to create an HTML form and it has following syntax
``` html
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>
```
If the form method is not defined then it will default to "GET".
The form tag can also have an attribute named "target" which specifies where the link will open. It can open in the browser tab, a frame, or in the current window.
The action attribute defines the action to be performed when the form is submitted.
Normally, the form data is sent to a web page at the Script URL when the user clicks on the submit button. If the action attribute is omitted, the action is set to the current page.

View File

@@ -0,0 +1,46 @@
---
title: HTML5 Audio
---
## HTML5 Audio
Before HTML5, audio files had to be played in a browser using a plug-in like Adobe Flash.
The HTML <audio> element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the [source](<source>) element
The following code snippet adds an audio file with the filename `tutorial.ogg` or `tutorial.mp3`. The <source> element indicates alternative audio files which the browser may choose from. The browser will utilize the first recognized format.
#### Example 1
```html
<audio controls>
<source src="tutorial.ogg" type="audio/ogg">
<source src="tutorial.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
```
#### Example 2
```html
<audio src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" controls loop autoplay>
</audio>
```
The `controls` attribute includes audio controls like play, pause, and volume. If you don't use this attribute, then no controls will be shown.
The `<source>` element enables you to indicate alternative audio files which the browser may choose from. The browser will utilize the first recognize format.
The text between the `<audio>` and `</audio>` tags may be shown in browser that does not support the HTML5 `<audio>` element.
The autoplay attribute will automatically play your audio file in the background. It is considered better practice to let visitors choose to play audio.
The preload attribute indicates what the browser should do if the player is not set to autoplay.
The loop attribute will play your audio file in a continous loop if mentioned
Since this is html5, some browser do not support it. You can check it at https://caniuse.com/#search=audio
#### More Information:
https://caniuse.com/#search=audio
https://www.w3schools.com/html/html5_audio.asp
https://msdn.microsoft.com/en-us/library/gg589529(v=vs.85).aspx

View File

@@ -0,0 +1,183 @@
---
title: HTML5 Semantic Elements
---
## HTML5 Semantic Elements
Semantic HTML elements clearly describe it's meaning in a human and machine readable way. Elements such as `<header>`, `<footer>` and `<article>` are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.
### A Quick History
HTML was originally created as a markup language to describe documents on the early internet. As the internet grew and was adopted by more people, it's needs changed. Where the internet was originally inteded for sharing scientific documents, now people wanted to share other things as well. Very quickly, people started wanting to make the web look nicer. Because the web was not initially built to be designed, programmers used different hacks to get things laid out in different ways. Rather than using the ```<table></table>``` to describe information using a table, programmers would use them to position other elements on a page. As the use of visually designed layouts progressed, programmers started to use a generic "non-semantic" tag like `<div>`. They would often give these elements a `class` or `id` attribute to describe their purpose. For example, instead of `<header>` this was often written as `<div class="header">`. As HTML5 is still relatively new, this use of non-semantic elements is still very common on websites today.
#### List of new semantic elements
The semantic elements added in HTML5 are:
+ `<article>`
+ `<aside>`
+ `<details>`
+ `<figcaption>`
+ `<figure>`
+ `<footer>`
+ `<header>`
+ `<main>`
+ `<mark>`
+ `<nav>`
+ `<section>`
+ `<summary>`
+ `<time>`
Elements such as ```<header>```, ```<nav>```, ```<section>```, ```<article>```, ```<aside>```, and ```<footer>``` act more or less like ```<div>``` elements. They group other elements together into page sections. However where a ```<div>``` tag could contain any type of information, it is easy to identify what sort of information would go in a semantic ```<header>``` region.
**An example of semantic element layout by w3schools**
![Semantic elements laying out a page by w3schools](https://www.w3schools.com/html/img_sem_elements.gif)
### Benefits of semantic elements
To look at the benefits of semantic elements, here are two pieces of HTML code. This first block of code uses semantic elements:
```
<header></header>
<section>
<article>
<figure>
<img>
<figcaption></figcaption>
</figure>
</article>
</section>
<footer></footer>
```
Whilst this second block of code uses non-semantic elements:
```
<div id="header"></div>
<div class="section">
<div class="article">
<div class="figure">
<img>
<div class="figcaption"></div>
</div>
</div>
</div>
<div id="footer"></div>
```
First, it is much **easier to read**. This is probably the first thing you will notice when looking at the first block of code using semantic elements. This is a small example, but as a programmer you can be reading through hundreds or thousands of lines of code. The easier it is to read and understand that code, the easier it makes your job.
It has **greater accessibility**. You are not the only one that finds semantic elements easier to understand. Search engines and assistive technologies (like screen readers for users with a sight impairment) are also able to better understand the context and content of your website, meaning a better experience for your users.
Overall, semantic elements also lead to more **consistent code**. When creating a header using non-semantic elements, different programmers might write this as `<div class="header">`, `<div id="header">`, `<div class="head">`, or simply `<div>`. There are so many ways that you can create a header element, and they all depend on the personal preference of the programmer. By creating a standard semantic element, it makes it easier for everyone.
Since October 2014, HTML4 got upgraded to HTML5, along with some new “semantic” elements. To this day, some of us might still be confused as to why so many different elements that doesnt seem to show any major changes.
#### <code>&#60;section&#62;</code> and <code>&#60;article&#62;</code>
“Whats the difference?”, you may ask. Both these elements are used for sectioning a content, and yes, they can definitely be used interchangeably. Its a matter of in which situation. HTML4 offered only one type of container element, which is <code>&#60;div&#62;</code>. While this is still used in HTML5, HTML5 provided us with <code>&#60;section&#62;</code> and <code>&#60;article&#62;</code> in a way to replace <code>&#60;div&#62;</code>.
The <code>&#60;section&#62;</code> and <code>&#60;article&#62;</code> elements are conceptually similar and interchangeable. To decide which of these you should choose, take note of the following:
1. An article is intended to be independently distributable or reusable.
2. A section is a thematic grouping of content.
```html
<section>
<p>Top Stories</p>
<section>
<p>News</p>
<article>Story 1</article>
<article>Story 2</article>
<article>Story 3</article>
</section>
<section>
<p>Sport</p>
<article>Story 1</article>
<article>Story 2</article>
<article>Story 3</article>
</section>
</section>
```
#### <code>&#60;header&#62;</code> and <code>&#60;hgroup&#62;</code>
The <code>&#60;header&#62;</code> element is generally found at the top of a document, a section, or an article and usually contains the main heading and some navigation and search tools.
```html
<header>
<h1>Company A</h1>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact us</a></li>
</ul>
<form target="/search">
<input name="q" type="search" />
<input type="submit" />
</form>
</header>
```
The <code>&#60;hgroup&#62;</code> element should be used where you want a main heading with one or more subheadings.
```html
<hgroup>
<h1>Heading 1</h1>
<h2>Subheading 1</h2>
<h2>Subheading 2</h2>
</hgroup>
```
REMEMBER, that the <code>&#60;header&#62;</code> element can contain any content, but the <code>&#60;hgroup&#62;</code> element can only contain other headers, that is <code>&#60;h1&#62;</code> to <code>&#60;h6&#62;</code> and including <code>&#60;hgroup&#62;</code>.
#### <code>&#60;aside&#62;</code>
The <code>&#60;aside&#62;</code> element is intended for content that is not part of the flow of the text in which it appears, however still related in some way. This of <code>&#60;aside&#62;</code> as a sidebar to your main content.
```html
<aside>
<p>This is a sidebar, for example a terminology definition or a short background to a historical figure.</p>
</aside>
```
#### <nav>
Before HTML5, our menus were created with <code>&#60;ul&#62;</code>s and <code>&#60;li&#62;</code>s. Now, together with these, we can separate our menu items with a <code>&#60;nav&#62;</code>, for navigation between your pages. You can have any number of <code>&#60;nav&#62;</code> elements on a page, for example, its common to have global navigation across the top (in the <code>&#60;header&#62;</code>) and local navigation in a sidebar (in an <code>&#60;aside&#62;</code> element).
```html
<nav>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact us</a></li>
</ul>
</nav>
```
#### <code>&#60;footer&#62;</code>
If there is a <code>&#60;header&#62;</code> there must be a <code>&#60;footer&#62;</code>. A <code>&#60;footer&#62;</code> is generally found at the bottom of a document, a section, or an article. Just like the <code>&#60;header&#62;</code> the content is generally metainformation, such as author details, legal information, and/or links to related information. It is also valid to include <code>&#60;section&#62;</code> elements within a footer.
```html
<footer>&copy;Company A</footer>
```
#### <code>&#60;small&#62;</code>
The <code>&#60;small&#62;</code> element often appears within a <code>&#60;footer&#62;</code> or <code>&#60;aside&#62;</code> element which would usually contain copyright information or legal disclaimers, and other such fine print. However, this is not intended to make the text smaller. It is just describing its content, not prescribing presentation.
```html
<footer><small>&copy;Company A</small> Date</footer>
```
#### <code>&#60;time&#62;</code>
The <code>&#60;time&#62;</code> element allows an unambiguous ISO 8601 date to be attached to a human-readable version of that date.
```html
<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time>
```
Why bother with <code>&#60;time&#62;</code>? While humans can read time that can disambiguate through context in the normal way, the computers can read the ISO 8601 date and see the date, time, and the time zone.
#### <code>&#60;figure&#62;</code> and <code>&#60;figcaption&#62;</code>
<code>&#60;figure&#62;</code> is for wrapping your image content around it, and <code>&#60;figcaption&#62;</code> is to caption your image.
```html
<figure>
<img src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg" alt="Shadow of Mordor" />
<figcaption>Cover art for Middle-earth: Shadow of Mordor</figcaption>
</figure>
```
### Learn more about the new HTML5 elements:
* [w3schools](https://www.w3schools.com/html/html5_semantic_elements.asp) provides simple and clear descriptions of many of the news elements and how/where they should be used.
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) also provides a great reference for all HTML elements and goes deeper into each.

View File

@@ -0,0 +1,73 @@
---
title: HTML5 Video
---
## HTML5 Video
Before HTML5, in order to have a video play in a webpage you would need to use a plugin, like Adobe Flash Player. With the introduction of HTML5, you can now place it directly into the page itself.
The HTML <video> tag is used to embed video in web documents. It may contain one or more video sources, represented using the src attribute or the [source](<source>) element.
To embed video file into web page, just add this code snippet and change the src of audio file.
```html
<video controls>
<source src="tutorial.ogg" type="video /ogg">
<source src="tutorial.mp4" type="video /mpeg">
Your browser does not support the video element. Kindly,update it to latest version.
</video >
```
The controls attribute includes video controls, similar to play, pause, and volume.
This feature is supported by all modern/updated browsers. However, not all support the same video file format. My recommendation for a wide range of compatibilty is MP4, as it is the most widely accepted format. There are also two other formats (WebM and Ogg) that are supported in Chrome, Firefox, and Opera.
The <source> element enables you to indicate alternative video files which the browser may choose from. The browser will utilize the first recognized format.
In HTML5, there are 3 supported video formats: MP4, WebM, and Ogg.
The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.
Since this is html5, some browsers do not support it. You can check the support at https://caniuse.com/#search=audio.
There are several different elements of the video tag, many of these explanations are based on Mozilla's web docs (linked below). There are even more if you click the link at the bottom.
#### autoplay
"autoplay" can be set to either true or false. You set it to true by adding it into the tag, if it is not present in the tag it is set to false. If set to true, the video will begin playing as soon as enough of the video has buffered for it to be able to play. Many people find autoplaying videos as disruptive or annoying so use this feature sparingly. Also note, that some mobile browsers, such as Safari for iOS, ignore this attribute.
```html
<video autoplay>
<source src="video.mp4" type="video/mp4">
</video>
```
#### poster
The "poster" attribute is the image that shows on the video until the user clicks to play it.
```html
<video poster="poster.png">
<source src="video.mp4" type="video/mp4">
</video>
```
#### controls
The "controls" attribute can be set to true or false and will handle whether controls such as the play/pause button or volume slider appear. You set it to true by adding it into the tag, if it is not present in the tag it is set to false.
```html
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
```
There are many more attributes that can be added that are optional to customize the videoplayer in the page. To learn more, click on the links below.
## More Information:
- <a href="https://www.w3schools.com/html/html5_video.asp">W3Schools - HTML5 Video</a>
- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video">Mozilla web docs - Video</a>
- <a href="https://en.wikipedia.org/wiki/HTML5_video">Wikipedia - HTML5 Video</a>
- <a href="https://www.html5rocks.com/en/tutorials/video/basics/">HTML5 Rocks - HTML5 Video</a>
- [Can I use video?](https://caniuse.com/#search=video)
- [How to use HTML5 to play video files on your webpage](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/hh924821(v=vs.85))

View File

@@ -0,0 +1,57 @@
---
title: HTML5 Web Storage
---
## HTML5 Web Storage
Web storage allows web applications to store up to 5MB of information in browser storage per origin (per domain and protocol).
### Types of Web Storage
There are two objects for storing data on the client:
`window.localStorage`: stores data with no expiration date and lives until removed.
```javascript
// Store Item
localStorage.setItem("foo", "bar");
// Get Item
localStorage.getItem("foo"); //returns "bar"
```
`window.sessionStorage`: stores data for one session, where data is lost when the browser / browser tab is closed.
```javascript
// Store Item
sessionStorage.setItem("foo", "bar");
// Get Item
sessionStorage.getItem("foo"); //returns "bar"
```
Since the current implementation only supports string-to-string mappings, you need to serialize and de-serialize other data structures.
You can do so using JSON.stringify() and JSON.parse().
For e.g. for the given JSON
```
var jsonObject = { 'one': 1, 'two': 2, 'three': 3 };
```
We first convert the JSON object to string and save in the local storage:
```
localStorage.setItem('jsonObjectString', JSON.stringify(jsonObject));
```
To get the JSON object from the string stored in local storage:
```
var jsonObject = JSON.parse(localStorage.getItem('jsonObjectString'));
```
#### More Information:
<a href='https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage' target='_blank' rel='nofollow'>MDN</a>
<a href='https://www.html5rocks.com/en/features/storage' target='_blank' rel='nofollow'>HTML5 Rocks</a>
<a href='https://www.w3schools.com/html/html5_webstorage.asp' target='_blank' rel='nofollow'>W3 Schools</a>

View File

@@ -0,0 +1,59 @@
---
title: Iframes
---
## Iframes
The HTML `<iframe>` element represents an inline frame, which allows you to include an independent HTML document into the current HTML document. The `<iframe>` is typically used for embedding third-party media, your own media, widgets, code snippets, or embedding third-party applets such as payment forms.
### Attributes
Listed below are some of the `<iframe>`'s attributes:
| Attribute | Description |
| --- | --- |
| `allowfullscreen` | Set to true to allow the frame to be placed into full screen mode |
| `frameborder` | Tells the browser to draw a border around the frame (set to 1 by default) |
| `height` | The height of the frame in CSS pixels |
| `name` | A name for the frame |
| `src` | The URL of the web page to embed |
| `width` | The width of the frame in CSS pixels |
### Examples
Embedding a YouTube video with an `<iframe>`:
```html
<iframe width="560" height="315" src="https://www.youtube.com/embed/v8kFT4I31es"
frameborder="0" allowfullscreen></iframe>
```
Embedding Google Maps with an `<iframe>`:
```html
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d774386.2436462595!2d-74.53874786161381!3d40.69718109704434!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY%2C+USA!5e0!3m2!1sen!2sau!4v1508405930424"
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
```
### Alternative Text
The content between the opening and closing `<iframe>` tags is used as alternative text, to be displayed if the viewer's browser does not support iframes.
```html
<iframe width="560" height="315" src="https://www.youtube.com/embed/v8kFT4I31es" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
```
### Targeting an Iframe in a Link
Any `<a>` link can target the content of an `<iframe>` element. Rather than redirect the browser window to the linked webpage, it will redirect the `<iframe>`. For this to work, the `target` attribute of the `<a>` element must match the `name` attribute of the `<iframe>`.
```html
<iframe width="560" height="315" src="about:blank" frameborder="0" name="iframe-redir"></iframe>
<p><a href="https://www.youtube.com/embed/v8kFT4I31es" target="iframe-redir">Redirect the Iframe</a></p>
```
This example will show a blank `<iframe>` initially, but when you click the link above it will redirect the `<iframe>` to show a YouTube video.
### Javascript and Iframes
Documents embedded in an `<iframe>` can run JavaScript within their own context (without affecting the parent webpage) as normal.
Any script interaction between the parent webpage and the content of the embedded `<iframe>` is subject to the same-origin policy. This means that if you load the content of the `<iframe>` from a different domain, the browser will block any attempt to access that content with JavaScript.
### More Information:
See the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe).

View File

@@ -0,0 +1,65 @@
---
title: HTML
---
# HTML
HyperText Markup Language (HTML) is a markup language used to construct online documents and is the foundation of most websites today. A markup languages like HTML allows us to 1) create links to other documents, 2) structure the content in our document, and 3) ascribe context and meaning to the content of our document.
An HTML document has two aspects to it. It contains structured information (Markup), and text-links (HyperText) to other documents. We structure our pages using [HTML elements](#). They are constructs of the language providing [structure](#) and [meaning](#) in our document for the browser and the [<anchor>](#) element links to other documents across the internet.
The internet was originally created to store and present static (unchanging) documents. The aspects of HTML discussed above were seen perfectly in these documents which lacked all design and styling. They presented structured information that contained links to other documents.
HTML5 is the latest version, or specification, of HTML. The World Wide Web Consortium (W3C) is the organization responsible for developing standards for the World Wide Web, including those for HTML. As web pages and web applications grow more complex, W3C updates HTML's standards.
HTML5 Introduces a host of semantic elements. Though we discussed HTML helped to provided meaning to our document, it wasn't until HTML5s' introduction of [semantic elements](#) that its' potential was realized.
## A simple example of HTML Document
```html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
```
!DOCTYPE html: Defines this document to be HTML5
html: The root element of an HTML page
head: The element contains meta information about the document
title: The element specifies a title for the document
body: The element contains the visible page content
h1: The element defines a large heading
p: The element defines a paragraph
### HTML Versions
Since the early days of the web, there have been many versions of HTML
|Version|Year|
|--- |--- |
|HTML|1991|
|HTML 2.0|1995|
|HTML 3.2|1997|
|HTML 4.01|1999|
|XHTML|2000|
|HTML5|2014|
#### Other Resources
- [HTML Elements](https://guide.freecodecamp.org/html/elements)
- [Semantic HTML](https://guide.freecodecamp.org/html/html5-semantic-elements)
- [HTML Attributes](https://guide.freecodecamp.org/html/attributes)

View File

@@ -0,0 +1,54 @@
---
title: Layouts
---
## Layouts
Layouts organize different areas of the web page.
Almost every web page we see can be divided into boxes, that can be arranged into specific order to create that web page. The image below is one such example.
![Sample of Website Design - www.codementor.io](http://i.imgur.com/Z1DSMYC.png)
> Websites often display content in multiple columns (like a magazine or newspaper).
And the HTML layout techniques help us put the needed information into the needed order or design.
### Techniques to Implement Layouts
#### HTML Tables
One the most basic tools to implement layouts in a webpage, these are provided by HTML. But as the layout gets complicated HTML tables quickly lose their ease, because of the increase in markup text.
<!-- Examples needed -->
#### CSS Float
If you are to design a 2-column based page with left navigation pane and center content viewing area, its easy to do it with CSS floats. Simply set the left navigation page into a `<div>` with style property `float: left;`. And voila you get that design. But what if you had 4 columns in a single section. Sure, one can do it with floats, but the syntax of HTML you would be writing would be easy to comprehend.
<!-- Examples needed -->
#### CSS Frameworks
This is where CSS Frameworks such as [Bootstrap](http://getbootstrap.com/) and [Materialize](http://materializecss.com/) come in. These frameworks provide a grid functionality that lets to divide each section of your webpage into 12 columns, which you can order to design.
![Grid Example](https://blog.gridbox.io/wp-content/uploads/2018/01/download-1-1024x271.png)
> Sample Bootstrap Grid
### HTML Semantic Elements
Websites often display content in multiple columns (like a magazine or newspaper).
HTML5 offers new semantic elements that define the different parts of a web page:
```
<header> - Defines a header for a document or a section
<nav> - Defines a container for navigation links
<section> - Defines a section in a document
<article> - Defines an independent self-contained article
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details
<summary> - Defines a heading for the <details> element
```
#### More Information:
- [W3 Schools - Layout](https://www.w3schools.com/html/html_layout.asp)
- [CodeMentorTeam](https://www.codementor.io/codementorteam/4-different-html-css-layout-techniques-to-create-a-site-85i9t1x34) - Layout Techniques to Create a Site

View File

@@ -0,0 +1,102 @@
---
title: Lists
---
# Lists
Lists are used to display items. There are 3 types of lists: _ordered lists_, _unordered lists_, and _description lists_.
## Ordered lists
An _ordered list_ is used to describe an ordered collection of data. Browsers usually display an ordered list as a numbered list. Create an ordered list using the `<ol>` tag.
## Unordered lists
An _unordered list_ is used to describe an unordered collection of data. Browsers usually display an unordered list as a bulleted list. Create an unordered list using the `<ul>` tag.
## List items
The direct children of ordered and unordered lists must be list items. Each list item is wrapped in an `<li>` tag. A list item tag can contain [flow content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content).
## Examples
An ordered list is written as
```HTML
<ol>
<li>January</li>
<li>February</li>
<li>March</li>
</ol>
```
and is displayed as:
1. January
1. February
1. March
An unordered list is written as
```HTML
<ul>
<li>Macintosh</li>
<li>Fuji</li>
<li>Gala</li>
</ul>
```
and is displayed as:
- Macintosh
- Fuji
- Gala
## Styling Bulletpoints
An ordered list can be used for a variety of functions and in a number of styles. Since changing the encompassing tag colors doesn't change the color of the bullets themselves, you can style them by first removing the traditional black bullets and inserting your own:
Remove bullets:
```CSS
ul {
list-style: none;
}
```
Insert your own:
```CSS
ul li::before {
content: "\2022";
color: orange;
display: inline-block;
width: 1em;
}
```
The content style adds a new bulletpoint while display and width style create a space between the bullet and the word. Regular font styles can apply here if you would like to make the bullet larger or bolder.
## Description lists
A description list is a list of terms, with a description of each term. A description list is made using the `<dl>` tag.
Each item in the list is made up of two tags: a term `<dt>`, and a description of that term `<dd>`.
They are called definition lists in HTML 4.
Here is an example of a description list:
```HTML
<dl>
<dt>Programming</dt>
<dd>The process of writing computer programs.</dd>
<dt>freeCodeCamp</dt>
<dd>An awesome non-profit organization teaching people how to code.</dd>
</dl>
```
which would end up looking like:
<dl>
<dt>Programming</dt>
<dd>The process of writing computer programs.</dd>
<dt>freeCodeCamp</dt>
<dd>An awesome non-profit organization teaching people how to code.</dd>
</dl>
## More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
* [HTML lists on w3schools](https://www.w3schools.com/html/html_lists.asp)

View File

@@ -0,0 +1,53 @@
---
title: Mailto Links
---
## Mailto Links
A mailto link is a kind of hyperlink (`<a href=""></a>`) with special parameters that lets you specify additional recipients, a subject line, and/or a body text.
### The basic syntax with a recipient is:
```html
<a href="mailto:friend@something.com">Some text</a>
```
### More customization!
#### Adding a subject to that mail:
If you want to add a specific subject to that mail, be careful to add `%20` or `+` everywhere there's a space in the subject line. An easy way to ensure that it is properly formatted is to use a [URL Decoder / Encoder](https://meyerweb.com/eric/tools/dencoder/).
#### Adding body text:
Similarly, you can add a specific message in the body portion of the email:
Again, spaces have to be replaced by `%20` or `+`.
After the subject paramater, any additional parameter must be preceded by `&`
Example: Say you want users to send an email to their friends about their progress at Free Code Camp:
Address: empty
Subject: Great news
Body: I am becoming a developer
Your html link now:
```html
<a href="mailto:?subject=Great%20news&body=I%20am%20becoming%20a%20developer">Send mail!</a>
```
Here, we've left mailto empty (mailto:?). This will open the user's email client and the user will add the recipient address themselves.
#### Adding more recipients:
In the same manner, you can add CC and bcc parameters.
Seperate each address by a comma!
Additional parameters must be preceded by `&`.
```html
<a href="mailto:firstfriend@something.com?subject=Great%20news&cc=secondfriend@something.com,thirdfriend@something.com&bcc=fourthfriend@something.com">Send mail!</a>
```
#### More Information:
[MDN - E-mail links](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#E-mail_links)

View File

@@ -0,0 +1,37 @@
---
title: Optional Tags
---
## HTML5 Optional Tags
In HTML5, you can omit certain opening and closing tags under specific conditions. For example, the following HTML code...
```html
<!DOCTYPE html>
<p>Hello World.
```
Will automatically evaluate to...
```html
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>Hello world.
</p>
</body>
</html>
```
The optional tag specifications for the most common HTML5 tags are as follows:
- An `html` element's start tag may be omitted if the first thing inside the `html` element is not a comment.
- An `html` element's end tag may be omitted if the `html` element is not immediately followed by a comment.
- A `head` element's start tag may be omitted if the element is empty, or if the first thing inside the `head` element is an element.
- A `head` element's end tag may be omitted if the `head` element is not immediately followed by a space character or a comment.
- A `body` element's start tag may be omitted if the element is empty, or if the first thing inside the `body` element is not a space character or a comment, except if the first thing inside the `body` element is a `meta`, `link`, `script`, `style`, or `template` element.
- A `body` element's end tag may be omitted if the body element is not immediately followed by a comment.
### More Information
To learn more about the HTML5 optional tags, please visit [The World Wide Web Consortium's Recommendations](https://www.w3.org/TR/html5/syntax.html#optional-tags).

Some files were not shown because too many files have changed in this diff Show More