Now that I have your attention, welcome to my blog! I have recently gotten into the spirit of web authoring, and I would like to share with you everything I learn, as well as some relevant tips, tricks and giggles I find, along the way. As a rookie to the craft, I have summarised what I have learned so far from my introduction to HTML . . .
HTML is a Hyper Text Markup Language. This is an annotation of text to describe information. In other words, you are describing the structure of a web page using markup. The newest version now is HTML5. HTML are simple text files that need a text editor like, Visual Basic Code or Atom, in order to start developing your web page.
We use markup language without even realising it. When we create a text document on Google, for example, we select what is the header, what is the title or what consists of the body etc.
When you write HTML, you see various different tags, all that create an object from each. Tags are used to determine start and end elements of markup.
Opening tags look like <tag name>
Closing tags look like </tag name>
Ensure tags are nested within the HTML correctly so that all elements are completely within each other, and of course, don’t forget to close your tags!
The three main elements in HTML are the root, head and body element.
Within the root element you would specify the version of HTML the document is using, which in our case would be <!DOCTYPE html>. This is referred to as the document type declaration.
You also have to identify the language of the content on the page, which you would write as <html lang=”en”> for English. If in any case your page contains a foreign language, you would have to add a language attribute to an element surrounding that content.
An attribute, which is always specified in the opening tags, simply provides us with additional information about the contents of an element (eg. height x width). They consist of a name (never changes) and value (changes) and the attribute values should always be enclosed in quotation marks i.e, name=“value”.
Within the head element you will have your meta and title tags.
The <meta charset=”UTF-8”> basically describes the character encoding for HTML. In this case, the character encoding is for the Latin alphabet.
Below this you would write out a title for your page. The title is what the user sees on their browser tab.
Within the body element is everything the browser renders and what everyone sees. Here you will find your <h1> to <h6> which are known as your headers and sub-headings, which would then be followed by all your <p> which are known as paragraphs. Paragraphs are what contains your main text body.
You can add breaks between lines when you want the next sentence to appear on the next line, but not necessarily create a new paragraph. You would do this by placing <br> (break element) before the sentence you want to have moved. As there is no content within the element, the tag does not need to be closed.
Semantic elements add meaning. Over time they have changed, so that <i>, which was initially used to italicise, is now used for alternate words (eg. for the visually impaired). Now, <em> is used to italicise. <strong> is used to make things bold. Semantics also help with Google SEO, as they give more depth and value to your web page. Though always remember that HTML should never be used to change the look and feel of a page. That is what CSS is for, but we will dive deeper into that later.
You can also create different types of lists, depending on what you need. There are three types of lists:
Unordered <ul>, which are usually in the form of bullet points, and often do not need to be done in any specific order
Ordered <ol>, which are usually numbered, and you need to follow it step-by-step
Definition, which are used for definitions for example in the scientific field.
Coders often leave comments to one another when writing HTML. These comments cannot be seen by the users of the web page, but it is an easy way of communicating with one another, or even to guide other coders in why you chose particular tags etc. You can add a comment anywhere in the code.
Finally, you have to make sure to validate your code. A HTML validator checks the HTML for any syntax errors (open tags etc.) A good one, if you are using Chrome as your default browser, would be Chrome HTML Validator by Marc Gueury.
I hope you enjoyed this post and got a coherent introductory kick start to the world of HTML! It is exciting stuff indeed! See you next time . . .
