HTML Semantic Responsive Layout

0 174

New Semantic tags Responsive Layout Elements responsive web

in this tutorial, we will learn about New Semantic tags Responsive Layout Elements responsive web 

HTML Layout

A website can have multiple columns to show content, for designing website numbers of principle and elements used to get desired results, in another word we can say by using tags and graphics we can achieve our required result to get a useful website.

Web development

HTML
CSS
Java Script
Bootstrap
Jquery

HTML

HTML (hyper text markup language) is a markup language to create a website.

© 2015 Exception bound All Rights Reserved Contact us Terms and conditions

 

HTML website layout with Elements

we can use <div> Elements to make a layout of a html site,<div> Elements make it easy to positioning content in CSS, it is old method to make a layout but in HTML 5 new semantic tags/elements are introduced they are block level elements and mostly used to structure html web page.

HTML website layout with HTML 5

In HTML 5 new semantic tags/elements are introduced they are block level elements and mostly used to structure html web page .

New Semantic tags Responsive Layout Elements responsive web

HTML 5 new semantic tags/elements

header

Header elements will define the header of our website, we can be used either at the top of document or at the top of section, most of the website currently using single heard at the top of page called masthead, but no matter we can have multiple headers in our html web page.to group an introductory content or a set of navigational links header element used as a container.

nav(navigation)

nav elements often used for navigation links/menu to jump on other linked web pages or website. nav play a most important role in a website.in other words, it allows a user to navigate through webpage and website.

section

It is the main information bar that contains the most important information of the document. The section element represents a section of our web document, section elements similar to a div element tag but section element has more semantic meaning. In other words, section element is more meaningful as the content inside the section tags should be related.

article

The article element represents a section of content that is independent of a Web page or site content, possible sources of the article should be Blog post News story Comment Review Forum post.

aside

aside elements represent the content which is related to the main text of the web document .it is not important to have an aside aligned to the right, top, or left side of the webpage it can be in the middle, top, or at the bottom.

footer

A footer has information related to the web document. The footer is similar like to the header but mostly developer representing footer at the bottom of the web page, there can be multiple footers in an html 5 document. A footer can represent content such as author information copyright information about policy etc.

HTML Responsive

What is Responsive Website design?

New Semantic tags Responsive Layout Elements responsive web

A responsive website is that which can be deliver web pages in various screens sizes like mobile tablets and PC or laptop, now a days in market different type mobiles tablet available with different screen sizes resolutions and in pixels, to make a website responsive there are various methods can be used, to make a responsive website there are many frameworks available on the internet like foundation, bootstrap etc.

How to make responsive website with bootstrap

How to make responsive website yourself

Comments

comments

Leave A Reply

Your email address will not be published.