11

Web Design and

Development I
CMP 122

NASARAWA STATE UNIVERSITY, KEFFI, NIGERIA

HTML Elements Cont’d

Block-level Elements
 Block-level Elements
A block-level element always starts on a new line, and the browsers
automatically add some space (a margin) before and after the element.

A block-level element always takes up the full width available

(stretches out to the left and right as far as it can).

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML

document.
 Block-level Elements
Other block-level elements in HTML:
◼ <address> ◼ <h1>-<h6>
◼ <article> ◼ <header>
◼ <aside> ◼ <hr>
◼ <blockquote> ◼ <li>
◼ <canvas> ◼ <main>
◼ <dd> ◼ <nav>
◼ <div> ◼ <noscript>
◼ <dl> ◼ <ol>
◼ <dt> ◼ <p>
◼ <fieldset> ◼ <pre>
◼ <figcaption> ◼ <section>
◼ <figure> ◼ <table>
◼ <footer> ◼ <tfoot>
◼ <form> ◼ <ul>
◼ <video>
 HTML <Div> Element
The <div> tag defines a division or a section in an HTML document.

The <div> tag is used as a container for HTML elements - which can
be then styled with CSS or manipulated with JavaScript.

The <div> tag is easily styled by using the class or id attribute.

Any type of content can be put inside the <div> tag, including other
elements
Important note: By default, browsers always place a line break before
and after the <div> element.
 HTML <Div> Element
HTML <div> element is one of the most powerful elements that have
much applicability in web design.
i. HTML <div> element can be used as follows:
ii. It can be used to represent a bloc of the structure of an HTML
document
iii. It can be used to form cascaded blocs that represent the
substructure of an HTML document
iv. It can be crafted to design the layout of a web page thereby
structuring the ‘look and feel’ of a web page
v. The <div> element allows many other elements within its bloc.
 HTML <Div> Element
<div> Web page </div> represents a bloc.

<div> <div>Web page </div></div> represents 2 blocs.

Web page
 HTML <Div> Element
<div>
<div>
Div 1
</div>
<div>
Div 2
</div>
</div>

Div 1

Div 2
 HTML <Div> Element
<div>
<div>
<p> Web page </p>
</div>
<div>
<h1> Website<h1>
</div>
</div>

Web page

Website
 HTML <Div> Element Attributes
HTML <div> has attributes that extend its functionality

Attributes provide additional information about elements

Attributes are always specified in the start tag
Attributes usually come in name/value pairs e.g.: name="value"

<div name=“value”>
The purpose is to enhance the behaviour of the
div element

</div>
 HTML <Div> Element Attributes

<div id=“container”>
The id attribute provides a unique identity for the div element so
that it can dynamically be manipulated to enhance its
behaviour

</div>
 HTML <Div> Element Attributes

<div style=“width:28px; height:28px”>

The style attribute specifies an inline style for an element
including the div. The style attribute will override any style set
globally, e.g. styles specified in the <style> tag or in an external style
sheet.

</div>
 HTML <Div> Element Attributes

<div style="color:blue;text-align:center”>
The style attribute here specifies the background colour of the
container.

</div>
The div element takes every global attribute to enhance its usability
14

We will either find a path or create one

If we cannot find a solution, then it is not a problem

Uche M. Mbanaso Ph.D.

Assoc. Professor, Cybersecurity and Computing
© umm, 2023
NASARAWA STATE UNIVERSITY, KEFFI, NIGERIA