Coming as a beginner into HTML can be difficult, especially for the amount
of default properties and behaviors that are in place and nobody tells you about it. In this article, I am going to show you how these things work, how you can modify their default behavior, and help you get a better understanding of HTML that will be useful any time there is a roadblock in the rendering of your page.
of default properties and behaviors that are in place and nobody tells you about it. In this article, I am going to show you how these things work, how you can modify their default behavior, and help you get a better understanding of HTML that will be useful any time there is a roadblock in the rendering of your page.
The rendering flow of elements inside an HTML document depends on a property called display, this property sets how the item is going to behave inside the page. There are two default values for all the elements: block and inline. Let's talk about block first, this property value sets the element to occupy all the available space in the same line. In other words, it generates a line break before and after the item so no other element renders next to it, making the next item in the code rendered below the block element.
As for inline property value, it makes the next element render where the previous one ends, creating a line of items if there is space available. However, they take only the necessary space to fit the content and their dimensions can’t be changed.
All the HTML elements have a default display value. Elements with the
block display property value include but are not limited to: <p>, <hx>, <div>, <ul>, <ol> and <form>. On the other hand, some of the elements with inline default value are: <span>, <a> and <img>. For the full list of
elements you can got the these websites for block elements and inline elements.
block display property value include but are not limited to: <p>, <hx>, <div>, <ul>, <ol> and <form>. On the other hand, some of the elements with inline default value are: <span>, <a> and <img>. For the full list of
elements you can got the these websites for block elements and inline elements.
There are a variety of display properties that can be used to change the way you document is rendered. Some of them like flex or grid are a whole world on their own, but we will focus on the simpler ones that will help you to have better control over your elements.
As we said, the default for every HTML element goes between block or inline, but there is a third display property that combines the best of both worlds. The inline-block property will allow your element to behave like an inline element, meaning that other elements can be next to it, but it will also allow you to control its height and width so you can make it as big and wide as you want. This is extremely helpful especially when you want to put images next to text without using float.
But these are not the only properties that affect the flow of the document, you can also achieve that with the position property. With it, you can place your element wherever you want without worrying about if it is inline or block. This property can take 4 values:
- Static is the default value and it means that the element is rendered with the normal flow of the page according to their display property value.
- Fixed is usually used to create navbar or sidebars that don’t disappear when you scroll the page. You can make them stick to a certain side of the window by setting the top, left, bottom, or right property to a fixed value, and you can mix and match to create your desired navbar.
- The Absolute value has various implications, the first one is that it takes the element out of the normal rendering flow of the page disregarding any display property value, meaning that the element is going to sit on top of the element that is in the top left corner. The second and the most valuable is that you can place it wherever you want by setting the top or bottom properties to move it vertically and the left or right to move it horizontally, taking the zero (initial) coordinates at the top left corner of the page.
- The last value and the most interesting one is Relative, because it allows you to move your element from where it is originally intended to be rendered, so you can do fine adjustments on the alignment of elements or straight up put an element on top of another (like a grid) to make different types of effects, you will figure it out along the way. Like the other ones you can move it using the top, left, bottom, and right properties, but it will move from its original position and not from the top left corner of the page.
Today we learned that the rendering of an HTML page is affected basically by two main properties: Display and Position, and their values determine how the elements are positioned in the document. I encourage you to tinker with them so you can use them in all your projects.
Thank you for reading this article all the way down to the end and I hope all the information presented here helped you to get a better understanding of how HTML works and will improve your building of
pages by understanding exactly why it is not rendering the way you expected it to.
pages by understanding exactly why it is not rendering the way you expected it to.
If you want to know more about the rendering flow or the display property I can recommend the Mozilla Developer Network or the CSS tricks site as great sources for any project you are working on.