Html Building blocks

On a regular HTML page we call the building blocks HTML elements. These elements are used to build a HTML page. The elements consist of start and end tags and between those tags we put the text or graphic content.


The HTML Block-level Elements

A block level element always starts on a new line. This type of elements also always takes up the full width available on the page. This means that it extends as far as possible to the left and as far as possible to the right.


Learn more about Html Elements
Existing Block-level Elements
<addressdiv> <articlediv> <dddiv>
<asidediv> <blockquotediv> <dtdiv>
<divdiv> <dldiv> <canvasdiv>
<fieldsetdiv> <figcaptiondiv> <lidiv>
<footerdiv> <formdiv> <noscriptdiv>
<headerdiv> <figurediv> <pdiv>
<maindiv> <h1div> <tablediv>
<oldiv> <hrdiv> <videodiv>
<prediv> <navdiv> <outputdiv>
<tfootdiv> <sectiondiv> <uldiv>

The HTML Inline Elements

Unlike a Block-level element, an Inline element does not start on a new line. In addition it does not take up the entire width, but just as much width as necessary.

Existing Inline Elements

a abbr acronym
b bdo big
br button cite
code dfn em
i img input
kbd label map
object q samp
select small span
strong sub sup
textarea time tt
var    

The Empty HTML Elements

There are also HTML-elements that are has no content and these are called empty elements. An empty element that is used frequently is the element <br>. This is an empty item that has no content.

It is a good routine that also the empty elements are closed with a closing tag. It is not a requirement, but if it's to be validated or if it's to be parsed then the empty elements must also have a closing tag.

So in the case of the Break-element it would look like this: <br />


Learn more about Html Elements

Lower- or Uppercase?

Although it is not wrong and actually completely valid to use uppercase letters for tags and attributes when writing HTML the convention is to always uses lowercase letters. This is for historical reasons and goes back to XHTML days where the conversation was completely strict and where uppercase letters were not valid.

Both <div> and <DIV> are valid but <div> is preferred.


BACK TO TOP






Check this out

HTML: Methods for Rest Services

There are many available HTTP methods. Have you ever wondered what is the difference between the GET and the POST requests? When should you use PUT and DELETE?


Continue reading to get a basic understanding of RESTful services and t....

HTML: Comments

Comments are parts of the code that are ignored by a browser. To explain and define section parts of a document to others who see the code, it's a good practice to add comments to your HTML code. Especially in complex documents. To increase the readability of the code and help others understand t....

HTML: Input Attributes

In HTML, one of the most powerful and complex elements is the <Input> element. The reason is the large number of combinations of input types and attributes. Regardless of the type, all <input>-elements are based on the HTMLInputElement interface and that mean....

HTML: Forms

The HTML <form> element is used to collect user input and post it back to the server.

The <form> is a block-level element and it defines an interactive part of a webpage. All controls inside the <form> will be posted back to th....


BACK TO TOP
HTML is a markup language used to make web pages. HTML5 is the latest version of Hypertext Markup Language. The cornerstone technologies for a webpage are HTML, which provides the structure. Cascading Style Sheets (CSS), which take care of presentation. And JavaScript, which makes things happen.

Thanks to HTML5, web pages can now store data locally on the users browser, then you dont need to use HTTP cookies. Now content can be delivered faster and more securely. HTML5 has also made it easier to ensure consistency across all browsers. Since browsers have traditionally relied upon different plugins to play multimedia files, native support of video and audio allows developers to avoid compatibility issues. New attributes also allow for video controls including play, pause, and volume options.

HTML4 was the standard for about 15 years and many still use it, all browsers will continue to support it for a very long time. Likewise, older browsers can 'overlook' new HTML5 code while rendering content. Virtually all modern browsers support HTML5 specifications fairly well.

You can use HTML5test to run a test with your current browser to see what it scores in terms of HTML5 support.

BACK TO TOP

Need more Honney

NDC Conferences

The NDC Conferences (Norwegian Developers Conference) are one of the world`s largest independent software conferences for .NET & Agile development. The conference covers everything you need to know within software development. The conferences are held each year in many places such as Oslo, Copenhagen, London, Sydney and Minnesota.

Update Conference Prague

Update Conference Prague is the biggest developer conference in the Czech Republic. The conference is offering sessions delivered by the top experts from all around the world. Their goal is to inspire the attendees and enrich their knowledge.

Troy Hunt

Learn about Web Security from Troy Hunt. He is a really engaged speaker that frequently give talks on conferences around the world. Troy is a Microsoft MVP and you can even learn from him on some great courses on Pluralsight.

W3Schools

W3Schools.com is a great education Web Site for learning web technologies. On W3Schools you may find well organized basic to advanced tutorials and references.

Scott Hanselman

Learn about Web Technologies and new trends from Scott Hanselman. Scott Hanselman is an author of developer books and he is an engaged speaker that usually talks about the Microsoft stack. You may meet Scott on conferences around the world.

Developer Week

DeveloperWeek is one of the world’s largest developer conferences. Developer Week focus on new dev technologies, the conference have talks and workshops for newbies and experienced audience. You can attend on a Developer Week conference different places in Nothern America.


BACK TO TOP

Honneybag blog



Learn JavaScript Debugging

Searching for bugs and fixing them is called code debugging. The bugs might be difficult to diagnose and therefore it is important to have a good approach to find and fix the bugs effectively. Bugs in the code might be syntax errors or logical errors. Sometimes nothing happens when the code contains bugs and there is few indications where to search. Modern web browser includes a powerful suite of developer tools. The tools do a range of things...

Explore JavaScript Arrays

Arrays are frequently used by developers. Programming languages can have slightly different implementation of arrays. An array is an object that can store a collection of items. You may say it`s a special variable that can have more than one value. The array holds many values under a single name, and you may access the values by referring to an index number. The easiest way to create....

Ultimate Guide to HTML Colors

It is essential to give the user a good user experience. There are many things you should focus on, one of them is how you use colors on your website. We don't have to struggle with black and white TVs anymore. Users expect more and more and we can apply colors to everything we want. Texts, borders, backgrounds, shadows – in HTML they all can have whatever color you decide....

Wanna be a sheep? Check out the most popular subjects
HONNEYBAG BLOG
HTML FORMATTING
HONNEYBAGBLOG INSPIRE-AND-BE-INSPIRED
HTML ESSENTIALS
HONNEYBAGBLOG HOW-TO-USE-BROWSER-DEVELOPER-TOOLS
Wanna be a little different? Check out the less popular subjects
HONNEYBAG BLOGER
HTML INTRODUCTION
HTML ESSENTIALS
HTML ESSENTIALSWE
JAVASCRIPT BREAKER
BACK TO TOP