The Student Room Group

Higher Computing Science

I just recently started this course and we are doing the web developing section, using html and css.

We were looking at how to make the main frame of a web page (Where the images goes, text goes). We were introduced to the div tag and nav tag but what exactly is their function ?
The <div> tag defines a division or a section in an HTML document.The <div> tag is used to group block-elements to format them with CSS.
The <nav> tag defines a set of navigation links.Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.
<div> tags can be viewed as containers. They are used to group certain elements of a web page together. For example, a basic HTML document might look like:

<html>
<head>
</head>
<body>
<div id="container">
<div id="header">
// You'd place your page header here
</div>
<div id="content">
// You'd place your page content here
</div>
<div id="footer">
// You'd place your footer here
</div>
</div>
</body>
</html>

As you can see, there are 4 div elements. The first encapsulates all the elements within the page. The second encapsulates all of the header elements. Third, all of the content elements. And lastly, all of the footer elements.

Without style, this doesn't look like much. But, adding style to a div element (even if it's something as simple as a background color, positioning, and some borders) will bring the page to life and it will start looking a little more like an actual web page.

The nav tag is used to mark a set of links as the main navigation links for the page.

Hope this helps :biggrin:
Reply 3
Original post by life.of.pablo
The <div> tag defines a division or a section in an HTML document.The <div> tag is used to group block-elements to format them with CSS.
The <nav> tag defines a set of navigation links.Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.


THANKS :biggrin:

Original post by sameehaiqbal
<div> tags can be viewed as containers. They are used to group certain elements of a web page together. For example, a basic HTML document might look like:

<html>
<head>
</head>
<body>
<div id="container">
<div id="header">
// You'd place your page header here
</div>
<div id="content">
// You'd place your page content here
</div>
<div id="footer">
// You'd place your footer here
</div>
</div>
<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"6d735935d6","applicationID":"3122487,3122488","transactionName":"ZFQAZkYFX0tYU0JZW10eN0BdS1BSWEgYQFxD","queueTime":0,"applicationTime":72,"atts":"SBMDEA4fTEU=","errorBeacon":"bam.nr-data.net","agent":""}</script></body>
</html>

As you can see, there are 4 div elements. The first encapsulates all the elements within the page. The second encapsulates all of the header elements. Third, all of the content elements. And lastly, all of the footer elements.

Without style, this doesn't look like much. But, adding style to a div element (even if it's something as simple as a background color, positioning, and some borders) will bring the page to life and it will start looking a little more like an actual web page.

The nav tag is used to mark a set of links as the main navigation links for the page.

Hope this helps :biggrin:


Wow, that really helps. We have been looking at website wireframes and our task is to make the wire frame using html and css, I never really understood what the div tag did but now I do :biggrin:
You never fail to give me a great explanation !
(edited 7 years ago)

Quick Reply

Latest

Trending

Trending