Learning and understanding HTML is like building the foundation and structure of a house, HTML is the foundation of building up webpages and is the key tool for website development. It is almost impossible to discuss HTML without discussing CSS as both languages work hand in hand.
Once you finish building a home, you furnish it right? Like, you have to do interior decoration, beautify it, put the sofa set on a particular side of the living room, and so on, in web development, CSS helps us with the decoration and styling of our website. This article is meant for newbies in HTML but will offer some insight to the experts about how well to structure the HTML code.
There have been different versions of HTML over time and the present version is HTML5 which supports more features that make it possible to do more including Figure & Figcaption, Details, Progress & Meter
The Standard HTML5 Structure
A standard and basic HTML5 document is structured as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<!-- the body is the container for the content of a webpage -—>
</body>
</html>
As a beginner, you see the code above and you get the feeling that this is a tall order, you may even be tempted to try to memorize the code or other codes you come across, but the real trick is to calm down, and try to understand the code instead. There is so much free information on the internet, you can google for codes anytime you feel stuck, just to get an idea and an understanding.
So, stop cramming codes: all the codes in the world are freely accessible on the internet.
The arrangement of the HTML document above is extremely important as we can highlight different items worth noting:
<! Doctype html>: This tag tells the browser that the document type is HTML5. The browser on the other hand can allow for additional features that HTML5 came with including a much faster load time, better media support, and mobile optimization.
<html lang ="en">: This tag is the root element that shows that the webpage is written in HTML5, the lang attribute tells the browser that the HTML language is English (en). The language (lang) can be changed to other languages like French (fr), Spanish (es), and many more languages.
Discussing the Head Section
A standard head section (which is also referred to as the ‘head element’) has the opening and closing tags <head> </head> and houses the metadata. Metadata is simply the data about the HTML document, however, this data is not visible on the browser, it only helps the browser to interpret the content of the code. Meta tags are self-closing which is equally important.
Our code below helps the browser interpret the data as below.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
What is the purpose of the meta tags?
`<meta charset = "UTF-8">: This tells the browser what set of characters we are using. UTF-8 stands for Unicode Transformation Format and web developers are encouraged to use the UTF-8 character set which covers many characters and symbols.
<meta name = "viewport" content=" width=device-with" initial-scale=1.0>: This tag is used to control the layout of websites on different devices such as mobile devices, laptops, etc.
As a web developer, you can add even more meta tags depending on how you wish your website to perform, for instance, you can set your browser to refresh after every 15 seconds. Below is a meta tag that does the trick.
<meta http-equiv= "refresh" content="15">
The meta tag can offer more information about the web page description, published date, author, keywords, etc.
The head section also houses more common elements such as:
<title>: A tag that specifies the title of a web page.
<link>: A tag that helps to connect the html document with other files
<script>: A tag that is used to include JavaScript
<base>: A tag that is used to specify the base URL for all relative URLs
To note, the <body> tag houses all the website's content including paragraphs, images, lists of items, etc.
CSS Presentation
Once our HTML structure is set, we introduce CSS to make the webpage look good, and to do so, we can incorporate any of the three different types of CSS below to link an HTML file with the CSS file. It is important to note that CSS and HTML are so reliant on each other that one can not work on its own without the other. When using CSS, we select the HTML element first then we decide what kind of decoration or styling we use.
Inline Style:
<tag style=" property: value">
Embedded Style:
<head>
<style type="text/css" selector{property:value}>
</style>
</head>
External Style Sheet:
<head>
<link rel="stylesheet" type="text/css"href= "style.css">
</head>
Some Important CSS Selectors
W3schools defines CSS selectors as patterns used to select the element(s) you want to style. Below are some important selectors/patterns with different uses.
*(asterisk): It selects and applies styling on every element in a webpage.
<tag *>: A tag followed by the asterisk selects all elements within a tag
. class: Selects all the elements with the class class. Notice that when selecting a class, we add a dot (.) before the name of the class.
# id: Select elements within id (id in CSS stands for identifier), to select the id, you begin with the # (hash) sign before the name of the id you are selecting.
tag.class: All tags with class class.
Importance of Observing The Standard HTML Structure
An HTML document must be structured correctly, if not, it will cause the browser to show contents incorrectly or not show contents at all. It is therefore important to observe and implement the standard structure of an HTML document. The standard structure provides a way to organize the contents of a web page such as images, headings, videos, etc
The HTML structure also defines things like headings, links and thus giving the document meaning. The sequence of elements used in HTML instructs the browser on how to display content.
Conclusion
All browsers support HTML and not just HTML but a well-structured HTML document. Therefore, for web developers, it is crucial to have the HTML document properly organized. Web developers are encouraged to continuously learn how to arrange elements while observing the standard structure. They are also encouraged to learn the coding concepts and code more.
Top comments (2)
Hi, I think your code tags got a bit messed up in this post - the spacing and quotation marks in your snippets are misplaced or wrong several times (like using
”orrel=”stylesheet”type=“text/css”href= “style.css”) and I think what's happened is you've pasted this in from a different editor and brought some of its formating along for the ride.The spacing is a problem because in your examples, you say:
With that space between
tagandclass, and with the errant dot as well, the style selector will not do what you want. It won't work at all, but if you got rid of the dot, it'd at least partially work - it'd select all elements with classclasswhich are descendants of thetagcustom element.If it helps, you can paste in plain text here, and some combinations of OS and browser will do it for you automatically with ctrl+chift+v or similar. Any time you want to use a code block that's more than a single line, I'd suggest using three backticks like you do for your
<meta charset=snippet. The added bonus there is that you can addhtmlto the three backticks and it will all be magically syntax-highlighted for you.In one section you write this:
and I'm not sure what you're trying to say. It looks like you're confusing a literal tag with an XML definition from somewhere. What did you mean to say?
Hi Ben, you are right, my mistake, I'll have a look at it and update it accordingly, I appreciate your feedback.