HTML Basic Concept

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.

 

669 comments

  1. Physicians email list UsA

    Very good blog! Do you have any tips and hints for aspiring
    writers? I’m planning to start my own site soon but I’m a
    little lost on everything. Would you recommend starting with a free platform like WordPress or go
    for a paid option? There are so many choices out there that I’m completely overwhelmed ..
    Any suggestions? Cheers!

  2. Perabot Rumah Tangga

    Among all these points, probably the most important and foremost point would
    be to consider the furniture for commercial project. The living
    room selection of this furniture is endless; tables, sideboards, TV stands, display
    cabinets, coffee tables and also fire surrounds.
    Bush Furniture presently may be the 8th largest furniture company within the U.

    My homepage – Perabot Rumah Tangga

  3. pinnock estate lekki

    Hello, constantly i used to check blog posts here early in the morning, as i like to find out more
    and more.

  4. gratuit v-bucks deutsch

    I believe that is one of the so much significant info for me.
    And i’m satisfied studying your article. However
    want to remark on few basic issues, The web site style is ideal,
    the articles is really nice : D. Good process, cheers

  5. gratuit v bucks blogspot

    Hurrah! In the end I got a website from where I can truly get helpful data concerning my study and knowledge.

  6. Margarita

    I really like your blog.. very nice colors & theme.
    Did you design this website yourself or did you hire someone to do
    it for you? Plz answer back as I’m looking to create my own blog and would like to find out where u got
    this from. kudos

  7. check this

    Woah! I’m really loving the template/theme of this site. It’s simple,
    yet effective. A lot of times it’s very difficult to get that “perfect balance” between usability and appearance.
    I must say you have done a excellent job with this.
    Additionally, the blog loads super fast for me on Chrome.
    Excellent Blog!

  8. FORTNITE HACK V Bucks

    For latest news you have to pay a visit web and on internet I found this site as a finest web site for newest
    updates.

  9. situs judi slot

    Thank you for the good writeup. It in fact was a amusement account it.
    Look advanced to more added agreeable from you! By the way, how could we communicate?

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *