{"id":8091,"date":"2022-09-27T04:23:55","date_gmt":"2022-09-27T04:23:55","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=8091"},"modified":"2022-09-27T04:23:55","modified_gmt":"2022-09-27T04:23:55","slug":"html-block-and-inline-elements","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/09\/27\/html-block-and-inline-elements\/","title":{"rendered":"HTML Block and Inline Elements"},"content":{"rendered":"\n

HTML is composed of different elements that create blocks of web pages. These elements are divided into “block-level” elements and “inline” elements.<\/p>\n\n\n\n

It is possible to change an element from block to inline or vice versa using the\u00a0CSS display\u00a0property.<\/p>\n\n\n\n

Block-level Elements<\/h2>\n\n\n\n

A block-level element is an HTML element that starts on a new line and takes up the full available width of its parent element\u2019s horizontal space. This kind of element creates blocks of content (paragraphs, page divisions). The majority of HTML elements are block-level elements.<\/p>\n\n\n\n

Block-level elements are used within the body of an HTML document and can contain inline elements, or other block-level elements.<\/p>\n\n\n\n

Example of a block-level element:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>Title of the document<\/title>\n    <style>\n      .flex-container {\n        display: flex;\n        align-items: center; \/* Use another value to see the result *\/\n        width: 100%;\n        height: 200px;\n        background-color: #1faadb;\n      }\n      .flex-container > div {\n        width: 25%;\n        height: 60px;\n        margin: 5px;\n        border-radius: 3px;\n        background-color: #8ebf42;\n      }\n    <\/style>\n  <\/head>\n  <body>\n    <div class=\"flex-container\">\n      <div><\/div>\n      <div><\/div>\n      <div><\/div>\n    <\/div>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Block-level elements:<\/th><\/tr>
<address><\/td><canvas><\/td><dt><\/td><footer><\/td><\/tr>
<article><\/td><dd><\/td><fieldset><\/td><form><\/td><\/tr>
<aside><\/td><div><\/td><figcaption><\/td><h1>-<h6><\/td><\/tr>
<blockquote><\/td><dl><\/td><figure><\/td><header><\/td><\/tr>
<hr><\/td><li><\/td><main><\/td><nav><\/td><\/tr>
<noscript><\/td><ol><\/td><p><\/td><pre><\/td><\/tr>
<section><\/td><table><\/td><tfoot><\/td><ul><\/td><\/tr>
<video><\/td><\/td><\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Inline Elements<\/h2>\n\n\n\n
Unlike block-level elements, inline elements do not start on a new line. They begin within a line and only take up as much width as it is necessary. Inline elements are included as a part of the main text.<\/p>\n\n\n\n
Inline elements commonly contain other inline elements, or they can be empty.<\/p>\n\n\n\n
Example of an inline element:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>Title of the document<\/title>\n  <\/head>\n  <body>\n    <h1>Heading <\/h1>\n    <p>This is Aleq's photo<\/p>\n    <img src=\"\/uploads\/media\/default\/0001\/01\/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg\" alt=\"Aleq\" width=\"200\" height=\"185\"\/>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Inline elements:<\/th><\/tr>
<a><\/td><br><\/td><i><\/td><object><\/td><\/tr>
<abbr><\/td><button><\/td><img><\/td><output><\/td><\/tr>
<acronym><\/td><cite><\/td><input><\/td><q><\/td><\/tr>
<b><\/td><code><\/td><kbd><\/td><samp><\/td><\/tr>
<bdo><\/td><dfn><\/td><label><\/td><script><\/td><\/tr>
<big><\/td><em><\/td><map><\/td><select><\/td><\/tr>
<small><\/td><span><\/td><strong><\/td><sub><\/td><\/tr>
<sup><\/td><textarea><\/td><time><\/td><tt><\/td><\/tr>
<var><\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"
HTML is composed of different elements that create blocks of web pages. These elements are divided into “block-level” elements and “inline” elements. It is possible to change an element from block to inline or vice versa using the\u00a0CSS display\u00a0property. Block-level Elements A block-level element is an HTML element that starts on a new line and […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[285],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/8091"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=8091"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/8091\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=8091"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=8091"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=8091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}