HTML has special elements that serve to group other elements. Thus it is made possible to group logically related elements, which will be located in the same part of the page, to be positioned along and the like. There are tags that serve to surround and other types of elements such as:
The difference between <div> and <span> tags is that a div (division) element is block line (which is basically equivalent to having a line break before and after it) and is used to group larger pieces of code and a span element is inline and usually used for a small piece of HTML inside a line (for example, inside a paragraph).
Example:
HTML code
<!DOCTYPE html>
<html>
<head>
<title>HTML - grouping elements</title>
<meta charset="UTF-8"/>
<meta name="description" content="This page is about HTML - grouping elements" />
<meta name="keywords" content="HTML grouping elements, html, html elements" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="header">
<h1>Motorcycles</h1>
</div>
<div id="menu">
<span class="selected"><a href="under-2500.html" class="inner">under $2500</a></span>
<span><a href="2501-3500.html">$2501-$3500</a></span>
<span><a href="over-3500.html">over $3500</a></span>
</div>
<div id="navigation">
<a href="suzuki.html">Suzuki</a><br />
<a href="honda.html">Honda</a><br />
<a href="ktm.html">KTM</a>
</div>
<div id="section">
<h2>Suzuki</h2>
<p class="read">Suzuki Motor Corporation is a Japanese multinational corporation headquartered in Minami-ku, Hamamatsu, Japan, which specializes in [...] <a href="suzuki.html">read more</a></p>
<h2>Honda</h2>
<p>Honda Motor Co., Ltd. is a Japanese public multinational corporation primarily known as a manufacturer of automobiles, motorcycles and [...] <a href="honda.html">read more</a></p>
<h2>KTM</h2>
<p>KTM-Sportmotorcycle AG is an Austrian motorcycle manufacturer, which was formed in 1992 but traces its foundation as early as in 1934 [...] <a href="ktm.html">read more</a></p>
</div>
<div id="footer">
<strong>© 2016. Your Name</strong>
</div>
</body>
</html>
Save this file as grouping-elements.html.
CSS code
body {
background-color: #A1D490;
}
#header {
background-color: darkgreen;
color:white;
text-align:center;
padding-top: 15px;
}
h1 {
padding-bottom: 15px;
}
#menu {
padding-bottom: 25px;
}
.selected a {
background-color: darkgreen;
font-size: 18px;
color: white;
text-decoration: none;
}
.inner {
padding: 10px;
}
#navigation {
line-height:30px;
background-color:#5E964B;
height:300px;
width:100px;
float:left;
padding-top: 10px;
padding-left: 10px;
}
#navigation a {
color: white;
text-decoration: none;
}
#navigation a:hover {
color: darkgreen;
}
#section {
width:650px;
float:left;
padding:10px;
}
.read a:hover {
color: darkgreen;
text-decoration: none;
}
#footer {
color:darkgreen;
position: absolute;
bottom: 0;
text-align:center;
width: 1350px;
padding-bottom: 10px;
}
Save this file as style.css.
Result:
Some of the HTML5 elements:
- <div> - element which divides ie. grouping other HTML elements. The most commonly is used to define the layout of elements on the page - layout.
- <span> - an element which by default does not affect the position of the elements that surround. It is mainly used so that elements that are contained in it, assigns some look.
The difference between <div> and <span> tags is that a div (division) element is block line (which is basically equivalent to having a line break before and after it) and is used to group larger pieces of code and a span element is inline and usually used for a small piece of HTML inside a line (for example, inside a paragraph).
Example:
HTML code
<!DOCTYPE html>
<html>
<head>
<title>HTML - grouping elements</title>
<meta charset="UTF-8"/>
<meta name="description" content="This page is about HTML - grouping elements" />
<meta name="keywords" content="HTML grouping elements, html, html elements" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="header">
<h1>Motorcycles</h1>
</div>
<div id="menu">
<span class="selected"><a href="under-2500.html" class="inner">under $2500</a></span>
<span><a href="2501-3500.html">$2501-$3500</a></span>
<span><a href="over-3500.html">over $3500</a></span>
</div>
<div id="navigation">
<a href="suzuki.html">Suzuki</a><br />
<a href="honda.html">Honda</a><br />
<a href="ktm.html">KTM</a>
</div>
<div id="section">
<h2>Suzuki</h2>
<p class="read">Suzuki Motor Corporation is a Japanese multinational corporation headquartered in Minami-ku, Hamamatsu, Japan, which specializes in [...] <a href="suzuki.html">read more</a></p>
<h2>Honda</h2>
<p>Honda Motor Co., Ltd. is a Japanese public multinational corporation primarily known as a manufacturer of automobiles, motorcycles and [...] <a href="honda.html">read more</a></p>
<h2>KTM</h2>
<p>KTM-Sportmotorcycle AG is an Austrian motorcycle manufacturer, which was formed in 1992 but traces its foundation as early as in 1934 [...] <a href="ktm.html">read more</a></p>
</div>
<div id="footer">
<strong>© 2016. Your Name</strong>
</div>
</body>
</html>
Save this file as grouping-elements.html.
CSS code
body {
background-color: #A1D490;
}
#header {
background-color: darkgreen;
color:white;
text-align:center;
padding-top: 15px;
}
h1 {
padding-bottom: 15px;
}
#menu {
padding-bottom: 25px;
}
.selected a {
background-color: darkgreen;
font-size: 18px;
color: white;
text-decoration: none;
}
.inner {
padding: 10px;
}
#navigation {
line-height:30px;
background-color:#5E964B;
height:300px;
width:100px;
float:left;
padding-top: 10px;
padding-left: 10px;
}
#navigation a {
color: white;
text-decoration: none;
}
#navigation a:hover {
color: darkgreen;
}
#section {
width:650px;
float:left;
padding:10px;
}
.read a:hover {
color: darkgreen;
text-decoration: none;
}
#footer {
color:darkgreen;
position: absolute;
bottom: 0;
text-align:center;
width: 1350px;
padding-bottom: 10px;
}
Save this file as style.css.
Result:
Some of the HTML5 elements:
- <header> - for the header or some other sections.
- <nav> - which contains navigation links to other pages or to sections within the same page.
- <menu> - represents a group of elements (links, buttons) by which a user can perform an action.
- <article> - the text of an article, news or documents. In this element you should put the main text content of page.
- <aside> - contains additional information that should stand on the side (notes or explanations of the main text, which is in the <article> tag).
- <section> - surrounds several blocks that have related content.
- <footer> - represents a group of elements that are at the bottom of the page.
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.