Web designers or business owners who work on their own websites or their CMSs have a core in the HTML markup language. Learning HTML will give you a good base for designing and redesigning sites, especially if you add CSS and JavaScript.
Before you begin building your site, you’ll need to decide on a standard design. To do this, sit down with some conventional sheet and a pencil and begin doodling, blocking out the publication’s parts. You may be itching to get programming, but by drawing your blog out first, you can modify patterns to your heart’s content without scripting and recoding.
After you’ve settled on your website’s structure, you can start creating HTML tags, which contain instructions for inserting text, images, and links to other sites and instruct the web browser. You’ll apply HTML tags to link to an external source if an image needs to appear on the left side of the page, a particular word needs to appear bold, or a different word needs to appear strong.
Five guidelines for HTML keywords coding
For HTML keywords to be coded, there are five crucial guidelines.
- Tags are always surrounded by angle brackets (less-than/greater-than characters), as in
. - Most tags come in pairs and surround the material they affect. They work like a light switch: the first tag turns the action on, and the second turns it off. (There are some exceptions. For instance, the
- The second tag–the “off switch”–always starts with a forward slash. For example, you turn on bold with
, shout your piece, and then return to regular text with. - First tag on, last tag off. Tags are embedded, so when you start a tag within another tag, you have to close that inner tag before closing the outer tag. For instance, the page will not display properly with the tags in this order:
.
The correct order is:. - Many tags have optional attributes that use values to modify the tag’s behavior. The
(paragraph) tag’sALIGNattribute, for instance, lets you change the default (left) paragraph alignment. For example,centers the next paragraph on the page.
Remember, too, that HTML is always evolving, and older browsers often don’t support the newest tags. When a browser encounters an HTML tag it doesn’t understand, it will usually ignore both the tag and the material it affects. This way, the newest elements will appear to viewers with newer browsers without causing problems for viewers using older browsers, who will only see material their browsers recognize. On the downside, browsers treat coding errors like unfamiliar code. If you’ve made a mistake while building your page, you won’t necessarily see an error message; you might just see nothing at all.
SEE: Get answers to real-world questions from fellow web developers in the TechRepublic forums.
You should always closely check all of your pages in a browser to make sure everything that’s supposed to be there appears properly. We recommend looking at your pages in more than one version of Google Chrome, Microsoft Edge, and Apple’s Safari — on both PC and Mac platforms and mobile devices, if possible — to make sure everything looks how you intended. Not every browser type or version behaves the same way.
What are the 10 basic HTML tags?
: This tag creates text headings. H1 creates the largest size heading. Heading sizes go from one to six, descending in size. As is the case with most html tags, close the heading tag with a backslash ( in the case of a heading size 1).
: This tag indicates body text.
: This tag indicates a paragraph break. Enclose both the beginning and end of paragraphs to separate them. For example:
This article is an introduction to HTML.
HTML helps script online content.
:
creates a series split. If you want to distinguish text from paragraphs by a certain number of lines rather than just one, you might favor this option. You do n’t have to close
. It is basically a file.
: This badge formats style in italics.
: This badge formats script in bold.
: The element is a bit complicated but very useful. It embeds links. The HTML code for adding links is:
link text
Include the URL where indicated, making sure to include the phrase signs. Change the language in the link to your preferred language. The outcome: Clicking on the link text will start the URL.
: This label embeds pictures. This label is typically used in this manner:
The website is given access to the image using the library attribute. The file name as shown above can be used to host an picture on your own site or server. If not, you can clear the library attribute to a URL instead.
Extra word occupies a spot in the alt feature. This is important for accessibiity, or when slower online may reduce the picture from launching. In the alternative text section, make sure to incorporate the quotation marks in a succinct description of the image.
You can change the size of images by adding style within the brackets. This will look like:
The width and height may be changed around.
The label does not need to be closed.
: This label indents words in order to set it apart, showing the word is a statement.
Just a few of the numerous tags you have are available. For more information, W3Schools provides a free tutorial. Some others are:
In RGB, HEX, or HSL, pre-set color names or color values can be used to set text color. This looks like:
| .
can be used to build a form similar to an email submission box. How to learn HTML as a beginnerIn my experience, the key to learning HTML is knowing what you want to build. Determine how the changes made possible with HTML will help your end goal, from building a complete website to adding some formatting to a blog post or comment. From there, experiment with a text editor. Looking over the shoulders of other web page creators is a great way to learn more about complex HTML. Simply view the page’s source to see how it was done if you see a website you like. Most developers take inspiration from other websites, but you should n’t just copy another builder’s design. Browsers have different methods for viewing the source, but it’s typically as straightforward as right clicking on the View Page Source or Source button. As you get more and more experience with web building, stick with viewing source code on relatively simple websites. When viewing source code, you’ll sometimes see organizational comments from the page’s author near the top of (or scattered throughout) the file. These comments are inserted with the Update information: Megan Crouse updated this 2003 article in 2024. She has spent decades compiling some of the tagging data and has referred to W3Schools for assistance. She has used HTML in social media and CMS tools. Fred Dekker and Donald St. John contributed to the original version of this article. Fred Dekker is one of the Founders of The H. E. L. P. Community, an online resource for beginning Webmasters. Donald St. John was the founding Webmaster at PC Games magazine. Also Read |
