Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Is there any way to decrease or squish the size of a .html page?
If we are talking about size of the file in bytes, then gzipping it on-the-fly will have the biggest impact. After that, I'd suggest removing whitespaces and comments, and moving all inline javascript and css into separate files. Then you may consider trying to clean the HTML a bit, like removing tables in favor of divs and all that.
Then, if you are really going to push the limits, you may try to change your doctype to HTML4 Transitional and then exploit its un-strictness. You can remove <body> tag, you can stop closing <li>s and <td>s, you can drop off parentheses around tag attributes or remove whitespaces between them, and still remain valid. Also, if you replace all your <strong>s with <b>s, you can save up to 10 symbols per pair! :)
If you need a working example of that "pushing the limits" techniques, then go to http://yandex.ru and explore their sources. Yandex is the leading search engine in Russia, they really care about the size of their index page and they know a lot about optimizing the code and load speed of pages.
Assuming you are talking about the length of the page in bytes:
Make sure gzip is enabled on your
server.
Remove comments.
Remove any
Javascript and css - Javascript can
be compressed in a separate file using a tool such as googles closure compiler.
Use ansi ascii or UTF8
encoding (as opposed to UCS2/UTF-16).
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 months ago.
Improve this question
So I am now learning html, and I was just wondering why tags such as cite even exist. When I open a website as a user, I still see the text as italic when the code is written as cite.
I found that the tags are useful when it comes to screen readers, so basically for users that have problems with their vision.
Are there any more reasons for these tags? Thank you so much in advance!
Tags are small snippets of HTML coding that tell engines how to properly “read” your content. In fact, you can vastly improve search engine visibility by adding SEO tags in HTML.
When a search engine’s crawler comes across your content, it takes a look at the HTML tags of the site. This information helps engines like Google determine what your content is about and how to categorize the material.
Some of them also improve how visitors view your content in those search engines. And this is in addition to how social media uses content tags to show your articles.
In the end, it’s HTML tags for SEO that will affect how your website performs on the Internet. Without these tags, you’re far less likely to really connect with an audience.
About cite tag: The tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.). Note: A person's name is not the title of a work. The text in the element usually renders in italic.
Regarding the cite tag, according to MDN:
The HTML element is used to describe a reference to a cited
creative work, and must include the title of that work. The reference
may be in an abbreviated form according to context-appropriate
conventions related to citation metadata.
This enables you to manage all the css applied to quotes easily, were that to be your use case (if you happened to have a lot of quotes on a site). The italics you have observed are part of that css, or rather the default css applied by the browser.
In the broader spectrum
Oftentimes you will run into tags that as of today are not in use anymore. There's different industry standards for different time periods.
All of the tags exist, because there was a reason for web browsers to have a specific way of reading a piece of content.
For example centering a div used to be an almost legendary task that was achievable using multiple methods, all of which had different advantages and disadvantages. However, nowdays it's customary to use the flexbox.
Bottom line is its a way for web browsers and search engines to read and interpret the content you're providing
Tags such as and are used for text decoration nothing else you can also change text fonts and styles by using CSS.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed last year.
Improve this question
When creating close buttons, usually for a card of some sort, I often find the need for some visual symbol resembling the cross/multiplication symbol we all associate with closing things.
In most cases, I find myself preferring to use the HTML entity.
×
But I've seen use of the "regular" x key on a traditional EN keyboard. As well as SVGs like those available at Feather and Hero Icons, so on.
What I would like to ask is whether there is a recommended option amongst these, and why? And if not, which option is most widely supported and/or most performant?
Thanks
Some background below, not necessary to read:
The Entity felt the best bet for me, for a while. I was a fan of having to load or package one less asset into my app, however small, if I had the opportunity. This and, I'd assumed that what is the "x" key on my keyboard might mean different things and be different codes to different encoders across the wider world. ×(;) will only ever be ×(;). That's my hope anyways. That said, I've noticed some issues with what appears to be irremovable padding of that entity; whitespace above and below the character which grows rather large as the font size increases. As a result CSS cursor effects fire prematurely, at a point where the cursor is significantly (visibly) far from the symbol proper. That and the inability to adjust the equivalent of the 'stroke-width' property for that symbol have me wondering if these newfangled SVGs, and all the unique features they bring, might be the best choice here regardless. `
Based on my experience (as this seems like an opinionated topic), I don't think there is a recommended best practice. In the beginning, to achieve a working state, I would use a capital X since it's universally supported. Later on, the use of a SVG would be a good option primarily because SVGs are easily scaled for any device and are supported practically universally.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I'm writing a story, When ever I'm done with a chapter I place it in a HTML file for fun. I've been using the paragraph tag for each paragraph. But I have a lot of paragraphs and there's a lot more to come. I'm here to ask if there's a easier way to do so. Willing to use css.
This is not a programming question, but still, since I know the answer I am answering it. What you are looking for is, Markdown.
Markdown is a Wiki like syntax, specifically used for Rich Text Content. So now since you have an issue with writing too many paragraphs, Markdown makes it easy to convert all the double line breaks to paragraphs for you.
For eg., consider the below text:
Pages that you view in incognito tabs won’t stick around in your browser’s history, cookie store or search history after you’ve closed all of your incognito tabs. Any files that you download or bookmarks that you create will be kept.
Going incognito doesn’t hide your browsing from your employer, your internet service provider or the websites that you visit.
You can see that there are two line breaks after the word kept.. This will render in a browser, when you input the above text in a Markdown converter, this way:
<p>Pages that you view in incognito tabs won’t stick around in your browser’s history, cookie store or search history after you’ve closed all of your incognito tabs. Any files that you download or bookmarks that you create will be kept.</p>
<p>Going incognito doesn’t hide your browsing from your employer, your internet service provider or the websites that you visit.</p>
Depending on how picky you are about presentation, you may consider wrapping the entire thing in...
<div style="white-space: pre-wrap">
Epic story of epic unicorn epicness!
</div>
This will preserve all whitespace, not just newlines but also spaces between words. This means that if you have a large space in your text (conveying a pause through typography, or whatever) then you can just type a bunch of spaces and they will work.
However, you won't have the ability to control how much space there is between paragraphs, other than by adding more newlines. You can't make the space whatever size you want like you could with paragraphs. Consider what you need and choose a course of action.
Personally, I'd use Notepad++ (or a similar editor), and do a "Find and Replace" for all regex (.+) to be replaced with <p>\1<\/p>
You can use simple search and replace as Niet the Dark Absol has suggested. Depending upon your Notepad++ version, the replace may require $0 to refer to source match. (Here is a more discussion about it, Notepad++ Regex replace - \1 doesn't work?).
Here is how you can search for the paragraph and replace with a paragraph tag.
Result
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
The website I'm making is for an author/illustrator and she wants words in the navigation bar to be written in her own handwriting, so the links in the navigation bar and her own name, which serves as the title, are all in the form of pictures rather than text.
Similarly, the homepage consists of some of her illustrations, each accompanied by a handwritten link, so that there is no text at all. I'm starting to realise from reading online that this may be seen as 'bad practise', so I want to ask those with more experience than me: how problematic is the lack of text?
I am not too worried about loading times and such - I've managed to make the image files quite small - but more things concerning accessibility and whether the site will appear in search engines.
And are there any ways I can avoid problems whilst still using the handwriting?
When you want to use images as navigation elements and are concerned about SEO and accessibility, you can use the alt-tag which you should use anyways.
Example:
<img src='images/nav1.png' alt='Home' />
Screenreaders and search engines use these tags to deal with images which they of course can not read.
There are two issues here. First, people who do not see images (for one reason or another) will find the site almost impossible to navigate, unless the img elements have alt attributes. Correctly written alt attributes resolve this problem and can be expected to provide adequate information to search engines as well. Second, people who use normal graphic browsers will see the texts in a specific appearance. This may mean that they find it less legible than normal text, perhaps even illegible. This greatly depends on the style of the text, including size and the contrast between text and background color.
If a downloadable font were used instead, via #font-face, then the latter problem would in principle be less severe, since users could disable page fonts and see the text in their preferred font. This is rather theoretical, though, and creating a font is nontrivial and probably not worth the effort here.
On the practical side, write the alt attributes and ask the author consider whether the font is legible enough to all visitors, including people with eyesight problems. It’s up to the author to decide whether the reduction in usability and accessibility is justified by the artistic impression made.
You can choose from many handwritting fonts and link them via #font-face.
If she wants to use her 'font', use images (ideally one image - looking for sprite) and put text underneath - it's call image replacement.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
This seems like kind of a basic question. What are the reasons one would choose to use a css document instead of altering the style with the style tags in the html document? Is it not possible, for instance, to alter IDs and classes from within the html style tags? Thanks- this is my first stackoverflow question!
There's nothing technically wrong with using the style tag, but most pages have a seperate style sheet file.
Here are some reasons to use a seperate style sheet file:
The page may load faster due to asynchronous loading by the browser.
Seperates your HTML markup from your CSS styles.
Caching.
Easier to maintain because all the CSS is in one place.
You may also want to look into LESS or SASS.
There are several benefits
Reusability. An external site sheet can be used by multiple documents, so you don't have to write a new style sheet for each.
Coherence. With external style sheets you can be sure that the documents have at least the same basic styles and are visually consistent. Embedded style sheets tend to drift away from the standard.
Performance. An external style sheet can be cached by the browser, which means it doesn't have to be transferred every time the client requests a document. An embedded style sheet has to be transferred every time the browser requests a document.
Maintainability. If you have a set of documents that have the same visual appearance, and a change has to be made (changes to the corporate identity for example), if the style sheet is external you have to change it in only one place. Using embedded styles you would have to make the same change in each document.
Check out this LINK
In my own words, using CSS makes thing a lot simpler as adding styles for each tag in HTML is basically just not practical. Hence defining how a particular element will look on the page just once and then reusing the same style multiple times saves a lot of time
CSS files is cacheable by the browser, the style tag in an HTML document just adds an extra file size overhead that needs to be downloaded everytime.