Hey rooki.designers! Welcome to the first article in the new course introducing HTML and CSS for designers. Before we get into the nitty gritty of specific coding techniques, it’s important to be familiar with how an HTML page is structured and the concept of the Box Model.
Part 1 — The HTML Page Structure
An HTML (Hyper Text Markup Language) document consists of a series of elements, which the browser uses to know how to display the content of a web page. These elements are represented by a series of HTML tags. Browsers don’t directly display tags, rather use them to render content onto the page.
An element within an HTML document consists of an opening tag, content, and a closing tag. Tags are surrounded by less than (<) and greater than (>) symbols, with the tag name included. Closing tags have a leading forward slash (/) after the opening less than symbol. An example of a tag is the <p> tag, used to represent paragraphs on a web page.
When we create an HTML document, we need to use a series of HTML tags so the browser knows how to interpret the web page. These tags are written in the following order:
- <!DOCTYPE html> — Defines the document to be HTML 5
- <html> — The root element of an HTML page.
- <head> — Contains meta information for the document.
- <title> — Specifies the title for the document.
- <body> — Contains the visible page content. Within this tag is where elements such as paragraphs, headings, and images will go.
Part 1.1 — Self closing tags
Not all tags need to be followed by a closing tag. This is because there are some cases in which HTML tags do not contain any content to surround. Two examples of these are:
- Image Tags: <img>
- Line Breaks: <br>
These tags contain all the information needed within the opening tag itself. The image tag contains the source of a URL to which image to display, and therefore doesn’t need a closing tag to surround any content.
The breakdown of an image tag is relatively straightforward to understand. The src attribute contains the location in which the image is stored. The alt attribute contains a description of the image, used for accessibility reasons such as screen readers.
Part 2 — The Box Model
The box model is an important concept to understand, particularly before getting into styling your web page with CSS (Cascading Style Sheets).
Elements within HTML can be considered as boxes. In CSS, the box model is considered when talking about design and layout. The box that surrounds an HTML element can be considered to be made up of the following:
- Margins
- Border
- Padding
- Content
The margin describes the space outside of the border of an element. This is transparent and is used to create space between different HTML elements. The border surrounds the padding and the content, and can be styled within CSS. The padding describes the space around the content, and like the margin, is transparent. It creates space between the content and the border. Finally, the content is where text and images of the elements will appear. Below is a visual representation of the Box Model:
Once you understand how the box model works, you can start to create basic layouts on the page using CSS properties such as margin, border and padding.
The next article will start looking into how to create a styled web page biography of your favourite music artist, so be sure to check the next issue of rooki.design for that!
Thank you for taking the time to read this article, and hopefully it’s helped you to get your head around the basics of an HTML page structure and the CSS box model.
As always, keep pushing yourself,
Mike.
Good resources for further reading:
