HTML5: Structure And Content For Your Webpage
On this page:
Building blocks
The elements
Top banner
On the page
HTML example
HTML stands for HyperText Markup Language. It is the coding language used by web browsers to 'read' the webpage and display its structure and contents. Almost every webpage you see will have been built using HTML in all, or almost all, of its source code.
HTML was first released in 1993. HTML5 (the latest version) was released in 2014 and was recently updated in 2019. It's obviously an enduring means of coding.
HTML5 is semantic in that it uses readable elements understandable by humans and machines alike. This also makes it easier for the human coding a webpage to define what they want to show.
Styling - such as colours, backgrounds, font sizes - of all your HTML elements is added during the build, or afterwards, using Cascading Style Sheets (CSS). CSS is the code that makes everything look pretty.
Building Blocks
HTML is the building blocks for a webpage. It uses elements to define the formatting of the document.
HTML is also automatically generated by website editors that use WYSIWYG (What You See Is What You Get) - a tool for building websites using drag-and-drop elements without the user needing to know any coding. But it's not always semantic HTML. You'd only know that by looking at the code generated though. You can view the source code for any webpage by right-clicking on the page itself and choosing 'View Page Source' - or similar, dependant on which browser you are using.
The elements
All elements start with an opening tag, such as <header> and should always (with the exception of !DOCTYPE) be closed with an end tag, such as </header>. You can see a complete example of HTML a bit further down the page.
We start with the tag <!DOCTYPE html> to tell the browser this page is written using HTML. This is a one-off tag and has no closing tag like the other elements.
Next comes an <html> tag to tell the web browser this is where the HTML begins. It should also contain the language the HTML is written in; in this case <html lang="en"> as it is in English. The closing tag </html> is the last tag in your coding at the very bottom of the page, as that's where the HTML ends.
The <head> element is where information is stored for the web browser, such as metadata, the page title you can see in the browser tab, any other coding associated with the page, who made it, and so on. There is a very good basic tutorial on the W3 Schools website that will tell you more about this.
<body> defines the main body of the page and contains all the elements of the page that will be displayed in the browser, from the banner at the top to the footer at the bottom. The </body> tag is at the bottom of the page, above the </html> tag, as that is where the body of the document ends.
Top banner
The <header> element defines the page title at the top of the page. It can also be used to contain a heading (h1, h2 and so on) in a section or article. You would differentiate the appearance of these (font size, colour, positioning, etc.) using class names in the CSS to make them unique. More on CSS later.
<nav> contains the navigation bar. <ul> (unordered list, i.e. without bullet points) and <li> (the list items themselves) contain the links in the navigation bar. There are other ways of making navigation bars; for example using <div> rather than lists.
On the page
Next comes the <main> element - on these pages this holds all the rest of the page content except the <footer>. It is usually referred to as a wrapper, because it wraps around the rest of the body of the page.
Now come your <article> and <section> elements. These will contain the headings; <h1>, <h2> and so on, and paragraphs; <p> - of your articles. Generally you would use an article element for a complete article like a blog post or news story and it may be sub-divided using separate section elements. A section element may also contain just a heading element.
An <aside> is used to contain adverts or content indirectly related to the article they are adjacent to.
The float property is used to position it to one side of the section or article. You can see how to do this in the CSS example later on.
At the bottom
At the bottom of the page is the <footer>, which usually contains things like copyright, contact information, and links to privacy and security policies.
The semantic HTML elements in use
The example below shows the finished source code and how it appears in the browser. There is no styling added to this page yet and the font, text size, layout, and colouring is the default for HTML. The browser merely displays the content of the page with the default style that comes with HTML.
What you get in the browser (no styling applied yet):
The raw HTML:
All the elements used in the source code are easily understood and it is obvious what they refer to. This is the whole idea behind semantic HTML. Once you get used to it you can write up a webpage fairly quickly.
Raw HTML with no styling added is like having a plain page of type with different font sizes. It may not look all that interesting but at least it has everything on the page that you want to show; your content is there.
You can see what it looks like with styling added on the page about CSS.
❧