Block-level vs. inline elements
In HTML5 web page development, semantic tags or elements are mainly divided into two types of tag elements, which are defined as block-level elements or inline tag elements. Where in HTML5 web page website, block level and inline tags are used to design and develop the desired web page structure and layout.
So, let’s know block-level and inline tags in HTML5.
HTML5 Block-Level Elements.
HTML5 Block Level Characteristics.
- Display Behaviour – In HTML5 web page, block-level tags are used to create new block elements in the web page, here block level tags in the web page are started from a new line, where block level element tag creates a block or container for the related tags.
- Formatting – Block level elements in HTML5 are self-formatted, where they self-justify text elements, and create margins and auto spaces between web page text information based on the tags used, which are defined or displayed separately during display on the web page.
- Protection – In block-level elements in a web page created in HTML5, you can adjust many block and inline tags or elements as per the need.
Popular block-level elements in HTML5.
- <div> tag – In HTML5 web pages, text content information is grouped to create paragraph block containers and CSS styles attributes are applied.
- <header> tag – Header text, menus, navigational links, text and information are displayed in the top header portion of an HTML5 web page.
- <footer> tag – Previews website rights, legal info, and copyright symbol in a particular area website bottom in HTML5 web page.
- <section> tag – Previews section block with section title information in HTML5 web page.
- <article> tag – Represents a block of text information in HTML5 web page as a self-contained information holder.
- <p> tag – Can create single and multiline paragraph text block paragraphs in HTML5 web page.
- <h1> to <h6> tag – Previews text paragraph headings in HTML5 web page from heading 1 to heading 6 in text format order from largest font size to smallest font size.
- <ul>, <ol>, <li> tag – Creates numbered and bulleted list items in HTML5 web page, ordered and unordered list items.
Block level tag examples in HTML5.
<!DOCTYPE html>
<html>
<body>
<div>
<h1>Div Tag</h1>
<p>Let Explore Div Container To Preview Some Text</p>
<ul>
<li>Html</li>
<li>Xhtml</li>
<li>Xml</li>
<li>Html5</li>
</ul>
</div>
</body>
</html>
Remember, block-level tags (<h1>, <article>, <p>, and <ul>) in HTML5 web pages always start on a new line, these tags are automatically adjusted or justified in the web page, due to which the web page tag text automatically moves to the next line.
Inline tags or elements in HTML5.
HTML5 Inline tags attributes.
- Display behaviour – Inline tags in HTML5 web pages do not start on a new line, and they are created within any other inline level tag, they take only as much space as they are defined.
- Formatting – Inline tags do not create space before and after tags.
- Containment – Inline tags in HTML5 web pages are not defined with block-level elements, while you can use other inline elements in them.
HTML5 Inline tags attributes.
- <span> tag – It is a data container to apply style to a particular area of text or inline text information in an HTML5 web page.
- <a> tag – Creates single or multiple hyperlinks in a web page text object in an HTML5 web page.
- <b> tag – Previews the web page text information in bold nature.
- <i> tag – Previews the current web page particular text information in italic slightly vertical down order.
- <strong> tag – It previews like bold tag, where strong text is displayed separately from normal text.
- <em> tag – Previews the web page text in italic order like emphasis tag italic tag.
- <img> tag – In an HTML5 web page, the desired image, graphic, is inserted or embedded in the web page with the image tag.
Inline tags example in HTML5.
<p>This Text Is <b>bold</b> This Text Is <i>italic</i> You Can See Bold And Italic Text Effect Same Time. </p>
<a href=”https://vcanhelpsu.com”>Open Vcanhelps</a>
Block Level and Inline Element Difference in HTML5.
- Performance – In HTML5 block-level tags always start with a new line, whereas HTML5 inline tags do not start with a new line, and they automatically adjust to the web page.
- Containment – In HTML5 block-level tag elements can declare or use other block-level and inline elements, whereas in HTML5 inline tags can only contain other inline elements.
- Usage – Block-level elements in HTML5 are used to design or modify the structure of a web page layout section, whereas inline elements are used to format or decorate new tags or content elements within block-level elements.
HTML5 Block-Level Tag Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>HTML5 Block-Level Element</title>
<style>
div {
font-family: times new roman;
font-size:1.2em;
background-color: yellow;
padding: 10px;
margin: 17px 0;
}
h1 {
color: red;
}
</style>
</head>
<body>
<div>
<h1>Let Tray Some Block Level Element</h1>
<p>This Is The Block Level Tag Eample, You Can See Some Block Level Tag Here</p>
</div>
<div>
<p>You Can Display Some Other Block Level Tag Here</p>
</div>
<div>
<p>This Is Another Block Level Div Tag</p>
</div>
</body>
</html>
HTML5 Inline Tag Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>HTML5 Inline Elements </title>
<style>
p{
color:blue;
font-size:1.3em;
font-family:bookman old style;
}
.highlight {
font-family:arial;
background-color: aqua;
}
</style>
</head>
<body>
<p>Let We Tary Some Inline Tag <strong>This Is Strong Webpage Text</strong>, <em>This Is Italic Webpage Text</em>, This Is A Hyperlink Text <a href=”https://vcanhelpsu.com”>Open Vcanhelpsu.com</a>. The word <span class=”highlight”>Text highlighted Preview</span> All Above Declare As Inline Tag.</p>
</body>
</html>
