Fixed grammatical and misspelling errors. (#27544)

I made changes through the "section and articles" section but stopped there and plan on returning later to finish.
pull/32950/head^2
Matthew Piestrak 2019-03-16 14:15:00 -04:00 committed by The Coding Aviator
parent 1df8205677
commit d16af9f673
1 changed files with 4 additions and 4 deletions

View File

@ -2,8 +2,8 @@
title: HTML5 Semantic Elements
---
## HTML5 Semantic Elements
Semantic HTML elements clearly describe its 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.
Semantic HTML elements clearly describe their 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, its 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.
@ -59,16 +59,16 @@ Whilst this second block of code uses non-semantic elements:
<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.
First, the semantic is much **easier to read**. This is probably the first thing you will notice when looking at the first block of code. 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.
In October 2014, HTML4 got upgraded to HTML5, and with that upgrade came some new “semantic” elements. To this day, some of us might still be confused as to why there are so many different elements that don't 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>.
“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 what is more appropriate in the given 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> as 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: