Top 10 ways to use HTML5

HTML is Hyper Text Markup Language is the foundation for all websites and HTML5 is the latest version. HTML5 is how your website is built but not how it is looks. Think of HTML5 as a frame to a house.  You can build a website different ways but all have the same basic structure.

Screen Shot 2016-07-06 at 7.01.58 AM

1. <head> Element 

The <head> element is used to specify information about your page such as the title, meta tags, and linking CSS to your HTML.

Screen Shot 2016-07-08 at 9.56.21 AM

2. <article> Element

The <article> element is used to contain a section of the web page. A great example are blog posts that are displayed a blog page. A common use of the <article> element is to wrap a separate post.

Screen Shot 2016-07-08 at 9.51.11 AM

3. <header> Element

The <header> element is used to introduce the content of a web page, blog, or article.

Screen Shot 2016-07-08 at 10.04.37 AM

4. <nav> Element

The <nav> element defines a set of links that to external pages or sections within the current page. A user will see typically at the top of a page.

Screen Shot 2016-07-08 at 9.54.41 AM

 

5.<figure> Element

The <figure> element is use to self-contain content, like photos, illustrations, and diagrams.

Screen Shot 2016-07-08 at 10.07.27 AM

6. <figurecaption> Element

Use the <figurecaption> element to define a caption for a <figure> element.

Screen Shot 2016-07-08 at 10.08.51 AM

7. <audio> Element

The <audio> element defines sounds such as music, music, and other audio streams.

Screen Shot 2016-07-08 at 10.12.19 AM

8. <video> Element

The <video> element is used to embed video content on your page. The code below will play a video as soon as enough of the video has been received to allow playback without pausing. If the video is not ready to play the image wait_image.jpg will display.

Screen Shot 2016-07-08 at 10.20.07 AM

9. <footer> Element

The <footer> element is used at the bottom of your page to show information such as copyright, author, or related links.

Screen Shot 2016-07-08 at 10.22.22 AM

10. <address> Element

the <address> element is used represent contact information for a web page or article.

Screen Shot 2016-07-08 at 10.24.37 AM

In this post, I hope you have found some new ways to use HTML5 to create your web pages. Using proper HTML5 elements will give your page a logic flow and help you build more purposeful web pages.  Proper HTML5 elements also help computer programs to distinguish certain section. This is information is very helpful for people that use screen readers that depend on programs to convert text into speech so that the user can listen to content.

 

 

 

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s