HTML Basic Concept

Coding Stuffs by dryanchristoph

An overview:

  • HTML provides the basic structure of sites, which is enhanced and modified by other technologies like CSS and JavaScript.
  • CSS is used to control presentation, formatting, and layout.
  • JavaScript is used to control the behavior of different elements.

Now, let’s go over each one individually to help you understand the roles each plays on a website and then we’ll cover how they fit together. Let’s start with good ol’ HTML.

HTML

HTML is at the core of every web page, regardless the complexity of a site or number of technologies involved. It’s an essential skill for any web professional. It’s the starting point for anyone learning how to create content for the web. And, luckily for us, it’s surprisingly easy to learn.null

Let me show you what I mean. Take a look at the article below. If I were to ask you to label the types of content on the page, you’d probably do pretty well: There’s the header at the top, then a subheader below it, the body text, and some images at the bottom followed by a few more bits of text.

magazine-page-example

Markup languages work in the same way as you just did when you labeled those content types, except they use code to do it — specifically, they use HTML tags, also known as “elements.” These tags have pretty intuitive names: Header tags, paragraph tags, image tags, and so on.

Every web page is made up of a bunch of these HTML tags denoting each type of content on the page. Each type of content on the page is “wrapped” in, i.e. surrounded by, HTML tags.

For example, the words you’re reading right now are part of a paragraph. If I were coding this web page from scratch (instead of using the WYSIWG editor in HubSpot’s COS), I would have started this paragraph with an openingparagraph tag: <p>. The “tag” part is denoted by open brackets, and the letter “p” tells the computer that we’re opening a paragraph instead of some other type of content.

Once a tag has been opened, all of the content that follows is assumed to be part of that tag until you “close” the tag. When the paragraph ends, I’d put a closing paragraph tag: </p>. Notice that closing tags look exactly the same as opening tags, except there is a forward slash after the left angle bracket. Here’s an example:

<p>This is a paragraph.</p>

Using HTML, you can add headings, format paragraphs, control line breaks, make lists, emphasize text, create special characters, insert images, create links, build tables, control some styling, and much more.

To learn more about coding in HTML, I recommend checking out our guide to basic HTML, and using the free classes and resources on codecademy — but for now, let’s move on to CSS.

689 comments

  7. Ruben

    Hey are using WordPress for your blog platform? I’m new to
    the blog world but I’m trying to get started and create my own. Do you require any coding expertise to make your own blog?
    Any help would be really appreciated!

    Reply
  15. Suekam

    [url=https://ivermectinbestbuy.com/]ivermectin coronavirus[/url]

    Reply
  19. Oracle Leaf Gold CBD

    I’ve been exploring for a bit for any high-quality
    articles or weblog posts on this kind of space . Exploring in Yahoo I finally stumbled upon this
    site. Reading this information So i’m satisfied to exhibit that I’ve an incredibly just right uncanny feeling I found out just what I needed.
    I such a lot surely will make sure to do not fail to remember this site and provides it a glance regularly.

    Review my homepage :: Oracle Leaf Gold CBD

    Reply
  21. Delilah

    I think this is one of the most vital info for me.

    And i’m glad reading your article. But wanna remark on few general things,
    The site style is wonderful, the articles is really great :
    D. Good job, cheers

    Reply
  22. web.jmjh.tn.edu.tw

    It is appropriate time to make some plans for the longer term and it is time to be happy.
    I’ve read this post and if I may I want to suggest you some interesting issues or suggestions.
    Maybe you could write subsequent articles regarding this article.

    I desire to learn more things approximately it!

    my homepage Nitro Strive Nitric Oxide Review; web.jmjh.tn.edu.tw,

    Reply
  24. Letha

    Precisely what I was searching for, thank you for putting
    up.

    Here is my site :: Letha

    Reply
  25. VigraFast Reviews

    Wow! Thank you! I permanently wanted to write on my blog something
    like that. Can I include a fragment of your post to my website?

    Feel free to visit my web-site – VigraFast Reviews

    Reply
  26. Erorectin Review

    I read this article fully about the resemblance of most recent and previous technologies, it’s awesome article.

    Visit my page Erorectin Review

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *