HTML Contents

#html #webdev #beginners #codenewbie

HTML Structure
Elements / Tags
Mandatory Elements / Tags
Attributes
Conclusion

Structure

Like the English language or any other language, there are grammar rules on how to word out sentences. When it comes to programming languages, they also come with a set of rules that we have to follow in order for the computer to understand what we want it to do. The Web Page or Web Object is a world of its own. We can access the Web Browser Object simply by going onto the web browser's console. There are many ways to communicate with the web browser, which is why HTML is not the only way to create web pages, but yet it is easy for the human brain to read and understand, which is why it is usually recommended for beginner developers to get a glimpse of developing web pages.

It also helps us organize our content too. Another way to look at a web page is the newspaper. The front page can be the landing page describing the biggest news of the day; there can be articles in their little sections, too, where topics are divided into groups and are aligned altogether. HTML's structure helps achieve this on the web.

HyperText Markup Language: Hypertext allows us to create links for users to access another web page quickly. MarkUp allows us to annotate text and provide additional information. Tags or Elements (can be used interchangeably) allow us to define our structure.

Elements / Tags

Another example can be a Word Document, we can create headings, lists, forms, and paragraphs. In HTML we do this with Elements. When we want to add content or information on to the web, HTML has some built in elements that allow us to display our content the way we want it to. When working with elements there is a specific way we need to write out our tags in order for the web browser to understand. We can think of tags as our wrapper or container for our content.

We first would declare our opening tag with a Left-Angle-Bracket followed by our element, followed by a Right-Angle-Bracket. After our opening tag, we can add our content. Once we are done with our content, we end it with a closing tag. Like before, we start with our Left-Angle-Bracket, but to tell HTML we are done with this part, we add a Forward-Slash next, followed by our element, ending it with a Right-Angle-Bracket. Now lets learn about what elements are usually required for our HTML document.

Mandatory Elements / Tags

When we first create our HTML document, there are a few elements that we need to have written out first in order to get start adding our content.

<html> </html>

HTML Element : this element is our root element. Everything we want to show on from our HTML document has to be wrapped inside these tags.

<head> </head>

Head Element : this tag usually contains information about the document. It can hold other elements inside of it, for example.

<head>
  <title> Our title </title>
</head>

Title Element : this tag defines the documents name and is shown on the Browsers Tab. This can only contain text and can not hold any other elements inside.

<html>
  <head>
    <title>
      Our title
    </title>
  </head>
</html>

The next section would be our Sectioning root or known as the Body element. Where all of our HTML content will be wrapped in. There can only be one body element per HTML document.

<body> </body>

Here is a quick example of an HTML document with some content.

<html>
  <head>
    <title>
      Our title
    </title>
  </head>

  <body>
    <h1> Our Heading element </h1>

    <p>
      Lorem ipsum dolor sit amet
    </p>

    <h3> Sub heading </h3>

    <p> 
      Duis aute irure dolor in reprehenderi
    </p>  

  </body>
</html>

Attributes

We can also add additional information onto our elements using Attributes. We add Attributes to the openingtag of our element. It consists of a name and a value. We assign the value to the name given. There are some built-in Attribute names available to us to use. We can give elements names to help servers identify them easier when working with data.

<p name="user"> Oscar Ortiz </p>

When using Attributes some elements may be limited to using them. So be sure to do a quick search on the type of Attribute you're trying to use.

Conclusion

I hope by the end of this article you managed to learn how to create and understood what is going on in every line of code. It is very important to understand how your code fully works, not only does it help you become a better developer but can also help you use the tools you are working with more efficient.

These articles are mostly intended for personal use on becoming a better programmer, writer, and grow my programming skills. Feel free to drop any feedback or corrections that you believe that should be made to help me and others. Thank you for your time for sticking this far!