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

Update for consistancy and clarity (#31250)

Browse Source 
* Update for consistancy and clarity

* fix: corrected main header
This commit is contained in:
Kristina Gern
2019-06-22 02:20:17 -06:00
committed by Parth Parth
parent 3fa14df925
commit 82bad3bb50
1 changed files with 30 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
guide/english/html/elements/index.md
View File

@ -1,13 +1,14 @@
---
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).
# Elements
HTML syntax uses the angle brackets ("<" and ">") 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.
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).
Here's an example using the [p element](#) (`<p>`) to tell the browser that a group of text is a paragraph:
HTML syntax uses 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. A closing tag has a forward slash and the opening tag does not.
Here's an example using the _p element_ to tell the browser that a group of text is a paragraph:
```html
<p>This is a paragraph.</p>
@ -17,27 +18,27 @@ Opening and closing tags should match, otherwise the browser may display content
![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
## 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.
Self-closing HTML elements do not require a closing tag.
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.
An example is the _br element_ (`<br>`), which inserts a line break in text. Prior to HTML5, self-closing tags required a forward slash (`<br/>`, for example), however the HTML5 specification no longer requires this.
## HTML Element Functionality
## HTML element functionality
There are many available HTML elements. Here's a list of some of the functions they perform:
HTML elements can perform many different funtions in an HTML documetns, including:
- 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
- Provide information about the web page (metadata).
- Structure the page content into sections.
- Embed images, videos, audio clips, or other multimedia.
- Create lists, tables, and forms.
- Provide more information about certain text content.
- Link to stylesheets which provide display information.
- Reference scripts which add dynamic behavior to the page.
## Nesting HTML Elements
## 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.
You can nest elements within other elements in an HTML document to define the structure of the page. Tags must be closed in the reverse of the order in which they are opened.
Correct:
`<p>This is a paragraph that contains a <span>span element.</span></p>`
@ -46,13 +47,13 @@ Incorrect:
`<p>This is a paragraph that contains a <span>span element.</p></span>`
## Block-level and Inline Elements
## Block-level elements 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 are divided into two categories: _block-level_ elements and _inline_ elements. Browsers render block-level elements on a new line while inline elements are rendered inline with their 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](#).
Elements that provide structure the page, 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
## 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.
@ -69,7 +70,7 @@ Here's an example of a page with a [head element](#the-head-element), a [body el
</html>
```
## The HEAD Element
## The head element
This is the container for processing information and metadata for an HTML document.
@ -80,36 +81,26 @@ This is the container for processing information and metadata for an HTML docume
</head>
```
## The BODY Element
## The body element
This is container for the displayable content of an HTML document.
The body element contains an HTML document's displayable content.
```html
<body>...</body>
```
## The P Element
## The p element
Creates a paragraph, perhaps the most common block level element.
The `<p>` element is a block-level element which creates a paragraph.
```html
<p>...</p>
```
## The A(Link) Element
## The a element
Creates a hyperlink to direct visitors to another page or resource.
The `<a>` 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](#)