August Umoh Blog

Day One - HTML(elements,tags and structure)

Day One - HTML(elements,tags and structure)

August Umoh's photo
August Umoh
·

4 min read

Welcome to Chronicles of A Technical Writer.

First, do you like my cover photo? I think I look great, haha.

So, on my first day, as I began my journey into Technical Writing, I started by learning the popular HTML. Haha, I had no prior knowledge about codes. To be honest, I was a bit skeptical. I didn't know if I would be able to properly assimilate everything the way I thought professionals would. But, I trusted my guts and I dived right into it.

HTML is simply HYPERTEXT MARKUP LANGUAGE. Not so much of a mouthful, right?

For this learning process, we will stick with "HTML". So, HTML provides structure to whatever content you want to appear on a website such as images, texts, or videos. Interestingly, it is the standard markup language for creating and designing websites. 'Markup' is a computer language that defines the structure and presentation of raw text.

What happens is that your computer through HTML, interprets these raw texts into what appears on websites.

Pause.

Breathe and just follow me.

Now, HTML is composed of 'elements'. These elements are discrete components and they give structure to the webpage and define its content. Elements are represented by tags.

Let's see an example;

<tagname>Content</tagname>

<p>Hello world</p>

See? Easy peasy.

Tags begin with an 'open angle bracket' (opening tag<>) and are closed with the same but with a forward slash in it (closing tag</>). This is how you identify what a tag is. These tags and the content between them make up an HTML element. An HTML element is a unit of content in an HTML document.

Once you understand this, we then proceed to what the basic structure of an HTML document is. This refers to the organized arrangement of elements within an HTML document. It follows a specific pattern to define the content and presentation of a webpage. This includes the 'root', 'head', 'body' tags, and other elements that I will explain later.

HTML structure exists to ensure that HTML documents are well-formed and organized, facilitating proper rendering by web browsers. As web development progresses, additional elements, attributes, and styling may be incorporated for more sophisticated and visually appealing web pages.

The basic HTML structure includes:

  • Document Type Declaration:

    <!DOCTYPE html>: This declaration defines the document type and version, indicating that the document follows the rules of HTML5.

  • HTML Element:

    <html>: The root element that wraps all the content on the page.

  • Head Section:

    <head>: Contains meta-information about the document, such as the character set, title, linked stylesheets, and metadata.

    <meta charset="utf-8">: Specifies the character encoding for the document (UTF-8 is commonly used).

    <title>: Sets the title of the HTML document, which is displayed in the browser's title bar or tab.

  • Body Section:

    <body>: Contains the actual content of the webpage, including text, images, links, forms, and other elements.

Other elements make up an HTML document structure and as the web development process progresses, additional elements, attributes, and styling may be incorporated for more sophisticated and visually appealing web pages.

Still on HTML document structures, there is 'Nesting'. This is when an element is contained inside another element. Just like we have in a family structure, nesting can be seen as a parent-child relationship. The child element is said to be nested inside of the parent element.

There can be multiple levels of nesting, okay? We can have parent-children-grandchildren-great grand children etc. This relationship between elements is known as Hierarchy. Let's see an example;

<body>
 <h1>Content</h1>
   <h2>Content</h2>
     <p>Content</p>
 <div id="Content"> 
</body>

This should help you understand what nesting is. Parent code - <body>, Child - <h1>, Grandchild - <h2>, Great-grandchild - <p> and so on it.

Again, easy peasy, right?

Understanding HTML hierarchy is important because child elements can inherit behaviour and style from their parent element.

Phew!

These are the first set of things you will encounter on your road to learning HTML. Remember, it will set you on course for proper documentation skills. With more learning and practice, you'll be amazed at how well you will write and document properly!

Thank you for reading! I am excited!

Did you learn anything? Let me know in the comments!

See you in the next article!

PS: I'd love to connect with you on Twitter LinkedIn Medium Email

Technical writing tech HTMLgrowthjobs