A Simple HTML Basics Cheatsheet

A Simple HTML Basics Cheatsheet

a simple guide for understanding HTML

BASIC HTML:

The structure for writing HTML code is using tags to tell the browser what it's interpreting for you the user.

@nqubekogcabashe html basics image

Creating HTML File:

Creating the html file means creating a file with the .html extension.

Basic Tags:

@nqubekogcabashe html basic tags
  • HTML tag is the one that will initialize / format the HTML document for the browser.
    <html>

        // Your other tags will go here

    </html>
  • head tag is where we put tags and meta-tags that will describe the HTML document.

@nqubekogcabashe html head tag

  • the head tag goes inside the <html></html> tag but it's one tag whose content you won't see displayed on the HTML, but perhaps in the window.
@nqubekogcabashe head tag img
    <head> 
        // code for other tags and meta-tags goes here
    </head>
  • title tag is used to give a name to the window or tab that will represent that page.
    <title> 
        // page title goes here
    </title>
  • body tag is used to contain the web page's content, this is where you put all content.
    <body> 
        //web page content goes here
    </body>

Body Tag Attributes Examples:

@nqubekogcabashe html body tag
  • to set the background color to green of body tag. You can use the color name or hex value

html <body align="center" bgcolor="green"> ... </body>

  • to set the text color of links, using the name or hex value:

<body align="center" alink="green"> ... </body>

  • to set the color of visited links, using the name or hex value:

html <body align="center" alink="green"> ... </body>

Text Tags:

These tags are used to format text content you adding to your HTML and you use the following HTML tags.

  • to create pre-formatted text.

<pre> ... </pre>

  • to create header tags h1, h2...h6 where the h1-largest & h6-smallest:

<h1> Heading Text </h1>

  • to make text bold:

<b> test to turn bold </b>

  • to display/define source code usually monospace:

<code> ... </code>

  • to emphasize a word or text:

<strong> ... </strong>

  • to set the size of the font, replace "?" with size in em, rem, % or px as measurement:

<font size="?"> ... </font>

  • to display source code:

<body> ... </body>

Formatting:

We use these methods to group certain content types like articles, and containers like div spans.

Container tags:

these tags are used to contain other tags or content within them, you would do this to create some sectioning, to be able to share attributes "style, format" or other reasons you intend for data to be suctioned out.

  • We commonly use the div tag most times <div>...</div> and within this tag, we add content that will be sections with many lines.

  • We also use the span tag to create sections within divs also <span> ... </span> and its used to format inline content with CSS.

  • We then have the <p>... </p> to contain content within this paragraph tag as one paragraph.

Html Input Tags:

<input type="email" name=? value=? disabled=? />

  • This is our basic input tag where the type attribute will have a value of either email, password, number, URL or text "I think there is more" but that's the ones I have used, but these are used to validate your input and also helps the reader understand the data they are expected to give the web page.

  • Another that i have encountered include <input type='date/month/week/time name='date' /> and this one is used to input to date.

  • Another good one is <input type='search' name='search' /> that is used for search.
  • Another fun one i loved was <input type="color" value="green" />

  • We also have the name attribute that will help you identify the input tag with the name attribute in situations with more than one input.

  • Then we also have the value attribute that is used a lot to capture the input that you have put into the input tag.

  • We also have the disabled attribute which determines if the input is accessible in terms of adding data.

So that's the basics of HTML I got time to write out but there are definitely more tags out there and your job is to seek them out and use them to your advantage to make the site user-friendly and lovable.


I hope this helped you out and this is also another more details source for the documentation for HTML please use it and also check out my video & content on how to use documentation using python example.

Did you find this article valuable?

Support Nqubeko Gcabashe by becoming a sponsor. Any amount is appreciated!