gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add HTML Elements (from line 67 to 114) (#20105)

Browse Source 
* add HTML Elements (from line 67 to  114)

I have added description regarding commonly used HTML elements .

* Corrected formatting and structure
This commit is contained in:
AMIT KUMAR RANJAN
2018-10-28 07:59:07 +05:30
committed by Christopher McCormack
parent 7db9f67057
commit 0a8b936915
1 changed files with 80 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
guide/english/html/index.md
View File

@ -63,3 +63,83 @@ Since the early days of the web, there have been many versions of HTML
- [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)
# HTML Elements
The extent of an element is indicated by a pair of tags: a "start tag" `<p>` and "end tag" `</p>`. The text content of the element, if any, is placed between these tags.
Tags may also enclose further tag markup between the start and end, including a mixture of tags and text. This indicates further (nested) elements, as children of the parent element.
The start tag may also include attributes within the tag. These indicate other information, such as identifiers for sections within the document, identifiers used to bind style information to the presentation of the document, and for some tags such as the `<img>` used to embed images, the reference to the image resource.
Some elements, such as the line break `<br>` or `<br/>`, do not permit any embedded content, either text or further tags. These require only a single empty tag (start tag) and do not use an end tag.
### Element examples
Header of the HTML document:
```html
<head>...</head>
```
The `<title>...</title>` element is one element normally included in the head. For example:
```html
<head>
<title>The Title</title>
</head>
```
**Headings**
HTML headings are defined with the `<h1>` to `<h6>` tags:
```html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```
**Paragraphs**
`<p>Paragraph 1</p>`
`<p>Paragraph 2</p>`
**Line Breaks**
```html
<br/>
```
The difference between `<br/>` and `<p>` is that `br` breaks a line without altering the semantic structure of the page, whereas `p` sections the page into paragraphs. Note also that `br` is an empty element in that, although it may have attributes, it can take no content and it may not have an end tag.
```html
<p>This is a paragraph <br> with <br> line breaks</p>
```
**Anchor/Links**
To create a link the `<a>` tag is used. The href attribute holds the URL address of the link.
```html
<a href="https://www.youtube.com">A link to Youtube!</a>
```
**Inputs**
There are many possible ways a user can give input/s like:
```html
<input type="text" /> <!-- This is for text input -->
<input type="file" /> <!-- This is for uploading files -->
<input type="checkbox" /> <!-- This is for checkboxes -->
```
**Comments**
```
<!-- This is a comment -->
```
Comments can help in the understanding of the markup and do not display in the webpage.