HTML Block and Inline Elements
Every HTML element has a default display value depending on what type of element it is.
The two display values are: block and inline.
Block-level Elements
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
Example:
Block level elements in HTML:
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure><footer> <form> <h1>-<h6> <header> <hr> <li><main> <nav> <noscript> <ol> <p> <pre><section> <table> <tfoot> <ul> <video>
Inline Elements
An inline element does not start on a new line and only takes up as much width as necessary.
This is an inline <span> element inside a paragraph.
Example:
Inline elements in HTML:
<a> <abbr> <acronym> <b> <bdo> <big> <br><button> <cite> <code> <dfn> <em> <i> <img><input> <kbd> <label> <map> <object> <output> <q><samp> <script> <select> <small> <span> <strong> <sub><sup> <textarea> <time> <tt> <var>
The <div> Element
The <div> element is often used as a container for other HTML elements.
The <div> element has no required attributes, but style, class and id are common.
When used together with CSS, the <div> element can be used to style blocks of content:
Example:
The <span> Element
The <span> element is often used as a container for some text.
The <span> element has no required attributes, but style, class and id are common.
When used together with CSS, the <span> element can be used to style parts of the text.
Example:
HTML The class Attribute
The class is an attribute which specifies one or more class names for an HTML element.
The class attribute can be used on any HTML element.
The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name.
Example:
Using The class Attribute on Inline Elements
The HTML class attribute can also be used on inline.
Note:- The class name is case sensitive!
Multiple Classes
HTML elements can have more than one class name, each class name must be separated by a space.
Example:
Different Tags Can Share Same Class
Different tags, like <h2> and <p>, can have the same class name and thereby share the same style:
Example:
HTML The id Attribute
The id attribute is a unique identifier which is used to specify the document. It is used by CSS and JavaScript to perform a certain task for a unique element. In CSS, the id attribute is used using # symbol followed by id.
Example:
Note:- The id value is case-sensitive.
The id value must contain at least one character, and must not contain whitespace (spaces, tabs, etc.).
Difference Between Class and ID
An HTML element can only have one unique id that belongs to that single element, while a class name can be used by multiple elements.
Example:
Bookmarks with ID and Links
HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
Bookmarks can be useful if your webpage is very long.
To make a bookmark, you must first create the bookmark, and then add a link to it.
When the link is clicked, the page will scroll to the location with the bookmark.
Using The id Attribute in JavaScript
JavaScript can access an element with a specified id by using the getElementById() method:
Example:
HTML Iframes
An iframe is used to display a web page within a web page.
An HTML iframe is defined with the <iframe> tag.
Syntax:- <iframe src="URL"></iframe>
The src attribute specifies the URL (web address) of the inline frame page.
Iframe - Set Height and Width
Use the height and width attributes to specify the size of the iframe.
The height and width are specified in pixels by default.
Example:
Or CSS can be used to set the height and weidth of the iframe.
Example:
Iframe - Remove the Border
By default, an iframe has a border around it.
To remove the border, the style attribute is added and the CSS border property is used.
Example:
With CSS, the size, style and color of the iframe's border can also be changed.
Example:
Iframe - Target for a Link
An iframe can be used as the target frame for a link.
The target attribute of the link must refer to the name attribute of the iframe.
Example:
If you like Codersarts blog and looking for Assignment help,Project help, Programming tutors help and suggestion you can send mail at contact@codersarts.com.
Please write your suggestion in comment section below if you find anything incorrect in this blog post
