Jared Heinrichs

  • Technology Blog
  • Winnipeg Computer Repair
  • Winnipeg Photographer
  • Cooking With Jared
You are here: Home / Programming / HTML / The difference between Block and Inline HTML elements

Jan 31, 2010 By Jared Heinrichs Leave a Comment

The difference between Block and Inline HTML elements

I “kind of” knew what block elements were but I thought that I should research them. Searching the net I think I have found some good definitions. Basically there are 3 types of elements you can have on a page.

  1. Block
  2. Inline
  3. Not Displayed

 

Block Elements

A block-display element will span the full width of the space available to it, and so will start on a new line in the flow of HTML. The flow will continue on a new line after the block-display element.

To define an element as a block you can do it in CSS by typing:

display:block;

 

Common HTML elements that are naturally block-display include:

  • <div>
  • <h1> … <h6>
  • <p>
  • <ul>, <ol>, <dl>
  • <li>, <dt>, <dd>
  • <table>
  • <blockquote>
  • <pre>
  • <form>

Inline Elements

Inline-display elements don’t break the flow. They just fit in with the flow of the document.

To define an element as an inline you can do it in CSS by typing:

display:inline;

 

More elements are naturally inline-style, including:

  • <span>
  • <a>
  • <strong>
  • <b>
  • <em>
  • <i>
  • <img />
  • <br>
  • <input>
  • <abbr>
  • <acronym>

Can you imagine a “<a>” tag being a BLOCK element? I can’t. That would suck if all links had to be on a new line all by themselves!

Not Displayed

Some tags, like <meta /> and <style> are not visible

Filed Under: HTML

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Board Game Rules
  • Camera
  • Computer Hardware
    • Blackberry
    • drivers
    • iPad
    • Magic Jack
    • USB
  • Damn Small Linux
  • Exam Notes
  • Facebook
  • FREE Flashcards
  • Games
    • PC
      • League of Legends
    • Wii
    • xbox 360
  • Music
  • Networking
    • Cisco Certification
    • Mitel
    • Palo Alto Firewall
  • News
    • Google
    • Microsoft
  • Operating System
    • Active Directory (2003)
    • Android
    • Command Prompt
    • Damn Small Linux
    • Group Policy
    • Hyper-V
    • IIS
    • ISA 2006
    • Mac OS X
    • Microsoft Exchange Server
    • Powershell
    • Security
    • SME Server
    • Terminal Server 2003
    • Ubuntu Linux
      • Adito Web SSL VPN
      • OpenVpn-als
      • Webmin
    • Virtual Machine Manager
    • Windows 2003 SBS
    • Windows 2003 Server
    • Windows 2008
    • Windows 2008 R2
    • Windows 2012R2
    • Windows 7
    • Windows 8
    • Windows Command Line
    • Windows Deployment Services
    • Windows Server Backup
    • Windows Vista
    • Windows XP
  • Phones
  • Photography
  • Photos
    • Animals
    • Misc
    • Nature
    • Portraits
  • Portfolio
  • Programming
    • CSS
    • HTML
    • jQuery
    • MySQL
    • PHP
    • Script
  • Programs
    • Acrobat
    • Acrobat Reader
    • Adobe Dreamweaver
    • Adobe Illustrator
    • Adobe Photoshop
    • Anti-virus Software
    • Antivirus
    • Backup Exec
    • Bittorent
    • Blackberry BESADMIN
    • Internet Explorer 9
    • Lightroom
    • Microsoft Office
    • Netbeans
    • Onenote
    • Outlook
    • Shelby
    • Sysprep
    • Trend
    • Video Editing
    • Visual Studio
    • Windows Live Writer
    • WireShark
    • XP Mode
    • Zarafa
  • Recipe
  • Review
  • Software Links
  • Troubleshooting
  • Uncategorized
  • Videos
  • Web Applications
    • Brage
    • Google
    • Spiceworks
    • Wordpress
  • Web Browsers
    • Internet Explorer
  • Web Server
    • XAMPP
  • Winnipeg
    • ISP

Try searching this site!

Copyright © 2021 Winnipeg Web Design