When you’re starting off with HTML, you need to understand the basic structure of an HTML document (who’d have thought it!). It’s really not that tricky once you have the basics sorted. This post is part three of my ‘Getting Started In Coding‘ series. It will give you a few tips to start you off on your learning journey with HTML, but is not a tutorial.
The Basic Structure Of An HTML Document
All HTML documents consist of a series of elements, enclosed by their start and end ‘tags’. Tags are generally of the form:
<tag-name>the contents of the element</tag-name>Angle brackets <> enclose the tag. Each tag performs a stylistic and/or semantic function, informing the browser how to display any enclosed text amongst other things.
Every HTML document begins with a doctype declaration, which tells browsers that this is indeed an HTML document. Immediately following will be a pair of starting and closing ‘html’ tags which delineate the actual HTML content of the page. For an HTML5 document (don’t worry about other versions for the moment), it looks something like this:
<!DOCTYPE html>
<html>
the actual page content goes here...
</html>The html tags enclose the ‘root’ element of the document. Inside them, the document content itself consists of three main parts, each with their own pair of opening and closing tags:
- the head,
- the body,
- the footer.
This gives us something along the lines of:
<!DOCTYPE html>
<html>
<head>
<!--header content and metadata go here... -->
</head>
<body>
the actual page content goes here...
</body>
<footer>
the footer content goes here...
</footer>
</html>Next we’ll take a quick look at each of those sections in turn.
The <head> Section
The head section primarily contains metadata, information about the document such as its character set, title and author, along with some other housekeeping items (links to styling and script files etc., more on that in a later post). The browser does not display the contents of the head section directly on the page, but uses the information contained in it to correctly process the document.
The <body> Section
The body section contains the actual content of the web page. A multitude of inline tags instruct the browser what to do with the enclosed text, images, audio-clips etc.
An excellent place to begin learning the detail is the MDN ‘Structuring The Web With HTML‘ article. I have listed a few of the basic ones below to give an idea of what to expect:
The Heading Tags <h1>, <h2> etc
Unsurprisingly, you use heading tags to define the headings on your page, just like the structure of any other document you might write. Generally you should have a single <h1> to set the main heading of your page, and structure your subheadings accordingly with <h2>, <h3> and further as required. At the risk of sounding obvious, the number in the tag indicates the hierarchical level of the tag, not the index (or order) of the heading tag itself within your document. You will be able to manage the exact styling of your different heading levels when we come to learn about CSS.
<h1>The Main Heading</h1>
some introductory text goes here...
<h2>The First Sub-heading</h2>
some text goes here...
<h2>The Second Sub-heading</h2>
some more text goes here...
<h3>A Heading Which Belongs Logically Under The Second Sub-heading</h3>
yet more text goes here...You get the idea. It is worth the effort to cultivate the habit early on of being consistent in your use of headings. Some people will use heading tags in any order they like, just because they like how they look. You should avoid this temptation as it is bad practice for a number of reasons.
The Paragraph Tag <p>
It will be no surprise to hear that you should enclose the text of your paragraphs in paragraph tags. At the very least the browser will render them on a new line with some degree of indentation to the first line, and additional spacing above and below to set it apart from other elements. As with headings, you will be able to manage the exact styling of your paragraphs when we come to learn about CSS.
<p>This is my first paragraph. It is quite a short one.</p>
<p>This is my second paragraph. It is also quite short, but slightly less so.</p>Some Inline Styling Tags
It is very simple to make some stylistic amendments to your text, but there are a couple of pitfalls for beginners which can be avoided with a little explanation.
<i> vs. <EM>
Often we choose to italicise text. Usually there is a reason for this, to emphasise it or set it apart from the surrounding text; sometimes it is just a stylistic choice. The <i> tag (short for italic), and the <em> tag (short for emphasis) will both achieve this for you, and beginners are often left wondering what the difference is, or why you need both. The difference is that <em> is a semantic tag, conveying the ’emphasised’ meaning of the enclosed text; screen readers will articulate that text accordingly to convey the emphasis (which they will not for an <i> tag).
<B> vs <strong>
Exactly like the <i> and <em> tags, both <b> and <strong> will draw attention to the enclosed text (usually but not always with a heavier typeface). Only the <strong> will indicate to a screen reader that the text is to be emphasised though.
The <footer> Section
The footer section typically contains secondary information about the document such as:
- author information,
- registered company address,
- links to social media,
- copyright and privacy notices.
In general, you can place things which may not be directly part of the main content of the page, but which you want (or need) your visitor to be aware of, in the footer. This way they are on the page, but ‘out of the way’ of your main content. Footers are often styled with smaller typeface and/or different background colouring to differentiate them from the main body of the page.
In Summary
Starting off with HTML is not that tricky. There are plenty of good tutorials, courses and reference material available online. The MDN website has an excellent ‘Getting Started With The Web‘ series. There you will find not only an excellent HTML User Guide (referenced above) but also their must-read ‘How The Web Works‘ article.