Website building blocks
September 7, 2020
View web page source html
When I press
F12 in my browser, the Developer Tools window will open. Before learning about HTML and web development, this window would only pop up by accident.
When the Developer Tools window is open, you can see all the markup that makes up the web page. I'll give an overview of HTML so you can start learning yourself.
Web page structure
HTML elements are the building blocks. These blocks consist of a start and end tag indicating what type of block it is. Every web page has a standard structure.
<!DOCTYPE html> <html> <head> ... </head> <body> ... </body> </html>
All html documents start with
<!DOCTYPE html> to indicate to the browser what type of document it is.
<html></html> block holds all other blocks within the web page.
The two main blocks within the
html element are the
head element holds markup that will support the document, such as
body element holds all other blocks of the web page. I'll go over some of the most common elements in a bit.
Most elements can contain IDs, classes, styles, and more.
<p id="paragraph-1" class="example-class" style="color: red;">This is a paragraph</p>
Common HTML elements
<div></div> element is very common block element in HTML. It mostly acts as a grouping element to hold smaller pieces together.
<p></p> element represents a paragraph.
<a></a> tag is what gives the web its name.
a is the hyperlink tag that points to other websites, creating the "web" of site pages. The
href property holds the site that the tag references.
<a href="https://brianjdevries.com">Brian's site</a>
The above code becomes Brian's site.
Heading tags span from
h6 and indicate document levels. They typically have decreasing font size as the heading number increases.
<img /> element allows you to embed images within web pages. This is an example of a self-closing tag.
<img src="https://brianjdevries.com/favicon.ico" />
This is the image that shows from the above
<link /> element is a non-visual element used to import stylesheets and images to the document.
<link rel="stylesheet" href="./style.css">
The above snippet will use the
style.css document to format the document and add css to the markup. We'll cover CSS later.
HTML is how web documents are formatted. Numerous elements are available to communicate what content is and how it should be displayed in the browser. Building websites with proper HTML elements also allows screen readers to access web content. Less able people can then also interact with websites and navigate them.
This is just a brief introduction to HTML. More information can be found in the MDN web docs.
Go ahead, press
F12 on this page and take a look at the HTML structure. You won't break anything, but you will learn something!
Give me a shout if you liked this post, I love talking with others about all things web.