Important HTML elements

TL;DR / Overview

In HTML, elements are either inline or block-level. This affects how they flow on the page and how content is structured. Understanding these behaviors helps you build clean, semantic layouts in Nilead — whether using the Visual Editor or custom HTML.

Prerequisites

• Basic knowledge of HTML structure

• Access to Nilead’s Visual Website Builder or custom code editor

• Familiarity with editing content and layout elements

Walkthrough

Block vs Inline: What’s the Difference?

Common Text & Content Elements

Headings and Paragraphs

<h1>My First Page</h1> <p>This is a paragraph.</p>

• <h1> to <h6> are block elements

• <p> is a block element

• Best SEO practice: Use only one <h1> per page

Links

<a href="https://www.google.com">Go to Google</a> 
<a href="mailto:[email protected]">Email Us</a> 
<a href="#section">Jump to section</a>

• <a> is an inline element

• Can link to external URLs, emails, phone numbers, or internal anchors

Lists

<ul> 
<li>Coffee</li> 
<li>Tea 
<ol> 
<li>Black</li> 
<li>Green</li> 
</ol> 
</li> 
</ul>

• <ul> and <ol> are block elements

• <li> is block

• Nesting is allowed and useful for hierarchical data

Images

<img src="/static/img/code.jpg" width="100">

• <img> is an inline element

• Use width, height, or style for sizing

• Can be placed within paragraphs or containers

Videos

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> </video>

• <video> is an inline element

• Useful for embedding media content

• Not fully supported in very old browsers

Layout Elements

<div> – Block container

<div class="wrapper">Content goes here</div>

• Used for grouping elements

• Easily styled or scripted

• Default behavior: block

<span> – Inline container

<p>This is a <span class="highlight">highlighted</span> word.</p>

• Use for styling parts of text

• Inline, cannot hold block-level content

Tables

<table> <thead> <tr><th colspan="2">Header</th></tr> </thead> <tbody> <tr><td>Row 1</td><td>Data</td></tr> </tbody> </table>

• <table> and its children are block-level

• Should be used for tabular data, not layout

• Avoid overusing tables for page structure

Semantic Elements (HTML5)

These elements help define the purpose of content:

Use semantic elements for accessibility and SEO. Nilead supports semantic HTML for better structure.

FAQs

1. Can I nest block elements inside inline elements?
No. Inline elements should not contain block elements — it may break layout or HTML validity.

2. Can I turn a span into a block element?
Yes, using CSS: display: block; — but consider using <div> instead if that’s your intent.

3. Which should I use: <div> or <section>?
Use <div> for generic containers. Use <section> when the content has a logical purpose.

4. Are <video> and <img> block or inline?
They are inline by default, but can be styled to behave like block-level elements.

5. Can I use these elements in the Nilead Visual Editor?
Yes. Most are available directly or can be added through custom HTML blocks.