HTML document structure
An HTML document consists of three top-level elements; Document type, root-element which consists of head and body sections. The document looks like this.
<!doctype html> <html> <head> <!-- here is information for browser --> </head> <body> <!-- here is content for the user --> </body> </html>
The doctype instruct browser to handle all content that follows as is described in HTML specification. This is and should always be the first row in your HTML document.
The head -section is the place to give all kinds of information for the browser. Like – what character encoding is used, what is the title of this page, what styles or scripts are loaded and other meta -information. This is not a place for user-visible content. Well, only the
<title> -element would be as it is the content shown on the browser tab.
In this section, you construct the layout and content of HTML -page. This is the place where you build the page content using all the HTML -elements.
HTML elements to know
You need to understand the types and roles of elements. You only need to know these most important elements to start as a web developer. HTML elements are divided into groups according to their usage. Some of the elements are used only inside the
<head> -element and others take care of creating the content.
This is not a full list of all HTML -elements but a list of the ones you most likely need.
Understand and learn these:
Document & head section
<!doctype>, <html>, <head>, <title>, <link>, <meta>, <style>, <script>
Sectioning & structuring body content
<body>, <header>, <footer>, <article>, <section>, <nav>, <main>, <h1>-<h6> -headings
<div>, <p>, <pre>, <blockquote>, lists like
<ul> & <ol>
Text level elements
<a>, <em>, <strong>, <span>, <code>
<img>, <iframe>, <video>, <source>
<form>, <label>, <input>, <textarea>
So these are my selected list of elements you should know. There are more but with these, you get a long way and understanding them helps you learn the rest when the time comes. If you want to read more, visit html5doctor.com or MDN web docs.
Remember, elements do not have a predefined style of HTML. All styling is done with CSS. That’s something I’m going to write in another article. Still, you need to understand how elements behave in browsers when a browser is laying out the content.
Element types: block & inline
HTML elements are divided into two main categories: Block -elements and inline -elements. This is something you can and should utilize also in laying out content on web page. Use the defaults as your friend. Always remember that when browsers are rendering web pages they give room for element content – not the element! As a default, all space around content is added “afterward” so they may move elements in reference to each other. CSS rule
box-sizing: border-box; will include padding and border to element size but not margins.
Block -elements will always have a full width of their parent element no matter how wide the actual content is. Let’s think about a simple example. A
<h1> -element inside
<body> -element. The body is the same width as browser window and as a block -element, h1 will occupy the whole width of a page. No matter how short the content is. Block -elements are always laid out on top of each other.
Inline -elements are something that is laid out side by side as long as there is enough room. If an element content + its padding, border, and margin do not fit, a browser will start “a new row” underneath the previous elements. Inline -elements behave like words when writing from left to right with no hyphenation.
Utilizing element types in page layout
You should utilize this behavior when planning website layout. The method is as easy as starting to create a mobile layout with all elements in one column. The layout is created automatically with block -elements. Then create CSS styling for your page and all elements to finish the design.
Adding responsive behavior to layout
After you have a ready styled mobile page, stretch the page and when the design starts to look bad, add a CSS media query and start laying elements yourself. Using floats is simple – It really is! Don’t believe all the rant about floats. They are so simple and straightforward if you understand the basics of how browsers consider space and how elements behave.
Float layouts are easy if you spend one day to learn the basics. That’s less than learning any framework!
Here is an example page embedded into this page using a simple method: a resizable
<div> containing an
<iframe>. This should work for most modern browsers but you can check the page also in its own browser tab. Click here to see the example page. This visible demo you can resize by dragging from the bottom right corner of this
This WordPress theme stylesheet uses only two media queries and changes only about five rules for all responsive scaling and layout changes! You do not need more. OK, I’m using both Flexbox and CSS Grid but I have done similar designs with floats with a similar amount of code. I’m writing more about layouts in another article. Below is a simple example of what I mean.
The moral of the story is to understand the basic behavior of HTML -elements and use using the defaults to create a layout. Only change it when needed.