Overview of HTML5 and HTML5 Features

Hello Guys,

 In this article, We will learn about the overview of HTML5 and HTML5 Features 

What is HTML5?

HTML5 Frontend Interview Questions and Answers - Codevik
HTML 5


 HTML5 is the latest specification of HTML language, which represents a major breakthrough with previous markup practice. The purpose of making profound changes to the language is to standardize many new ways developers use it and encourage a set of best practices related to web development.

 Most individual changes are the result of larger goals in language design. These goals mainly include:
  • Encourage semantic (meaningful) markup
  • Separate design from content
  • Promote accessibility and design responsiveness
  • Reduce the overlap between HTML, CSS, and JavaScript
  • Support rich media experiences without plug-ins like Flash or Java
  • Understanding HTML5 is not only about understanding which CSS features can replace old HTML features. If you want to understand HTML5 intuitively, it is best to understand how these goals affect the development of the language.

1.VIDEO

The video element allows you to easily stream video from the website.


<video width="450px" height="350px" controls>
  <source src="video-url.mp4" type="video/mp4">
</video>


In the above HTML, the width and height set the size of the video element. The controls attribute creates playback buttons, such as "Play" and "Pause". The source src tag provides the URL of the hosted video, and type specifies the type of video, in this case "video/mp4".
2. FIGURE

 Figure elements can be used to display visual content, such as photos, illustrations, diagrams or code snippets.



<figure class="gallery-item">
  <img src="image-1.png">
</figure>
<figure class="gallery-item">
  <img src="image-2.png">
</figure>


In the example code above, figure elements have the class “gallery-item”, and each contains an img element.

 3. SECTION
Section elements, like divs, can be used to organize webpage content into thematic groups.

<section class="contact-form">
  <h2>Contact Us</h2>
  <form>
    ... 
  </form>
</section>


Above, a section element is used to organize h2 and form elements for a website’s “Contact Us” feature

4. NAV

The nav element is used for the part of a website that links to other pages on the site. The links can be organized a number of ways. Below, the links are displayed within paragraph elements. An unordered list could also be used.

<nav>
  <p><a href="login.html">Log In</a></p>
  <p><a href="signup.html">Sign Up</a></p>
  <p><a href="contact.html">Contact Us</a></p>
</nav>

5.HEADER

The header element can be used to group together introductory elements on a website, such as a company logo, navigation items, and sometimes, a search form.

<header>
  <img src="company-logo.png">
  <nav>
    <p><a href="login.html">Log In</a></p>
    <p><a href="signup.html">Sign Up</a></p>
    <p><a href="contact.html">Contact Us</a></p>
  </nav>
</header>


Above, the header element encloses the img and nav.

5. FOOTER

The footer element is typically found at the bottom or foot of a webpage. It can contain copyright information, links to social media and additional site navigation items.

<footer>
  <p>&copy; Acme Granola Corporation 2016<p>
  <div class="social">
    <a href="#"><img src="instagram-icon.png"></a>
    <a href="#"><img src="facebook-icon.png"></a>
    <a href="#"><img src="twitter-icon.png"></a>
  </div>
</footer>


Above, between <footer> and </footer>, copyright information is contained in the p element and social media links are contained within the div with class “social”.

Recourses : Codecademy

Comments

Post a Comment

Popular posts from this blog

Understanding the Event Loop, Callbacks JS

Image
  Introduction In the early days of the internet, websites often consisted of static data on an HTML page. But now that web applications have become more interactive and dynamic, it has become increasingly necessary to do intensive operations like make external network requests to retrieve  API  data. To handle these operations in JavaScript, a developer must use  asynchronous programming  techniques. The Event Loop This section will explain how JavaScript handles asynchronous code with the event loop. It will first run through a demonstration of the event loop at work, and will then explain the two elements of the event loop: the stack and the queue. JavaScript code that does not use any asynchronous Web APIs will execute in a synchronous manner—one at a time, sequentially. This is demonstrated by this example code that calls three functions that each print a number to the console: // Define three example functions function first ( ) { console ....
Read more

Overview of Google Classroom, Slack and Trello Features

Image
Hello Everyone, Today my first class in Uki. Today I learned a lot of things. In that today especially I learn about GOOGLE CLASSROOM, SLACK, and TRELLO.So in this article, we learn about those three things which I mentioned above the line. 1. GOOGLE CLASSROOM Google Classroom Google Classroom is a free web service developed by Google for schools that aims to simplify creating, distributing, and grading assignments. The primary purpose of Google Classroom is to streamline the process of sharing files between teachers and students. Features Google Classroom combines Google Drive, Google Docs, Forms and slides, and Gmail to help educational institutions use a paperless system.  Google Calendar was later integrated to help schedule deadlines, field trips, and classroom speakers. You can invite students to enter the classroom through the private database through the institution's database, and then add it to the student's user interface or automatically i...
Read more