An HTML element is defined by a start tag, some content, and an end tag.
<p>This is paragraph text. <a href="https://www.google.com/">This is a link to the Google homepage.</a> This is more text.</p>This is paragraph text. This is a link to the Google homepage. This is more text.
<p>: This is the opening tag for a paragraph element.This is paragraph text.: This is plain text inside the paragraph.<a href="https://www.hubspot.com/">This is a link to the HubSpot homepage.</a>: This is an anchor (<a>) element, which creates a hyperlink. Thehrefattribute specifies the URL that the link points to, in this case, “https://www.hubspot.com/“. The text between the opening and closing anchor tags is the visible link text, which in this case is “This is a link to the HubSpot homepage.”This is more text.: This is additional plain text inside the paragraph.</p>: This is the closing tag for the paragraph element.
Block-level element:
- These are the elements, which structure main part of web page, by dividing a page into coherent blocks.
- A block-level element always start with new line and takes the full width of web page, from left to right.
- These elements can contain block-level as well as inline elements.
Following are the block-level elements in HTML.
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h5>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color: lightblue">This is first div</div>
<div style="background-color: lightgreen">This is second div</div>
<p style="background-color: pink">This is a block level element</p>
</body>
</html> This is a block level element
Explanation
<!DOCTYPE html>: Same as before, this declares that the document type is HTML5.<html>: Begins the HTML document.<head>: Starts the head section of the document. In this case, it’s empty.</head>: Ends the head section.<body>: Begins the body section of the document.<div style="background-color: lightblue">This is first div</div>: This creates a<div>element with a light blue background color. The text inside the<div>is “This is first div”.<div style="background-color: lightgreen">This is second div</div>: Similar to the previous line, this creates another<div>element, but with a light green background color. The text inside this<div>is “This is second div”.<p style="background-color: pink">This is a block level element</p>: This creates a<p>(paragraph) element with a pink background color. The text inside the<p>is “This is a block level element”.</body>: Ends the body section.</html>: Ends the HTML document.
<h2>This is a page heading</h2>
<p>This is a paragraph. Here's an ordered list:</p>
<ol>
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ol>This is a page heading
This is a paragraph. Here's an ordered list:
- item one
- item two
- item three
Explanation
<h2>: This is a heading level 2 element, indicating that “This is a page heading” is a secondary heading for the page.<p>: This is a paragraph element containing the text “This is a paragraph. Here’s an ordered list:”.<ol>: This is an ordered list element. Inside it, there are three list items (<li>):<li>item one</li><li>item two</li><li>item three</li>
Each list item contains a different item in the list. The ordered list will automatically number each item in sequence (1, 2, 3, etc.).
Inline elements:
- Inline elements are those elements, which differentiate the part of a given text and provide it a particular function.
- These elements does not start with new line and take width as per requirement.
- The Inline elements are mostly used with other elements.
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="https://www.javatpoint.com/html-tutorial">Click on link</a>
<span style="background-color: lightblue">this is inline element</span>
<p>This will take width of text only</p>
</body>
</html> Explanation
<!DOCTYPE html>: This declares the document type as HTML5.<html>: Begins the HTML document.<head>: Starts the head section of the document. In this example, it’s empty.</head>: Ends the head section.<body>: Begins the body section of the document.<a href="https://www.javatpoint.com/html-tutorial">Click on link</a>: This creates a hyperlink (anchor)<a>element with the text “Click on link”. Thehrefattribute specifies the URL that the link points to, in this case, “https://www.javatpoint.com/html-tutorial“.<span style="background-color: lightblue">this is inline element</span>: This creates a<span>element with the text “this is inline element”. Thestyleattribute applies inline CSS to set the background color to light blue.<p>This will take width of text only</p>: This creates a paragraph<p>element with the text “This will take width of text only”. Paragraph elements typically take up the full width of their containing element.</body>: Ends the body section.</html>: Ends the HTML document.
<p id="p1">This is a paragraph with some <strong>bolded text</strong> and some <em>emphasized text</em> inside it.</p>
<p id="p2">This is a paragraph with a <a href="https://www.google.com/"> link to the Google homepage</a>.</p>
<p id="p3">This is a paragraph with a button! <button>Click Me</button> (It doesn't do anything, sorry.)</p>This is a paragraph with some bolded text and some emphasized text inside it.
This is a paragraph with a link to the Google homepage.
This is a paragraph with a button! (It doesn't do anything, sorry.)
Explanation
<p id="p1">: This is a paragraph element with an ID attribute set to “p1”. IDs are used to uniquely identify elements in HTML.- Inside this paragraph, there is plain text along with:
<strong>: This is a strong emphasis element, making the text “bolded text” bold.<em>: This is an emphasis element, making the text “emphasized text” italicized.<p id="p2">: This is another paragraph element with an ID attribute set to “p2”.- Inside this paragraph, there is plain text along with:
<a href="https://www.gmail.com/">: This is an anchor element (link) with an href attribute linking to “https://www.google.com/“. The text inside the anchor element is “link to the Google homepage”.
<p id="p3">: This is the third paragraph element with an ID attribute set to “p3”.- Inside this paragraph, there is plain text along with:
<button>: This is a button element with the text “Click Me” inside it. However, it doesn’t have any functionality associated with it in this case.
